<h2 id="hc69c85bcf9">背景</h2><p>外部ライブラリを特定のサイトに組み込むとき、リクエストが飛んでいないことがあった。コンソールをみると "Content Security Policy"なるエラーがでていた。実は以前"Content Security Policy"関連のレスポンス表示を見たことがあったのだけど、あまり調べずにそのまま放置していた。いい機会なので今回CSP (Content Security Policy) について少し調べてみた。</p><h2 id="haad0f131a8">CSPとは？</h2><blockquote>コンテンツセキュリティポリシー<span style="color:#1b1b1b"> (</span><a href="https://developer.mozilla.org/ja/docs/Glossary/CSP" target="_blank" rel="noopener noreferrer">CSP</a><span style="color:#1b1b1b">) は、クロスサイトスクリプティング (</span><a href="https://developer.mozilla.org/ja/docs/Glossary/Cross-site_scripting" target="_blank" rel="noopener noreferrer">Cross-site-scripting</a><span style="color:#1b1b1b">) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤーです。これらの攻撃はデータの窃取からサイトの改ざん、マルウェアの拡散に至るまで、様々な目的に用いられます。</span></blockquote><p style="text-align:right"><span style="font-size: 0.75em">引用: https://developer.mozilla.org/ja/docs/Web/HTTP/CSP</span></p><p>つまり、特定のサイトに下記のような制約を加えることで、CSSやJavaScriptの実行方法とリソースの読み込み先をホワイトリスト的に管理することができるようだ。</p><ul><li>外部リソース (JavaScript, CSS, 画像など) の読み込み</li><li>inlineスクリプトの実行</li><li>evalの実行</li><li>inlineスタイルの適用</li></ul><p><br></p><h2 id="h293f170a56">仕組み</h2><h3 id="he0317d56bd">1. ヘッダーの指定によるリクエストの制御</h3><p style="text-align:center"><img src="https://images.microcms-assets.io/assets/1e1129a92bc841ccad1a43c6a2977d50/3c503eb9791c4edf8315b5c0759632ee/Group%205%20(2)%20(1).png?w=800&amp;h=551" alt=""></p><h3 id="h683a12a36c">2. 設定方法</h3><p>HTTP Response Headerに下記を追加する<br><code>ポリシー</code> には、サイトに適用するCSPディレクティブ (CSPの内容を指定するための要素) から構成される文字列を指定する</p><pre><code>Content-Security-Policy: ポリシー</code></pre><h4 id="h9039af0ceb">CSP HTTP Header</h4><pre><code>Content-Security-Policy: ディレクティブ名 ソース; ディレクティブ名 ソース;</code></pre><p><code>;</code>  で区切られている点がポイント。</p><h4 id="hc39c40c90f">CSP HTTP Headerの記述例</h4><pre><code>Content-Security-Policy: img-src 'self' https://example.com</code></pre><p>上記の場合は、画像リソース用ディレクティブ <code>img-src</code> に対しての設定例。サイト自身のオリジン <code>self</code> と <code>https://example.com</code> からの画像かfaviconのみが有効となり、それ以外のオリジンからは、コンテンツとして受けつけないようになる。<br></p><h2 id="hd1744469ec">ディレクティブ例<br><code>script-src</code> </h2><p><code>&lt;script&gt;</code> で読み込まれる外部リソースの制御だけでなく、inline等の <code>onclick</code>  などの実行も制御する。</p><pre><code>&lt;script src="https://not-example.com/js/library.js"&gt;&lt;/script&gt;

&lt;button id="btn" onclick="doSomething()"&gt;&lt;/button&gt;
🖕上記はブロックされるため、下記のように記述する必要がある
document.getElementById("btn").addEventListener("click", doSomething);</code></pre><p><br>リソースや <code>unsafe-inline</code>  以外にも <code>nonce</code>  も利用できる。</p><pre><code>Content-Security-Policy: script-src 'nonce-2726c7f26c'</code></pre><p><br>上記ディレクティブの場合は、下記の処理は実行できる (同一のnonce値である場合に許可される)</p><pre><code>&lt;script nonce="2726c7f26c"&gt;
  const inline = 1;
  // …
&lt;/script&gt;</code></pre><p><br>また、今後増えつつありそうなWASMの処理も下記のように明示的に許可をする必要がある</p><pre><code>Content-Security-Policy: script-src 'wasm-unsafe-eval'</code></pre><p><br></p><h2 id="h1269d2a126"><code>connect-src</code> </h2><p><code>a</code>  や JS のfetch等のメソッドによって読み込まれるリソースを制限。例として、下記はブロックされ、実行できない。</p><pre><code>&lt;a ping="https://not-example.com"&gt;
&lt;script&gt;
  const xhr = new XMLHttpRequest();
  xhr.open("GET", "https://not-example.com/");
  xhr.send();

  const ws = new WebSocket("https://not-example.com/");

  const es = new EventSource("https://not-example.com/");

  navigator.sendBeacon("https://not-example.com/", {
    /* … */
  });
&lt;/script&gt;&lt;/a&gt;</code></pre><h2 id="hddf3f89448"><code>img-src</code>  </h2><p>画像やfaviconに対する有効なソースを定義する<br></p><h2 id="h77745cadab"><code>style-src</code></h2><p><span style="color:#000000">CSS関連のリソース制御</span></p><pre><code>Content-Security-Policy: style-src https://example.com/</code></pre><p><br>上記ディレクティブの場合、下記はブロックされる</p><pre><code>&lt;link href="https://not-example.com/styles/main.css" rel="stylesheet" /&gt;

&lt;style&gt;
  #inline-style {
    background: red;
  }
&lt;/style&gt;

&lt;style&gt;
  @import url("https://not-example.com/styles/print.css") print;
&lt;/style&gt;

&lt;div style="display:none"&gt;Foo&lt;/div&gt;

document.querySelector('div').setAttribute('style', 'display:none;');
document.querySelector('div').style.cssText = 'display:none;';
🖕上記はブロックされるため、下記のように記述する必要がある
document.querySelector('div').style.display = 'none';</code></pre><p><code>script-src</code>  と同様に <code>&lt;style&gt;</code>  に<code>nonce</code> を利用することも可能。<br></p><h2 id="hc9e88a820f"><code>default-src</code></h2><p> 別のディレクティブに対するフォールバックとして機能する。例えば、 <code>script-src</code>  が明示的に指定されていないとき本ディレクティブが制御する。<br></p>

記憶に残ったことを忘れないために色々メモとしてのこしていきます