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

时间:2014-07-27 20:48:57

标签: javascript angularjs payment-gateway credit-card braintree

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

无论如何我可以加密卡的详细信息吗?

2 个答案:

答案 0 :(得分:4)

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

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

如果您查看Braintree文档(Example here),您会注意到示例表单中的每个input都添加了一个属性data-encrypted-name

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

然后文档指出了这段代码:

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

提交表单时,调用braintree.js中的代码,检查表单,查看每个标记为input的纯文本,对其进行加密,根据{{1保存这些加密值当表单通过HTTP / HTTPS传输时,然后使用

在上面的AngularJS示例代码中,OP 包含某些data--encrypted-name的{​​{1}}属性(我不知道它是否需要打开)所有这些)但只是标记输入是不够的。仍然需要调用加密原始输入值(或者在这种情况下,模型数据)的函数,然后可以在data-encrypted-name中将该加密模型发送回服务器。

另一种说法,问题实现:

  1. 表单构建模型
  2. 通过HTTP发送到服务器的模型
  3. 更正后的实施将是:

    1. 表单构建模型
    2. 调用Braintree.js来加密模型的某些部分。
    3. 加密模型通过HTTP(或生产中的HTTPS)发送到服务器
    4. 这是一个其他人确实展示了一种在运行中加密AngularJS模型数据的方法:

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

      如果是我,我只是在提交表单之前立即在每个字段上调用input而不是在每个按键上 - 或者在提交时修改指令以在表单上工作。

答案 1 :(得分:2)

如果使用HTTPS访问您的html页面,那么您的表单提交将(除非另有说明)是HTTPS。如果您想确保使用HTTPS,那么您需要在服务器上执行某些操作以禁止此特定页面的HTTP。