3つのポイントを押さえて、Chrome 機能拡張のセキュリティを高めよう

「Chrome機能拡張の解説」第3弾。

このページではGoogle Chromeの機能拡張のバージョン2になってから導入されたCSP（コンテンツセキュリティポリシー）について解説します。

セキュリティの話しは複雑なものが多く、手っ取り早く機能拡張を作りたいと思うと読み飛ばしてしまいたくなります。しかし、CSPを理解せずに作成すると、思わぬ落とし穴にはまることがあるので、1度ざっくりと把握しておいてください。

Content Security Policy（CSP）の公式ドキュメント

CSPの詳細について知りたい方は「W3Cの公式ドキュメント」をご覧ください

W3Cの解説を見て分かる通り、非常に面倒だということが理解していただけたと思いますｗ

CSPを簡単に解説するとXSS（クロスサイトスクリプティング）や、成りすましなどを防ぐための基本的なセキュリティ対策です。

一つ一つのコードにまで掘り下げると非常にややこしいですが、対策自体はそれほど難しくありません。

目次

• リソースの読み込み元をマニフェストファイルに明示する
• 外部から渡されたコードを実行するような記述をしない
• インラインでJavaScriptを記述しない

リソースの読み込み元をマニフェストファイルに明示する

Ajaxなどを利用して外部のリソースと通信をする場合は、マニフェストファイルでリソース元を明示します。
Chrome 機能拡張のデフォルトポリシーは以下のようになっています。

"content_security_policy": "script-src 'self'; object-src 'self'",

ちょっと分かりにくいですが、以下の2つが指定されています。

外部リソースを読み込む方法

script-srcに許可する外部オリジンサーバのURLを指定する。
スペース区切りで指定します。

例）google analyticsとの通信をする場合

"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'"

ちなみにワイルドカードを使用することができますが、サブドメインまでは指定する必要があります。
これは許可しない「https://*.cloudfront.net」
これは許可される「https://*.xxx.cloudfront.net」

ローカルでのテスト用にはhttp://127.0.0.1やhttp://localhostが使えます。

もちろんサーバ側でもXHRを行うためにAccess-Control-Allow-Originヘッダを追加する必要があります。httpサーバの種類によって記述方法が異なるため、サイトに合わせた方法で設定してください。

例）Chromeの機能拡張用にAccess-Control-Allow-Originを追加する

Access-Control-Allow-Origin:chrome-extension://demfpfnomlcdbjdpiojdglkfncbdbemk

chrome-extension://の後にあるランダムな英数字の部分はChrome側で自動で付けられる機能拡張のID。こちらは「*（アスタリスク）」等のワイルドカードは使えないので注意。

外部から渡されたコードを実行するような記述をしない

与えられたコードを評価（実行）するような、eval()等を使わない。

具体的には以下の様なコード。

alert(eval("foo.bar.baz"));
window.setTimeout("alert('hi')", 10);
window.setInterval("alert('hi')", 10);
new Function("return foo.bar.baz");

対策

同じように書くには以下のように直す必要がある。

alert(foo && foo.bar && foo.bar.baz);
window.setTimeout(function() { alert('hi'); }, 10);
window.setInterval(function() { alert('hi'); }, 10);
function() { return foo && foo.bar && foo.bar.baz };

インラインでJavaScriptを記述しない

これは既に紹介しましたが、html内にスクリプトを記述することは禁止。
具体的には以下の様なコード。

html内で以下のようなインラインコードは記述する。

<script type="text/javascript">hoge</script>

htmlとJavaScriptを併記する。

<button onclick="clickHandler(this)">

対策

JavaScriptは外部ファイルとして読み込む。

実際に作成する際に気をつけるのは以上の3点だけです。
コンテンツセキュリティポリシーというと難しそうですが、実際は簡単ですね。

次の投稿では「バックグラウンドページ」について解説します。