プラグインでサードパーティライブラリを使用する際のCSPエラー

開発
1

多くの異なる試行錯誤とアプローチを経て、プラグインで使用するためにサードパーティライブラリを正常にロードすることに成功しました。

ライブラリは public/javascripts/some-library.js の下にあります。

コントローラーでは、次の方法でスクリプトを正常にロードできます。

loadScript("/plugins/my-plugin/javascripts/some-library.js")

そのファイル内で、ライブラリがBlobを作成し、それらが使用される変数に割り当てることがあります。例：

var A=URL.createObjectURL(new Blob(['\n\tsome code snippet...],{type:"application/javascript"}))

そして、プラグインコードでライブラリを使用しようとすると、次のエラーが発生します。

Refused to load the script 'blob:http://localhost:4200/f33a6788-a853-4286-883a-48cb8e2c9cc1' because it violates the following Content Security Policy directive: "script-src http://localhost:4200/assets/ etc etc...

これを回避するための最良の方法は何でしょうか？

ご協力とヒントをいただければ幸いです！

2

http://localhost:4200 を CSP に追加するだけではどうでしょうか？

3

それは試してみたのですが、何も変わりませんでした。 :confused:

4

blob:http://localhost:4200 についてはどうですか？

5

それも試しましたが、CSP の無効なステートメントです :confused:

6

これを見つけた人のために、csp script srcに追加する正しい行は blob: です。

7

待ってください！開発中にCSPを実装する必要はありません。攻撃者のリスクはありませんか？

また、一部の開発者ツールがブロックされる可能性もあります。

この設定をオフにするだけです。

IMG_0197
IMG_0197781×155 22.5 KB

簡単です。

動作するプラグインを本番ステージングサーバーでテストできるようになるまで、この頭痛の種は延期してください。

8

まさに本番環境の準備段階だったので、これは解決すべき最後の頭痛の種でした。それに、これらのことを延期するのは好きではありません。特に、それが潜在的な取引妨害要因になるかどうかを突き止め、まったく別の道を見つける必要がある場合はなおさらです :man_surfing:

9

はい、しかし、実際のインターネットアドレスを持つ本番ステージングサーバーのCSP設定に取り組むべきです。

localhostはインターネットアドレスではありません！:slight_smile::wink: httpsでもありません…