Skip to content

Latest commit

 

History

History
35 lines (22 loc) · 2.28 KB

content-security-policy.md

File metadata and controls

35 lines (22 loc) · 2.28 KB
Raw

コンテンツセキュリティポリシー

このページは、CSPエラーを回避するためのものです: "Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'"." この取り組みを推進した@Zwederに多大な感謝を捧げます

CSP（Content Security Policy）とは、ブラウザがどこからアセットのダウンロードを許可するか、また、それらのアセットの実行を許可するかを制御する方法である。

CSPの背景を読む

react-beautiful-dndは<head>内に<style>要素を作成し、その値を動的に更新します([/docs/guides/preset-styles.md]およびDragging React performance forwardを参照)。これは unsafe inline と見なされ、厳格なCSPポリシーに違反することになります。Content-Security-Policy: style-src 'self'`に違反します

オプション1: unsafe-inlineを使用する

単純な解決策その1、より緩いstyle-src 'unsafe-inline'を使用する。⚠️これはCSPを緩めることになるので、理想的ではありません。

- Content-Security-Policy: style-src 'self'
+ Content-Security-Policy: style-src 'unsafe-inline'

オプション2: nonceを使用する

より厳格なディレクティブであるContent-Security-Policy: style-src 'self'は、nonce(一度だけ使用する番号)を指定すれば使用することができます。

JSSプロジェクトには素晴らしいCSPガイドがあり、nonceをどのように設定すればよいかが説明されています。ブラウザでnonceの値を取得したら、それを<DragDropContext />に渡して、react-beautiful-dndにnonceを使用するように伝えることができます。

<DragDropContext nonce={getNonce()}>{/*...*/}</DragDropContext>

←ドキュメントに戻る