在Google Chrome扩展程序中使用Stripe信用卡表格-无法避免“付款不安全?”

use*_*424 3 google-chrome google-chrome-extension stripe-payments

我正在尝试在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': {
          color: '#CFD7E0',
        },
      },
    }
  });
  card.mount('#card-element');
}
Run Code Online (Sandbox Code Playgroud)

更新

完全卸载Chrome并在〜/ Library / Application Support / Google / Chrome中删除我的所有个人资料信息,然后重新安装后,此信用卡表格错误似乎已经消失,并且我不再看到“付款不安全”消息。也许这只是一些奇怪的暂时性错误。但是,Stripe API仍会向控制台显示不祥的警告:

您可以通过HTTP测试您的Stripe.js集成。但是,实时Stripe.js集成必须使用HTTPS。

正如之前所说,Stripe似乎是通过https本身完成所有操作的,所以我想知道这(也许吗?)是否与Stripe表单位于带有chrome-extension:// url的浏览器弹出窗口中有关。

Ywa*_*ain 5

我想知道是否(可能是?)与以下事实有关:条纹形式位于带有chrome-extension://网址的浏览器弹出窗口中。

是的,几乎肯定是这样。当Javascript(via window.location.protocol)看到的协议不是时,您提到的警告是由Elements发出的https:。(没有可用的最小化版本的Elements代码,但是您可以相对容易地检查缩小后的代码,并查找触发您提到的警告的条件。)

实际上,如果您确定该文件实际上是通过HTTPS加载的,那应该没问题。但是,这种不常见的情况可能意味着您不符合PCI SAQ A的条件。我建议您直接与Stripe的支持部门联系,以查看他们是否可以提供有关扩展的PCI合规性状态的更多信息。

  • 为了解决这个问题,一些流行的扩展在他们自己的页面上托管了 Stripe 表单,只需从扩展中链接到它,例如 https://sessionbuddy.com/donate/ (2认同)