Директива Content-Security-Policy (CSP) для HTTP style-src задаёт допустимые источники таблиц стилей.

Синтаксис

Content-Security-Policy: style-src 'none';
Content-Security-Policy: style-src <source-expression-list>;

Эта директива может принимать одно из следующих значений:

'none'

Ресурсы этого типа загружать нельзя. Одинарные кавычки обязательны.

<source-expression-list>

Список значений выражений источника, разделённых пробелами. Ресурсы этого типа можно загружать, если они соответствуют хотя бы одному из указанных выражений источника. Для этой директивы применимы следующие значения выражений источника:

• <host-source>
• <scheme-source>
• 'self'
• 'unsafe-inline'
• 'unsafe-hashes'
• 'nonce-<nonce_value>'
• '<hash_algorithm>-<hash_value>'
• 'report-sample'

Обратите внимание: спецификация также включает 'unsafe-eval' как допустимое значение выражения источника, чтобы разрешить методы CSSOM, которые анализируют и вставляют строки CSS, включая методы insertRule() и сеттеры cssText в различных интерфейсах, таких как CSSStyleSheet.insertRule() и CSSStyleDeclaration.cssText. Однако в настоящее время ни один браузер не блокирует эти методы, поэтому применять unsafe-eval не требуется.

Примеры

Случаи нарушения

При таком заголовке CSP:

Content-Security-Policy: style-src https://example.com/

следующие таблицы стилей блокируются и не загружаются:

<link href="https://not-example.com/styles/main.css" rel="stylesheet" />

<style>
  #inline-style {
    background: red;
  }
</style>

<style>
  @import "https://not-example.com/styles/print.css" print;
</style>

как и стили, загружаемые с помощью заголовка Link:

Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet

Встроенные атрибуты стилей также блокируются:

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

Как и стили, заданные в JavaScript путём непосредственной установки атрибута style или установки cssText:

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

Однако свойства стилей, заданные непосредственно для свойства style элемента, не блокируются, что позволяет безопасно изменять стили с помощью JavaScript:

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

Такое изменение можно запретить, отключив JavaScript с помощью директивы CSP script-src.

Небезопасные встроенные стили

Чтобы разрешить встроенные стили, можно указать 'unsafe-inline', источник nonce или источник хеша, соответствующий встроенному блоку. Следующая политика безопасности содержимого разрешит встроенные стили, например элемент <style> и атрибут style для любого элемента:

Content-Security-Policy: style-src 'unsafe-inline';

Следующие элемент <style> и атрибут style будут разрешены этой политикой:

<style>
  #inline-style {
    background: red;
  }
</style>

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

Вы можете использовать источник nonce, чтобы разрешить только определённые встроенные блоки стилей. Необходимо сгенерировать случайное значение nonce (с помощью криптографически стойкого генератора случайных токенов) и включить его в политику. Важно учитывать, что это значение nonce нужно генерировать динамически, поскольку оно должно быть уникальным для каждого HTTP-запроса:

Content-Security-Policy: style-src 'nonce-2726c7f26c'

Необходимо задать такое же значение nonce для элемента <style>:

<style nonce="2726c7f26c">
  #inline-style {
    background: red;
  }
</style>

В качестве альтернативы можно создавать хеши встроенных стилей. CSP поддерживает sha256, sha384 и sha512. Двоичную форму хеша необходимо закодировать в base64. Получить хеш строки в командной строке можно с помощью программы openssl:

echo -n "#inline-style { background: red; }" | openssl dgst -sha256 -binary | openssl enc -base64

Вы можете использовать источник хеша, чтобы разрешить только определённые встроенные блоки стилей:

Content-Security-Policy: style-src 'sha256-ozBpjL6dxO8fsS4u6fwG1dFDACYvpNxYeBA6tzR+FY8='

При создании хеша не включайте теги <style> и помните, что регистр символов и пробелы имеют значение, включая начальные и конечные пробелы.

<style>
  #inline-style {
    background: red;
  }
</style>

Спецификации

Совместимость с браузерами

См. также

• Content-Security-Policy
• style-src-elem
• style-src-attr
• Заголовок Link
• <style>, <link>
• @import
• CSSStyleSheet.insertRule()
• CSSGroupingRule.insertRule()
• CSSStyleDeclaration.cssText