在Google Chrome扩展程序中使用Stripe信用卡表格-无法避免“付款不安全?" [英] Using a Stripe credit card form in Google Chrome extension-- unable to avoid "Payment not secure?"
问题描述
我正在尝试在浏览器弹出窗口中获取一个简单的Stripe信用卡表格，以获取Google chrome扩展程序.但是，对于最新版本的Chrome，信用卡表格中始终会显示付款不安全"消息:
I'm trying to get a simple Stripe credit card form inside the browser popup for a google chrome extension. However with the latest version of Chrome, the credit card form is always being accompanied with a message of "Payment not secure":
我已经在此处阅读了Google chrome文档对此消息的评论: https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn
I've read what the google chrome docs have to say about this message over here: https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn
我认为这是相关的部分:
And I think this is the relevant part:
为确保未在页面上显示不安全"警告，必须确保所有包含元素的表格以及检测为信用卡字段的所有输入仅出现在安全来源上.这意味着顶层页面必须是HTTPS，并且如果输入是在iframe中，则该iframe也必须通过HTTPS进行投放.
我已经检查了Stripe信用卡表单的iframe，它似乎正在通过https加载其所有资源，就像Google所说的那样.
I've inspected the iframe of the Stripe credit card form, and it seems to be loading all of its resources over https, like Google says it should.
我不会在扩展程序中的其他任何地方加载任何其他资源.
I am not loading any other resources anywhere else in the extension.
我能想到的唯一另一件事是扩展名弹出窗口本身是chrome-extension://URL，但是我不确定这是否与此处相关.如果这是问题所在，那是否意味着如果没有付款不安全"消息，就不可能在扩展弹出窗口中使用信用卡表格吗?
The only other thing I can think of is that the extension popup itself is a chrome-extension:// URL, but I am unsure if that is relevant here. If that is the problem, does that mean that it's impossible to have a credit card form inside an extension popup without the "payment not secure" message?
任何帮助或澄清将不胜感激！
Any help or clarification would be much appreciated!
这是我的代码:
popup.html
popup.html
<!doctype html>
<html>
<head>
<script src="popup.js"></script>
<script src="stripe.js"></script>
<style>
body{
width: 400px;
}
</style>
</head>
<body>
<form id="PaymentForm">
<h2>Enter Payment Details</h2>
<div>
<div id="card-element" class="field"></div>
</div>
</form>
</body>
</html>
popup.js:
window.onload = function(){
var stripe = Stripe('MY_API_KEY');
var elements = stripe.elements();
var card = elements.create('card', {
style: {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: 'Helvetica Neue',
fontSize: '15px',
'::placeholder': {
color: '#CFD7E0',
},
},
}
});
card.mount('#card-element');
}
更新
完全卸载Chrome并在〜/Library/Application Support/Google/Chrome中删除我的所有个人资料信息，然后重新安装后，此信用卡表格错误似乎已经消失，并且我不再看到付款不安全"消息.也许这只是一些奇怪的暂时性错误.但是，Stripe API仍会向控制台显示不祥的警告:
After completely uninstalling Chrome and deleting all my profile information at ~/Library/Application Support/Google/Chrome and then reinstalling it, this credit card form error seems to have disappeared and I no longer see the "payment not secure" message. Maybe it was just some weird transient bug. However, the Stripe API still prints an ominous warning to the console:
您可以通过HTTP测试您的Stripe.js集成.但是，实时Stripe.js集成必须使用HTTPS.
正如之前所说，Stripe似乎是通过https本身完成所有操作的，所以我想知道这(也许吗?)是否与条纹形式位于带有chrome-extension://url的浏览器弹出窗口中这一事实有关.
And as said before Stripe seems to be doing everything with https itself, so I'm wondering if this (maybe?) is related to the fact the stripe form is inside a browser popup with a chrome-extension:// url.
推荐答案
我想知道这(也许是?)是否与以下事实有关:条纹形式位于带有chrome-extension://网址的浏览器弹出窗口中.
I'm wondering if this (maybe?) is related to the fact the stripe form is inside a browser popup with a chrome-extension:// url.
是的，几乎可以肯定是这种情况.当Javascript(通过window.location.protocol)看到的协议不是https:时，您提到的警告是由Elements发出的. (没有可用的最小化版本的Elements代码，但是您可以相对容易地检查最小化代码和寻找触发您提到的警告的条件.)
Yes, this is almost definitely the case. The warning you mentioned is issued by Elements when the protocol saw by Javascript (via window.location.protocol) is not https:. (There is no unminified version of Elements' code available, but you can relatively easily check the minified code and look for the conditions that triggers the warning you mentioned.)
在实践中，如果您确定文件实际上是通过HTTPS加载的，那应该没问题.但是，这种不常见的情况可能意味着您不符合 PCI SAQ A .我建议您直接与 Stripe的支持联系，以了解他们是否可以提供有关以下方面的PCI合规性状态的更多信息:您的扩展程序.
In practice, if you're sure that the file is actually loaded through HTTPS, it should be fine. However, this uncommon scenario probably means that you're not eligible for PCI SAQ A. I recommend you reach out directly to Stripe's support to see if they can offer more information regarding the PCI compliance status of your extension.
这篇关于在Google Chrome扩展程序中使用Stripe信用卡表格-无法避免“付款不安全?"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
