最近のバージョンの Chrome (46+) では、以前に受け入れられた回答は当てはまりません。unsafe-inlineまだ効果はありません (マニフェストおよびヘッダー タグ内) が、ドキュメントmetaに従って、ここで説明されている手法を使用して制限を緩和できます。
<script>要素のハッシュの使用
このscript-srcディレクティブを使用すると、開発者は特定のインライン スクリプトのハッシュを許可されたスクリプトのソースとして指定することで、そのスクリプトをホワイトリストに登録できます。
使い方は簡単です。サーバーは、特定のスクリプト ブロックのコンテンツのハッシュを計算し、その値の base64 エンコードをContent-Security-Policyヘッダーに含めます。
Content-Security-Policy: default-src 'self';
script-src 'self' https://example.com 'sha256-base64 encoded hash'
例
次の点を考慮してください。
manifest.json :
{
"manifest_version": 2,
"name": "csp test",
"version": "1.0.0",
"minimum_chrome_version": "46",
"content_security_policy": "script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='",
"background": {
"page": "background.html"
}
}
background.html :
<!DOCTYPE html>
<html>
<head></head>
<body>
<script>alert('foo');</script>
</body>
</html>
結果:
さらなる調査
metaマニフェストの代わりに、該当するディレクティブをタグに入れることもテストしました。コンソール メッセージに示されている CSP にはタグのコンテンツが含まれていましたが、インライン スクリプトは実行されませんでした (Chrome 53)。
新しいbackground.html :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'sha256-WOdSzz11/3cpqOdrm89LBL2UPwEU9EhbDtMy2OciEhs='">
</head>
<body>
<script>alert('foo');</script>
</body>
</html>
結果:
付録: ハッシュの生成
ハッシュを生成する 2 つの方法を次に示します。
- Python (JS を stdin に渡し、別の場所にパイプします):
import hashlib
import base64
import sys
def hash(s):
hash = hashlib.sha256(s.encode()).digest()
encoded = base64.b64encode(hash)
return encoded
contents = sys.stdin.read()
print(hash(contents))
- JS では、Stanford Javascript Crypto Libraryを使用します。
var sjcl = require('sjcl');
// Generate base64-encoded SHA256 for given string.
function hash(s) {
var hashed = sjcl.hash.sha256.hash(s);
return sjcl.codec.base64.fromBits(hashed);
}
インライン スクリプトをハッシュするときは、script タグの内容全体が含まれていることを確認してください (すべての先頭/末尾の空白を含む)。これをビルドに組み込みたい場合は、cheerioなどを使用して関連セクションを取得できます。一般に、任意の に対してhtml、次のことができます。
var $ = cheerio.load(html);
var csp_hashes = $('script')
.map((i, el) => hash($(el).text())
.toArray()
.map(h => `'sha256-${h}'`)
.join(' ');
var content_security_policy = `script-src 'self' 'unsafe-eval' ${csp_hashes}; object-src 'self'`;
これは、ハッシュを生成するための gulp プラグインであるhash-cspで使用されるメソッドです。
![「[拡張機能ディレクトリ]」から拡張機能を読み込めませんでした。 「content_security_policy」の値が無効です。](https://i.stack.imgur.com/xguv2.png)