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-attr は style-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

ブラウザーの互換性

BCD tables only load in the browser

関連情報