BinaryDevelop
  1. ホーム
  2. google-chrome

[解決済み] Google Chrome拡張機能でStripeのクレジットカードフォームを使用。"Payment not secure?" を回避できない。

2022-02-12 01:47:30

質問

Google Chromeの拡張機能で、ブラウザのポップアップ内に簡単なStripeのクレジットカードのフォームを表示させようとしています。 しかし、クロームの最新バージョンでは、クレジットカードのフォームに常に "支払いは安全ではありません" というメッセージが表示されます。

安全でない支払い

このメッセージについて、google chrome docsの内容をこちらで読みました。 https://developers.google.com/web/updates/2016/10/avoid-not-secure-warn

そして、ここが関連する部分だと思います。

Not Secure警告が表示されないようにするには、要素を含むすべてのフォームと、クレジットカードのフィールドとして検出された入力が、安全なオリジン上にのみ存在するようにする必要があります。つまり、トップレベルのページはHTTPSでなければならず、入力がiframe内にある場合は、そのiframeもHTTPSで提供されなければなりません。

Stripeのクレジットカードフォームのiframeを検査したところ、Googleが言うように、すべてのリソースをhttpsで読み込んでいるようです。

エクステンションの他のどこにも他のリソースをロードしていません。

他に思いつくのは、拡張機能のポップアップ自体がchrome-extension://のURLになっていることですが、それがここで関係あるかは不明です。 もしそれが問題なら、拡張機能のポップアップ内にクレジットカードのフォームを設置しても、"payment not secure"のメッセージが表示されないということでしょうか？

何かお手伝いやご説明がありましたら、ぜひお願いします。

以下は私のコードです。

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にあるプロフィール情報をすべて削除してから再インストールしたところ、このクレジットカードのフォームエラーはなくなったようで、"payment not secure"というメッセージも表示されなくなったようです。 もしかしたら、変な一過性のバグだったのかもしれません。 しかし、Stripe APIはまだコンソールに不吉な警告を出力しています。

Stripe.jsの統合は、HTTPでテストすることができます。ただし、本番のStripe.js統合はHTTPSを使用する必要があります。

また、前述したようにStripeは全てhttpsで行っているようなので、Stripeのフォームがchrome-extension://のurlでブラウザのポップアップ内にあることと（もしかしたら）関係があるのでしょうか？

解決方法は？

<ブロッククオート

これは、ストライプのフォームがブラウザのポップアップ内にあり、chrome-extension://のURLで表示されることと関係があるのでしょうか？

はい、ほぼ間違いなくこのケースです。この警告は、ElementsがJavascriptでプロトコルを見たときに発せられるものです(via. window.location.protocol でない場合は https: . (Elementsのコードの最小化されていないバージョンはありませんが、比較的簡単に 最小化されたコード を読み、ご指摘の警告が出る条件を探してみてください)。

実際には、ファイルが実際にHTTPSで読み込まれていることが確認できれば、問題ないはずです。しかし、このような一般的でないシナリオでは、おそらく PCI SAQ A . に直接連絡することをお勧めします。 Stripeのサポート 拡張機能のPCI準拠状況について、より詳細な情報を提供できるかどうかを確認してください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します