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


投稿日:2015年7月8日
  • 6
  • 0


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機能拡張のイベントページについて

おすすめの記事

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wix 

Web制作の自由度をフレームワークレベルまで高めたCorvid by Wi…

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法

Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集…

Excelでセルとセルの間をダブルクリックすると移動する機能を停止する方法

Excelでセルとセルの間をダブルクリックすると移動する機能を停…

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集ソフト

プロ根性のあるデザイナーやブロガーにお勧めする4つの画像編集…

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Adsenseで配信される詐欺的なサイトのブロック用URLまとめ

Google Fontsの日本語フォント「Noto Fonts」の使い方

Google Fontsの日本語フォント「Noto Fonts」の使い方

Norikraの使い方をサンプルのクエリとイベントを交えて解説

Norikraの使い方をサンプルのクエリとイベントを交えて解説

fluentdと連動して集計処理を行うNorikraの導入方法

fluentdと連動して集計処理を行うNorikraの導入方法

Linuxの基本の基本。Linuxの基本的なディレクトリ構成

Linuxの基本の基本。Linuxの基本的なディレクトリ構成


いただいたコメントなど

  1. 匿名 のコメント:

    「サブドメインまでは指定する必要があります。」と書かれていますが、「ドメインまでは指定する必要があります。」の間違いかと思います。

    • oxy のコメント:

      分かりづらくてすみません。
      ドメインは必須で、サブドメインがある場合はサブドメインまで必須。それ以上は任意。という意味です。

コメントを残す

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

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