Политика безопасности контента блокирует угловые стили

Я хочу опубликовать веб-приложение со строгой политикой безопасности контента. Последняя оставшаяся проблема: style-src 'self';

Я получаю сообщение об ошибке в консоли браузера о том, что загрузка ресурса заблокирована на основании директивы style-src в CSP. Ошибка ссылается на код в файле main..js, созданном из ng build --prod.

Если я добавлю 'unsafe-inline' к style-src в CSP, все работает нормально, но я не хочу этого делать.

Могу ли я что-нибудь сделать в своем коде или варианте сборки, чтобы веб-приложение работало с более строгим CSP?

Я использовал Angular 11, только что обновился до 12 и получил ту же ошибку.

Спасибо!

Источник

3 ответа

Варианты разрешения:

1. Используйте хеши SHA-256.

Если таких нарушений относительно мало, можно добавить их хеши. Например, если вы видите это в своем журнале:

      Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'report-sample'". Either the 'unsafe-inline' keyword, a hash ('sha256-YpcdPia2p132TdnpnY8zwrWWSqByEKGZBY5iqsLBkSg='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

Добавлять 'sha256-YpcdPia2p132TdnpnY8zwrWWSqByEKGZBY5iqsLBkSg=' Вам также может понадобиться 'unsafe-hashes'- в зависимости от контекста. Примечание: этот подход нелегко поддерживать. Небольшое изменение стиля заставит вас воссоздать хеш. Это полезно только тогда, когда у вас есть несколько таких встроенных скриптов.

2. Одноразовые номера

Вы можете использовать одноразовые номера для «благословения» встроенных стилей и их утверждения. Однако даже эксперты Google, которые выступают за одноразовые номера CSP , обычно не развертывают их - только на. Примечание. Этот подход сложно внедрить. Для каждой загрузки страницы необходимо создавать уникальный одноразовый номер.

3. Используйте 'unsafe-inline' - подходит для (не подходит для script-src)

На самом деле, даже установка CSP с style-src 'unsafe-inline' 'self' someurl.com;намного безопаснее 99,9% сайтов. Больше, чем accounts.google.com , который не ограничивает style-srcвообще. У Github есть фантастически качественный CSP с style-src: 'unsafe-inline'

Удачи!

Источник

Если я добавлю 'unsafe-inline' к style-src в CSP, все работает нормально, но я не хочу этого делать.

Похоже, сейчас это невозможно. Согласно потоку поддержки Angular на Github, для приложений Angular требуется разрешение 'unsafe-inline' в style-src (см. «Предлагаемые шаги» 1. «Мы должны четко заявить, что разрешение 'unsafe-inline' в style- src требуется для приложений Angular. ").

Источник

Обновление для Angular 16: теперь вы можете предоставить токен CSP_NONCE, и он будет применять этот nonce к любому CSS, добавленному Angular. Одноразовый номер просто должен совпадать с номером, указанным в вашей Политике безопасности контента.

      bootstrapApplication(AppComponent, {
  providers: [{
    provide: CSP_NONCE,
    useValue: globalThis.myRandomNonceValue
  }]
});

https://angular.io/guide/security#content-security-policy

Источник
Другие вопросы по тегам