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

本文介绍了在Google Chrome扩展程序中使用Stripe信用卡表格-无法避免“付款不安全?"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在浏览器弹出窗口中获取一个简单的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

<!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.

Stripe信用卡表格

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

问题描述

推荐答案