CSP: style-src-attr

HTTP の Content-Security-Policy (CSP) における style-src-attr ディレクティブは、個々の DOM 要素に適用されるインラインスタイルのための有効なソースを指定します。

このディレクティブは、<style> 要素、および rel="stylesheet" を持つ <link> 要素に有効なソースを設定しません。 これらは、style-src-elem を使用して設定されます(そして、すべてのスタイルのための有効なソースは、style-src で設定することができます)。

CSP バージョン 3
ディレクティブ種別 フェッチディレクティブ
フォールバック

あり。 このディレクティブがない場合、ユーザーエージェントは style-src を探し、両方ともなかった場合は、default-src で代替されます。

構文

style-src-attr ポリシーでは、 1 つ以上のソースを許可することができます。

http
Content-Security-Policy: style-src-attr <source>;
Content-Security-Policy: style-src-attr <source> <source>;

style-src-attrstyle-src との組み合わせで使用することができます。

http
Content-Security-Policy: style-src <source>;
Content-Security-Policy: style-src-attr <source>;

ソース

<source> には、CSP ソース値 に掲載されている値のいずれかが使用できます。

この同じ値の集合は、すべてのフェッチディレクティブ(と 他の多くのディレクティブ)で使用できるということに注意してください。

違反している場合

この CSP ヘッダーがあったとします。

http
Content-Security-Policy: style-src-attr 'none'

…要素へ適用されたインラインスタイルは適用されません。

html
<div style="display:none">Foo</div>

このポリシーは、style 属性を直接設定したり、cssText を設定することによって JavaScript で適用されるスタイルもブロックすることになります。

js
document.querySelector("div").setAttribute("style", "display:none;");
document.querySelector("div").style.cssText = "display:none;";

要素の style プロパティに直接設定されたスタイルプロパティはブロックされないので、ユーザーは JavaScript で安全にスタイルを操作できるようになります。

js
document.querySelector("div").style.display = "none";

JavaScript を使用すると、CSP の script-src ディレクティブを使用して独自にブロックされる可能性があることに注意してください。

仕様書

Specification
Content Security Policy Level 3
# directive-style-src-attr

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
style-src-attr

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報