TLDR: I made this Netlify plugin for CSP. You should give it a try.

あなたは血を吐くdevのツールの完全な怒りを見たことがありますblocked:csp あなたに?

違う?よく、あなたは必要があります.それはあなたが少なくともAをセットアップしようとしたことを意味Content-Security-Policy あなたのウェブサイトの前に.
コンテンツセキュリティポリシーの設定はXSS攻撃の防止に必須ですXSS was responsible for 40% cyber attacks in 2019 .
しかし、それは常に設定することは楽しいことではない.閉じるこの動画はお気に入りから削除されていますGridsome on Netlify , あなたが2を追加するだけで解決することはできません2つの重要な問題に遭遇するContent-Security-Policy あなたのヘッダーの鍵netlify.toml .

Gridsome (とGatsby )は初期状態をインラインにします.<script></script> ブロック.

Vueはインラインスタイルを使用しますv-show , ライクstyle="display:none;"

これらの両方がCSP規則によってブロックされます.そして、それはあなたがランダムなスクリプトがあなたのウェブサイトまたはあなたのスタイルが(例えば、「現在支払う」ボタンとして他のリンクをスタイリングしている誰か)に台無しにされたくないので、良いです.
これを修正するには、インラインスクリプトの暗号ハッシュを生成する必要がありますので、ブラウザはこれを知っていて、改ざんされていません.あなたがオンラインで検索する場合は、いくつかを見つけるかもしれないbad advice , 使用のようにunsafe-inline . ( Bad! Bad! saith the buyer ...)
あなたがNetlifyを使用しているならば、あなたは使うことができますthis amazing package I made earlier 生み出すsha256 ハッシュスクリプトのインラインスクリプトとスタイルContent-Security-Policy ヘッダ.Githubレポに頭を通して、あなたのNetLifyプロジェクトでそれを試してください.

マルセロテルス / プラグインプラグイン

インラインスクリプトハッシュからCSPヘッダーを生成する

プラグインプラグイン

Generate Content-Security-Policy headers from inline script and style hashes

物事を実行するときGatsby or Gridsome , 初期状態は<script> タグ
現代のブラウザのコンテンツセキュリティポリシーはインラインスクリプトやスタイルが好きではないので、それを回避するためにcryptographic nonce またはcryptographic hash 各スクリプトの
あなたは各負荷のためにそれを更新することはできませんので、ノンセは問題外です.
このパッケージは、crypographic hashを生成します.SHA-256 ) すべてのインラインスクリプトと各HTMLファイルのスタイルの_headers あなたの好みの他の方針と一緒のファイル.

Note
Netlify lets you add a Content-Security-Policy header in your netlify.toml. This will overwrite values inside _headers, so don't do that.

あなたが存在するならば_headers ファイルは、既存のファイルに追加されます.ちょっとファイルが終わるのを確認してください.
View on GitHub
あなたがNetlifyを使用していないならば、あなたはあなた自身の上にいます.残念です.
XSS脆弱性のためにあなたのウェブサイトをチェックしたいですか?これをブラウザコンソールで実行します.

const script = document.createElement('script')
script.innerHTML = 'alert("hacked!")'
document.body.appendChild(script)

😱