加密使用AngularJS布伦特里信用卡信息 [英] Encrypting credit card details using AngularJS in Braintree

问题描述

我使用的布伦特里的支付网关和我有穿过的问题。结果
我送与其他用户详细信息的信用卡信息。

I am using Braintree for payment gateway and I have across an issue.
I am sending credit card information with other user details.

为了安全起见信用卡信息已被加密，并且它是由做布伦特里通过包括以下内容：

For security purposes Credit card information has to be encrypted and it is being done by Braintree by including following:

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

直到我在前端使用纯JavaScript（AngularJS）这工作得很好，我看到在发送至服务器的数据没有加密，结果
这里是code：

This works fine until I use pure javascript (AngularJS) in front-end and I'm seeing that data is not encrypted while sending to server,
Here is code:

<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" />

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

On form submit, I am sending data to server.

$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
    });
}

反正我有可以加密卡的详细信息？

Is there anyway I can encrypt card details?

推荐答案

现在的问题是为什么AJAX请求数据未加密的按布伦特里JS ，答案是无关的HTTPS

The question is "why is the AJAX request data not encrypted by Braintree JS", and the answer is nothing to do with HTTPS.

是，HTTPS，需要在生产中进行加密的流量 - 在这种情况下，将加密已加密的卡数据 - 但HTTPS是则该问题和此处的答案

Yes, HTTPS is required to encrypt traffic in production - and in this case it will encrypt the already encrypted card data - but HTTPS is neither the question nor the answer here.

如果你（这里 例）看布伦特里文档，你会注意每个输入中的示例形式增加一个属性数据加密的名称：

If you look at the Braintree documentation (Example here) you'll note that each input in the example form has added an attribute data-encrypted-name:

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

该文档，然后指出了code：

The documentation then points out this code:

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

当提交表单，在 braintree.js code被调用，检查方式，检查每个标记输入，对其进行加密，保存根据这些数据加密值 - 加密名属性和则该加密数据使用的表单时通过HTTP / HTTPS传输。

When the form is submitted, code in braintree.js is invoked, inspects the form, looks at the plain text in each marked input, encrypts it, save those encrypted values according to the data--encrypted-name attributes, and then that encrypted data is used when the form is transmitted via HTTP/HTTPS.

在AngularJS例如：code以上时，OP的确实的包括数据加密的名称上的一些<属性code>输入 S（我不知道，如果它需要对所有的人），但只是标注输入是不够的。函数进行加密的原始输入值（或在这种情况下，该模型数据）仍需要被调用，然后该加密的模型可以在一个 POST 回送到服务器

In the AngularJS example code above, the OP does include the data-encrypted-name attributes on some of the inputs (I don't know if it needs to be on all of them) but just labeling the input is not enough. The function to encrypt the raw input values (or in this case, the model data) still needs to be invoked, and then that encrypted model can be sent in a POST back to the server.

换句话说，问题实现：

1. 表建立一个模型


2. 通过HTTP发送到服务器模式

修正后的实施将是：

1. 表建立一个模型


2. Braintree.js调用加密模型的某些部分。


3. 加密模式是通过HTTP发送（或HTTPS生产）到服务器

下面是一个其他人plunkr显示没有加密动态AngularJS模型数据的一种方法：

Here's a plunkr someone else did showing one way to encrypt AngularJS model data on the fly:

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

如果是我的话，我只是叫 braintree.encrypt（）上的每个字段之前立即提交表单，而不是在每一个关键的preSS - 或修改指令在提交时表单上工作。

If it were me, I'd just call braintree.encrypt() on each field immediately prior to submitting the form rather than on every keypress - or modify the directive to work on the form at submission time.

这篇关于加密使用AngularJS布伦特里信用卡信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！