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

我正在使用 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
    });
}

我可以加密卡详细信息吗？

问题是“为什么AJAX请求数据没有加密通过布伦特里 JS”，答案与 HTTPS 无关。

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

如果您查看 Braintree 文档（示例在这里 https://www.braintreepayments.com/docs/python/guide/getting_paid）你会注意到每个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属性，以及然后使用加密数据当表单通过 HTTP/HTTPS 传输时。

在上面的 AngularJS 示例代码中，OPdoes包括data-encrypted-name一些属性inputs （我不知道是否需要在所有这些上），但仅仅标记输入是不够的。仍然需要调用对原始输入值（或在本例中为模型数据）进行加密的函数，然后可以将加密的模型以POST返回到服务器。

换句话说，问题的实现：

1. 表单构建模型
2. 模型通过 HTTP 发送到服务器

更正后的实现将是：

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

这是其他人做的一个 plunkr，展示了一种动态加密 AngularJS 模型数据的方法：

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

如果是我的话我就打电话braintree.encrypt()在提交表单之前立即在每个字段上执行，而不是在每次按键时执行 - 或者修改指令以在提交时处理表单。