インラインスタイルのあるページにCSPを追加する必要があります。また、_unsafe-inline
_の使用を避けるために、ハッシュを使用しています。ハッシュを追加するための私のテクニックは、Chromeでページをロードし、エラーメッセージを表示して、提案されたすべてのハッシュをコピーすることです(たとえば、Refused to apply inline style because it violates the following Content Security Policy directive: "style-src ...". Either the 'unsafe-inline' keyword, a hash ('<suggested hash>'), or... is required to enable inline execution.
から_<suggested hash>
_を取得します)。
これにより、Firefoxの問題は修正されましたが、Chromeでは修正されませんでした。奇妙なことに、Chromeは、それ自体が生成したハッシュを尊重していないように見えます。これは、Chromeがハッシュを含むポリシーをリストするというおかしい状況につながります。 、それは準拠していないと言い、次に、直前に印刷したポリシーに含まれていたハッシュを追加することをお勧めします。
私の方針:
_default-src 'none'; font-src 'self' data:; img-src 'self'; script-src 'self' 'report-sample'; style-src 'self' 'sha256-/3kWSXHts8LrwfemLzY9W0tOv5I4eLIhrf0pT8cU0WI=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o=' 'sha256-fviu5RwuBYFcCd5CDanhy6NCLufcwvCAbm061aSqhoQ=' 'sha256-wS7xf+bhXBr5EM064hQkAW0vX3ks5VoxbGn+KQC/Vhk=' 'sha256-cxL35Ug49Sl1zHMOdz/r0xinQ6BYGgClHdDCk2XPTzE='; object-src 'self'; connect-src 'self'
_
これにより、次のような多数のエラーが発生します。
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'sha256-/3kWSXHts8LrwfemLzY9W0tOv5I4eLIhrf0pT8cU0WI=' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-OTeu7NEHDo6qutIWo0F2TmYrDhsKWCzrUgGoxxHGJ8o=' 'sha256-fviu5RwuBYFcCd5CDanhy6NCLufcwvCAbm061aSqhoQ=' 'sha256-wS7xf+bhXBr5EM064hQkAW0vX3ks5VoxbGn+KQC/Vhk=' 'sha256-cxL35Ug49Sl1zHMOdz/r0xinQ6BYGgClHdDCk2XPTzE='". Either the 'unsafe-inline' keyword, a hash ('sha256-/3kWSXHts8LrwfemLzY9W0tOv5I4eLIhrf0pT8cU0WI='), or a nonce ('nonce-...') is required to enable inline execution.
ここでChromeは、ポリシーにすでに存在するハッシュを追加することをお勧めします。
おそらく、Chrome固有の落とし穴がいくつかあります。それが何であるかについてのアイデアはありますか?
(インライン<style>
要素ではなく)スタイル属性にインラインスタイルがあると思います。 CSP仕様 によると、ハッシュはインライン<style>
要素にのみ適用され、スタイル属性には適用されません。
Chromeはスタイル属性について非常に紛らわしいエラーメッセージを表示しますが、実際には仕様に準拠しています(Firefoxなどの他のブラウザやIEは対応していません) 。ChromeのCSPでハッシュコードを使用してインラインスタイルの属性を許可することはできません。絶対に許可する必要がある場合は、'unsafe-inline'
を使用する必要があります。
CSP 3.0仕様には、['unsafe-hashed-attributes'][2]
を使用して、ハッシュコードをスタイル属性に拡張する機能が含まれる可能性があります。ただし、この機能はまだ「作業中」の状態であり、Chromeにはまだ実装されていないようです。
例:
<?php
header("Content-Security-Policy: style-src 'self' 'sha256-U/AHSCAVB2ZhU2+kPeMhPfZyIE2wH4fhQ0ZtYjq9/JA=' 'sha256-l8V8xXSfpuv7xbN4e0tIS0v77DG2xfSC1rSpNZak/K8='");
header("Content-Type: text/html");
?>
<!DOCTYPE html>
<html>
<head>
<!-- Inline style - 'sha256-U/AHSCAVB2ZhU2+kPeMhPfZyIE2wH4fhQ0ZtYjq9/JA=' -->
<style>.redtext {color: red;}</style>
</head>
<body>
<div class="redtext">This should be red - style from <style> element.</div>
<!-- Inline style in attribute - 'sha256-l8V8xXSfpuv7xbN4e0tIS0v77DG2xfSC1rSpNZak/K8=' -->
<div style = "color: green;">This should not be green - style from attribute should be disallowed even though its hash is included in style-src in CSP.</div>
</body>
</html>