がとらぼ

前回、個人ブログであってもCSPを付けたいということを書いた。とっつきにくいので手を出し難いかもしれないけど「難しい」と尻込みしないで思い切って飛び込んでみれば実はそんなに難しくはないかも。専門家の人には怒られるかもしれないけどCSP3の 'strict-dynamic' さえ使えば楽勝よと思っておいて良いかも。

hash(ハッシュ)の求め方

例えば1行だけのJavascriptがページにあるとする。このスクリプトのhashを求める。(↓)

<script>alert('test');</script>

<script> と </script> は含めない。hashを求める対象はこの例では「alert('test');」の部分。

$ echo -n "alert('test');" | openssl sha256 -binary | openssl base64
GAF48QOoxRvu0gZAmQivUdJPyBacqznBAXwnkfpmQX4=       ←これが求められたhash

echoコマンドは普通は最後に改行がつくので改行を付けない「-n」を引数に付ける。
求めたhashの文字列の前に「sha256-」を付けて全体の前後に「'」を付ける。
'sha256-GAF48QOoxRvu0gZAmQivUdJPyBacqznBAXwnkfpmQX4='
これで1つ出来上がり。1行の短いスクリプトであれば難しいことはなくてこれで。

複数行、シングルクォート「'」,ダブルクォートが「"」が入り交じるスクリプトは面倒なのでそれだけを1つのファイルに書き込む。次が元のスクリプトとする。

<script>
var a = 'test';
alert( a );
</script>

先にも書いたが<script> と </script> は含めないので消す。ただし、ハッシュを求める際は改行も対象に含まれる。
この例では、<script> と var の間に改行、alert( a ); と </script>の間に改行があるのでその改行は残す。(これが注意)

                 ←改行だけの行(空行)
var a = 'test';
alert( a );          ← ;の後で改行
                 ←空行

このようにして今回はファイル(hash1.txt)に保存。
なお、vimのようにファイルの最後に(編集画面では)見えない改行が勝手につくエディタを使う場合はその勝手に付く最後の空行に注意。これ結構やらかして悩まされそう。vimの場合、:set bin noeol して :wqでファイル最後の改行無しで保存できる。(1行しかないと変な挙動で空ファイルになったりファイルが作成されないかも)

$ cat hash1.txt | openssl sha256 -binary | openssl base64
lpEdviF1nW++20sB72uy8WJPj9AfL8JDneneL6N1etU=     ←これが求められたhash

先の例と同様に求めたhashの文字列の前に「sha256-」を付けて全体の前後に「'」を付ける。
'sha256-lpEdviF1nW++20sB72uy8WJPj9AfL8JDneneL6N1etU='
これで2つめが出来上がり。
実際に使うことが多いのはこちらのやり方かと。

ターミナルとかコマンドラインとか全然しらないし怖くて触りたくないという人向けにオンラインツール https://report-uri.com/home/hash が便利。こちらも<script> と </script> の前後の改行があるなら空行が必要。なのでページの <script> の後の改行と </script> の前の改行なんて付けないのが無難なのかも。

さらにカンタンなのは、(以下)
CSPヘッダを作成する前に仮で次のようなCSPヘッダをウェブサーバで設定する。

Content-Security-Policy: script-src 'strict-dynamic' https: http:;

add_header 'Content-Security-Policy' "script-src 'strict-dynamic' https: http:;";

ウェブサーバに設定を読み込ませてこのCSPヘッダを有効化する。その状態で次。

ブラウザを開く。
重要: 拡張機能は全て無効化するか、シークレットウィンドウでCSPを設定するウェブサイトのページを表示する。Chromeブラウザであれば[F12]を押してデベロッパツールを開き、「コンソール」タブを選択する。
CSPのエラーが表示されるが、親切にもページ内の全てのスクリプトのハッシュが表示されるのでそれをコピーしてCSPヘッダに追加する(全て)

CSPヘッダを作る

1
2
3
4
5
6
7
8

Content-Security-Policy: script-src 'sha256-GAF48QOoxRvu0gZAmQivUdJPyBacqznBAXwnkfpmQX4='
                                    'sha256-lpEdviF1nW++20sB72uy8WJPj9AfL8JDneneL6N1etU='
                                    'strict-dynamic'
                                    'unsafe-inline'
                                    https:
                                    http:;
                         object-src 'none';
                         base-uri 'none';

'strict-dynamic' は付けるのがオススメ。これがあることで許可したスクリプト(今回ハッシュを求めたスクリプト)から別のスクリプトが呼ばれる場合にそのスクリプトを追加する必要がないのでカンタン。逆に、つけないとAdSenseなどの外部の広告サービスを使用する場合にCSPの許可リストが破綻するかも。(クリック広告サービスではAdSenseは実はマシな方。)
'unsafe-inline' は古いブラウザのために付けておく。CSP2,CSP3を理解するブラウザはこの指定を無視するので大丈夫。(デベロッパツールには警告として出るが害はない) むしろ、最近のPageSpeed Insightsでは'unsafe-inline'無しにしてると互換性のために'unsafe-inline'を付けろと言ってくるくらい。
出来たら1行にしてウェブサーバの設定に加える。

add_header 'Content-Security-Policy' "script-src 'sha256-vD3/JXDdBKKMffxw2mAt10e7VpBqnfXak1o+9jzbxgs=' 'sha256-lpEdviF1nW++20sB72uy8WJPj9AfL8JDneneL6N1etU=' 'strict-dynamic' 'unsafe-inline' https: http:;object-src 'none';base-uri 'none';";

前回書いたが、CSP2では外部スクリプトをハッシュで許可するのはできなくて、CSP3ではそれができるけどブラウザの対応がまだ不安なので採用には躊躇する？また、外部スクリプトをハッシュで許可というのはその外部スクリプトに変更が加えられると許可が外れてしまうので怖い。バージョン毎に違うURLで提供されるようなライブラリなら大丈夫だろうけど。
この2つの問題に対応するために、外部スクリプトを内部スクリプト(動的スクリプト)にして読み込むのが「がとらぼ」の中の人としてはお薦めの方法。(以下)

例えば外部スクリプトの https://orange.example.com/banana.js を利用したいとする。
普通であれば <script src="https://orange.example.com/banana.js"></script> のようになる。

これを内部スクリプトから読むようにする。

1
2
3
4
5

<script>
var scr = document.createElement("script");
scr.src = "https://orange.example.com/banana.js";
document.head.appendChild(scr);
</script>

AdSenseのコードにハッシュを付けて許可する

1

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000" crossorigin="anonymous"></script>

これは外部スクリプトなのでハッシュを付けられない。(CSP3の外部スクリプトのハッシュ対応ブラウザを除く)
そこで動的スクリプトに変形してハッシュ対応にする。

1
2
3
4
5
6

<script>
var scr = document.createElement("script");
scr.src = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000";
scr.crossorigin = 'anonymous';
document.head.appendChild(scr);
</script>

動的スクリプトは最初から非同期なのでasync不要。この例では最後のappendChild()はGoogleさんのドキュメントどおりにdocument.head(HTMLヘッダ <head>〜</head>)の子要素として付けているが、HTMLボディ(<body>〜</body>)の子要素にしたければdocument.bodyにする。個人的にはHTMLヘッダにスクリプトを置くのが嫌いなのでbody派です。

このように変換するならついでにAdSenseの遅延表示を導入するのもアリです。遅延表示させるために動的スクリプトにするのでそれからハッシュを求めてやれば良いことになります。AdSenseの遅延表示についてはググってください。

AdSenseの個別の広告ユニットでは以下のようなコードを使います。この内、Javascriptは最後の3行です。&;tscript&gtlの次の改行とスクリプト行の行頭のスペース、スクリプト行の最後に改行があるのでお忘れなく。

<ins class="adsbygoogle"
	style="display:block"
	data-ad-client="ca-pub-0000000000000000"
	data-ad-slot="0000000000"
	data-ad-format="auto"
	data-full-width-responsive="true"></ins>
<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
</script>

同様にハッシュを求めてCSPヘッダに追加します。広告ユニットが複数あって広告ユニットの種類が違ったとしてもJavascript部分は同じ筈なので1つハッシュを作るだけです。
なので、AdSenseに限れば基本的にはpagead2.googlesyndication.com/pagead/js/adsbygoogle.jsを読み込むスクリプトと広告ユニットの「(adsbygoogle = window.adsbygoogle || []).push({});」の2つのハッシュだけで済むということです。CSP1の個別許可だとAdSense用だけでも多くのホストを許可しなくてはならないのが2つだけというのは素晴らしく気分が良いというものです。

Google Analyticsのコードを動的スクリプトにしてハッシュを付ける

1
2
3
4
5
6
7
8

<script async src="https://www.googletagmanager.com/gtag/js?id=G-0000000000"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0000000000');
</script>

<?php
        header("Content-Security-Policy: script-src 'sha256-GAF48QOoxRvu0gZAmQivUdJPyBacqznBAXwnkfpmQX4=' 'sha256-lpEdviF1nW++20sB72uy8WJPj9AfL8JDneneL6N1etU=' 'sha256-BYZOgvpTTjvdOWhTv/ssZ9j0ujjYZVRqiMDllmV8ZlQ=' 'sha256-ZbBokixf9ZfhHkdE8RY5euZnQTEGGYGODZhRpq917sM=' 'strict-dynamic' https: http:;");
?>

1
2
3
4
5
6
7
8

function response_header_insert() {
    if($response_headers = get_post_meta(get_the_ID(), 'response_header', false)){
        foreach($response_headers as $header_code){
            @header( $header_code );
        }
    }
}
add_action( 'send_headers', 'response_header_insert', 10, 0 );

<meta http-equiv="Content-Security-Policy" content="文字列">