在Braintree中使用AngularJS加密信用卡详细信息

Question

我将Braintree用于支付网关，遇到了一个问题。
我正在发送信用卡信息以及其他用户详细信息。

为了安全起见，必须对信用卡信息进行加密，并且由Braintree通过以下方式完成：

braintree.onSubmitEncryptForm('braintree-payment-form');

直到我在前端使用纯JavaScript（AngularJS），并且发现发送到服务器时数据未加密，此方法才能正常工作，
这是代码：

<form name="paymentForm" ng-submit="submitUser(userDetails)" method="post" id="braintree-payment-form">
<p>
  <label style="color:white">Name</label>
  <input type="text" ng-model="userDetails.userName" name="userName" size="20" />
</p>
<p>
  <label style="color:white">Email</label>
  <input type="text" ng-model="userDetails.email" name="email" size="20"/>
</p>
<p>
  <label style="color:white">Company</label>
  <input type="text" ng-model="userDetails.company" name="company" size="20" />
</p>
  <label style="color:white">Card Number</label>
  <input type="text" size="20" ng-model="userDetails.number" autocomplete="off" data-encrypted-name="number" />
</p>
<p>
  <label style="color:white">CVV</label>
  <input type="text" size="4" ng-model="userDetails.cvv" autocomplete="off" data-encrypted-name="cvv" />
</p>
<p>
  <label style="color:white">Expiration (MM/YYYY)</label>
  <input type="text" size="2" ng-model="userDetails.month" data-encrypted-name="month" /> / <input type="text" size="4" ng-model="userDetails.year" data-encrypted-name="year" />
</p>
<input type="submit" id="submit" />

在提交表单时，我正在将数据发送到服务器。

$scope.submitUser = function(userDetails){
    $http({
        url: '/createtransaction',
        method: 'POST',
        data: JSON.stringify(userDetails),
        headers: {'Content-Type': 'application/json'}
    }).success(function (data, status, headers, config) {
        // success
    }).error(function (data, status, headers, config) {
        //error
    });
}

无论如何，我可以加密卡详细信息吗？

Answer 1

问题是“为什么Braintree JS不加密AJAX请求数据”，答案与HTTPS无关。

是的，需要HTTPS来加密生产中的流量-在这种情况下，它将加密已经加密的卡数据-但是HTTPS既不是问题，也不是答案。

如果您查看Braintree文档（ 此处为示例 ），您会注意到示例表单中的每个input都添加了一个属性data-encrypted-name ：

<input type="text" size="20" autocomplete="off" data-encrypted-name="number" />

然后，文档指出以下代码：

braintree.onSubmitEncryptForm('braintree-payment-form');

提交表单后，将调用braintree.js代码，检查表单，查看每个标记input中的纯文本，对其进行data--encrypted-name ， 然后根据data--encrypted-name属性保存这些加密的值， 然后再对这些加密的值进行加密通过HTTP / HTTPS传输表单时使用数据 。

在上面的AngularJS示例代码中，OP 确实在某些input s上包含了data-encrypted-name属性（我不知道是否需要在所有这些input属性上），但仅标记输入是不够的。 仍然需要调用对原始输入值（或在这种情况下为模型数据）进行加密的功能，然后可以在POST将该加密的模型发送回服务器。

换句话说，问题实现：

1. 表格建立模型
2. 通过HTTP将模型发送到服务器

正确的实现将是：

1. 表格建立模型
2. 调用Braintree.js来加密模型的某些部分。
3. 加密的模型通过HTTP（或生产中的HTTPS）发送到服务器

这是其他人确实展示的一种动态加密AngularJS模型数据的方法：

http://plnkr.co/edit/2kF9Im?p=preview

如果是我，我会在提交表单之前立即在每个字段上调用braintree.encrypt() ，而不是在每次按键时都调用braintree.encrypt() -或修改指令以在提交时在表单上工作。

Answer 2

如果使用HTTPS访问您的html页面，则您的表单提交将为HTTPS（除非另有说明）。 如果要确保使用HTTPS，则需要在服务器上执行某些操作以禁止对此特定页面使用HTTP。