Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について


投稿日:2015年7月8日
  • 3
  • 14



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

google_extention_3

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

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

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

Content Security Policy(CSP)の公式ドキュメント

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

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

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

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


目次


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

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

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

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

script-src ‘self’ 外部オリジンの全てのスクリプトを拒否
object-src ‘self’ 外部オリジンの全てのオブジェクト(画像など)を拒否

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

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.1http://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点だけです。
コンテンツセキュリティポリシーというと難しそうですが、実際は簡単ですね。

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



現在のページを共有する



現在のページに関連する記事

Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について Chrome機能拡張とGoogle Analyticsを組み合わせて利用状況を把握する
Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について Chromeの機能拡張を作成して、ブラウザで読み込み、デバックする方法
Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について 初めてでも理解できるようになる「Google Chrome機能拡張の開発」
Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について Chrome機能拡張のコンテンツスクリプトについて
PukiwikiでGoogle Analyticsを使う PukiwikiでGoogle Analyticsを使う
Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について jQueryでクロスサイトのiframe広告のクリックをカウントする方法
Chrome機能拡張のコンテンツセキュリティポリシー(CSP)について Chrome機能拡張のイベントページについて

おすすめの記事

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

ClamAVとClamSMTPを利用してPostfixのメールをウイルスチェック

誤って削除したGoogle Chromeのブックマークを復元する方法

誤って削除したGoogle Chromeのブックマークを復元する方法

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

DNS Amp攻撃の解説と、踏み台にされないためのBIND DNSの設定

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でpsd形式のファイルをサムネイル表示する方法

Windows 10でネットワークが不安定になった際の対策まとめ

Windows 10でネットワークが不安定になった際の対策まとめ

作業効率を飛躍的に向上させる!実務で使うIllustratorのショートカット一覧

作業効率を飛躍的に向上させる!実務で使うIllustratorのショー…

ImageMagickをWindowsのXAMPPに導入する方法

ImageMagickをWindowsのXAMPPに導入する方法

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更

WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデ…


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください