Как решить "нарушить директиву CSP:" default-sr c 'self' "в Angular 8? - PullRequest
Новая
       39

Как решить "нарушить директиву CSP:" default-sr c 'self' "в Angular 8?

0 голосов
/ 20 апреля 2020

На сервере клиента развернуто одностраничное веб-приложение Angular 8. Они устанавливают одну из директив CSP: default-sr c 'self'. Мы создаем приложение Angular, используя ng build --prod, как и любые другие Angular приложения. После развертывания мы получаем эту ошибку: 

main-es2015.47b2dcf92b39651610c0.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

Посмотрите код html в браузере, я вижу что-то вроде этого:

enter image description here

Как видите, Angular фактически использует тег <style> для обслуживания css (пожалуйста, исправьте меня, если я ошибаюсь). Это нарушает директиву CSP, упомянутую в вопросе.

После поиска я думаю, что Angular / React плохо справляется с этой проблемой, эти структуры не созданы с учетом CSP. Вы можете проверить страницу Angular github, для этого есть открытый вопрос. Сейчас я ищу решение для преодоления этого, конечно, изменение политики CSP не вариант, потому что клиенты не хотят.

Как я могу сказать Angular не использовать тег <style> в производстве для обслуживания css? Я думаю, чтобы это работало, нам нужно установить Angular таким образом, чтобы он загружал файлы css, а затем использовать стили в этих файлах вместо введения <style> в html, что вызывает проблему CSP.

Редактировать 1 : Наш проект использует scss.

Редактировать 2 : После поиска я обнаружил, что Angular вставит стили вашего компонента в DOM, используя элемент <style>. Как показано здесь:

enter image description here

Теперь у меня есть идея, потому что стиль каждого компонента будет добавлен в DOM через элемент <style>, мы можем Чтобы этого не происходило, нужно объединить все файлы стиля компонента .scss в один файл style.scss. На изображении выше вы можете видеть, что у нас всегда есть пустой элемент <style>, поэтому, если это сработает, мы получим только один элемент <style> и элемент <link>, которые ссылаются на наш глобальный файл стиля scss. У нас может быть несколько способов удалить этот пустой элемент <style> до того, как страница будет обработана браузером.

Теперь я застрял в настройке собственного веб-пакета, чтобы это произошло. Мы не можем использовать ng eject для получения файла webpack.config.js начиная с Angular CLI 6. Я использую Angular CLI 8, поэтому единственный способ добавить пользовательскую конфигурацию в Webpack - это использовать custom-webpack npm. Я не могу найти хороший файл конфигурации, который имеет тот же вывод, что и мое желание, пожалуйста, помогите, если вы знаете, как настроить веб-пакет для объединения стилей всех компонентов scss в Angular в глобальный scss файл.

1 Ответ

0 голосов
/ 22 апреля 2020

Я думаю, что это может быть приемлемым ответом на мой вопрос:

Прежде всего, я рекомендую держаться подальше от , используя styleUrls. Angular вставит стили вашего компонента в DOM, используя элемент <style>. Во-вторых, если это возможно, вы должны знать / запрашивать политику CSP на сервере / среде развертывания. Что я делал, чтобы решить проблему (мой проект довольно мал, всего с парой дюжин компонентов):

  1. Скопируйте (по одному) относительную ссылку компонентов, поместите их в angular.json, в атрибуте styles. Это связано с тем, что Angular объединит все стили в этом атрибуте в один файл css/scss. Я копирую по одному, потому что файл css/scss был спроектирован для работы с Angular Просмотр инкапсуляции в первую очередь. Объединение их всех в одном месте может привести к неожиданным проблемам, это нарушит пользовательский интерфейс. Всякий раз, когда копируете стиль компонента и помещаете его в styles, я проверяю, не нарушается ли пользовательский интерфейс из-за этого. Это поможет мне сузить причину root, если такая проблема произойдет.

  2. Для каждого компонента, после копирования относительного пути его файла стиля компонента в styles, я удаляю styleUrls в @Component. Это не позволяет Angular вводить <style> в DOM.

Предостережения:

  • Сбор всех стилей в один файл и загрузить их сразу может привести к снижению производительности. К счастью, проект моей компании сравнительно небольшой.
  • Теперь вам нужно документировать новый способ создания стиля в вашем проекте.
...