CSP制限下でのRazorpayサブスクリプションボタンの埋め込み方法

サポート
1

サブスクリプション用のシンプルな静的ページを作成し、そのページにボタンを埋め込みたいと考えています。

コードは次のとおりです。

<form>
    <script
        src="https://cdn.razorpay.com/static/widget/subscription-button.js"
        data-subscription_button_id="pl_randodmdi7373737"
        data-button_theme="brand-color"
        async>
    </script>
</form>

私の知る限り、CSPではスクリプトを使用できません。これは可能でしょうか？

追伸：カスタムページにはLanding Page Plug-inを使用しています。

2

これで役立つかもしれません

CSPに関する詳細はこちらをご覧ください: Mitigate XSS Attacks with Content Security Policy

「いいね！」 3
3 
コンテンツセキュリティポリシー スクリプト src 

​
https://cdn.razorpay.com
アイテムを追加…

​
content_security_policy_script_src: 値は 'unsafe-eval' または 'wasm-unsafe-eval' であるか、'ハッシュアルゴリズム-base64値' の形式である必要があります。サポートされているハッシュアルゴリズムは sha256、sha384、または sha512 です。入力が単一引用符で囲まれていることを確認してください。
追加の許可されたスクリプトソース。現在のホストとCDNはデフォルトで含まれています。コンテンツセキュリティポリシー（CSP）によるXSS攻撃の軽減を参照してください。 strict-dynamicが有効になっているため、他のホストソースは無視されます。

これが表示されているエラーです。

4

管理エリアの設定構成のエラーですね…スクリプトを追加した後、ブラウザのコンソールでエラーを探します（スクリプトが読み込まれるはずのページを右クリックし、「検証」を選択して、「コンソール」タブに移動します）。

コンソールには、次のようなエラーが表示されるはずです。

AIによってキャプション付けされた、セキュリティポリシーディレクティブの違反によりインラインスクリプトの実行が拒否されたことを示す、ウェブブラウザに表示される赤いエラーメッセージ。(AIによってキャプション付けされた)
AIによってキャプション付けされた、セキュリティポリシーディレクティブの違反によりインラインスクリプトの実行が拒否されたことを示す、ウェブブラウザに表示される赤いエラーメッセージ。(AIによってキャプション付けされた)1280×132 27.9 KB

このエラーは、ハッシュ値またはnonce値のいずれかを提供します。これを管理者の「コンテンツセキュリティポリシー スクリプト src」設定に追加します。

「いいね！」 1