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

Posted 2023-02-22

【中文标题】在 Braintree 中使用 AngularJS 加密信用卡详细信息

【英文标题】：Encrypting credit card details using AngularJS in Braintree

【发布时间】：2014-09-19 01:36:56

【问题描述】：

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

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

【问题讨论】：

正如 Dan 所说，HTTPS 是这里的关键。为什么 JS 密码学不是很安全在这里解释得很好：matasano.com/articles/javascript-cryptography

【参考方案1】：

问题是“为什么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 中的纯文本，对其进行加密，根据data--encrypted-name 属性保存这些加密值，然后 那么当通过 HTTP/HTTPS 传输表单时使用加密数据。

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

换一种说法，问题实现：

Form 构建模型 模型通过 HTTP 发送到服务器

更正后的实现是：

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

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

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

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

【参考方案2】：

如果您的 html 页面是使用 HTTPS 访问的，那么您的表单提交将（除非另有说明）是 HTTPS。如果你想确保使用 HTTPS，那么你需要在服务器上做一些事情来禁止这个特定页面的 HTTP。

【讨论】：

我不认为 HTTPS 是这个问题的问题，尽管我同意在生产环境中 HTTPS 当然是一项要求。

我同意，我的回答有点幼稚。当我将使用 Braintree 的 jquery 应用程序转换为使用 angular 时，我很快就会知道。