Для политики style-src можно разрешить один или несколько источников:

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

<source> может быть любым из значений, указанных в Значения источников CSP.

Обратите внимание, что этот же набор значений можно использовать во всех директивах fetch (и в ряде других директив).

Учитывая заголовок 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 url("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 или источник хеша, соответствующий встроенному блоку.

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

Вышеуказанная политика безопасности контента разрешит встроенные стили, такие как элемент <style>, и атрибут style любого элемента:

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

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

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

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>

Выражение источника 'unsafe-eval' контролирует несколько методов стилей, которые создают декларации стилей из строк. Если 'unsafe-eval' не указан с директивой style-src, следующие методы будут заблокированы и не будут иметь никакого эффекта:

• CSSStyleSheet.insertRule()
• CSSGroupingRule.insertRule()
• CSSStyleDeclaration.cssText

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