CSP応答ヘッダーはWebワーカーJSファイルに設定されますが、ブラウザーによって強制されません。親ドキュメントの応答ヘッダーにCSPヘッダーが含まれている場合にのみ、CSPはWebワーカーで適用されます。これは予想されますか?
index.html
<html>
<head>
<title>Helle</title>
</head>
<body>
<script>
var worker = new Worker('/worker.js');
worker.addEventListener('message', function(e) {
console.log('Worker said: ', e.data);
}, false);
worker.postMessage('getResponse');
</script>
</body>
</html>
worker.js
self.addEventListener('message', function(e) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
self.postMessage("done by worker");
// Typical action to be performed when the document is ready:
console.log(xhttp.responseText);
} else if (this.readyState == 4 && this.status != 200) {
console.log(xhttp.statusText);
self.postMessage("done by worker error");
}
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/todos/1", true);
xhttp.send();
}, false);
応答ヘッダーContent-Security-Policy: connect-src 'self';
はworker.jsファイルで設定されていますが、CSPはまだ強制されておらず、ネットワークタブでAPI呼び出しは成功しています。
1)。はい、この動作は予想されたものです。 (親)フレームにCSPヘッダーが含まれていない場合、子のCSPは適用されません。
2)。さらに、XSSの脆弱性がある場合、攻撃者はCSPを含まないフレームを挿入してもJSを実行できます[上記のステートメントによれば、JSはCSPを含まないフレーム内にあります]。