我正在尝试在Google Chrome扩展程序的浏览器弹出窗口中获取一个简单的Stripe信用卡表格。但是,对于最新版本的Chrome,信用卡表格中始终会显示“付款不安全”信息:
我已经在这里阅读了谷歌浏览器文档对此消息要说的内容:https : //developers.google.com/web/updates/2016/10/avoid-not-secure-warn
我认为这是相关的部分:
为确保未在页面上显示“不安全”警告,必须确保所有包含元素的表格以及检测为信用卡字段的所有输入仅出现在安全来源上。这意味着顶层页面必须是HTTPS,并且如果输入在iframe中,则该iframe也必须通过HTTPS进行投放。
我已经检查了Stripe信用卡表单的iframe,它似乎正在通过https加载其所有资源,就像Google所说的那样。
我没有在扩展程序中的其他任何地方加载任何其他资源。
我唯一能想到的是扩展名弹出窗口本身是chrome-extension:// URL,但是我不确定这是否与此处相关。如果这是问题所在,是否表示如果没有“付款不安全”消息,就不可能在扩展弹出窗口中使用信用卡表格吗?
任何帮助或澄清将不胜感激!
这是我的代码:
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>
Run Code Online (Sandbox Code Playgroud)
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': …Run Code Online (Sandbox Code Playgroud)