在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。