Using a Stripe credit card form in Google Chrome extension— unable to avoid “Payment not secure?”

问题

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

Payment not secure

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:

To ensure that the Not Secure warning is not displayed for your pages, you must ensure that all forms containing elements and any inputs detected as credit card fields are present only on secure origins. This means that the top-level page must be HTTPS and, if the input is in an iframe, that iframe must also be served over HTTPS.

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.

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!

Here is my code:

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

UPDATE

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:

You may test your Stripe.js integration over HTTP. However, live Stripe.js integrations must use HTTPS.

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.

回答1:

I'm wondering if this (maybe?) is related to the fact the stripe form is inside a browser popup with a chrome-extension:// url.

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

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.

来源：https://stackoverflow.com/questions/43329732/using-a-stripe-credit-card-form-in-google-chrome-extension-unable-to-avoid-pa

标签

google-chrome

google-chrome-extension

stripe-payments