Почему CSP script-src unsafe-inline вызывает проблемы со стилем в моем веб-приложении Angular?

Проблема:

Когда я пытаюсь удалить исходный код для CSP, мое веб-приложение Angular больше не работает.

Какова основная причина этой проблемы?

При использовании SCSS в [email protected] +, Angular добавить свойство onloadна index.html:7

<link rel="stylesheet" href="styles.672c1ac3d6da8cc311a2.css" media="print" onload="this.media='all'">

Это приводит к нарушению CSP unsafe-inlineисточник для script-srcзаголовок.

Как исправить эту проблему и удалить это «нарушение безопасности» в моем веб-приложении Angular?

Источник

2 ответа

Решение:

Добавление "inlineCritical": falseк angular.jsonрешил проблему, потому что он отключил критическое встраивание CSS.

          "configurations": {
        "production": {
          "optimization": {
            "styles": {
              "inlineCritical": false
            }
          }
        }
      }

Почему Angular делает это?

Когда браузер отображает страницу, он должен дождаться загрузки и анализа ресурсов CSS. Это может создать (ложное) впечатление, что загрузка вашего приложения медленная и влияет на время первой отрисовки содержимого (FCP).

Обычный способ избежать этого — встроить CSS прямо в HTML, чтобы избежать дополнительного запроса (это то, что рекомендует Lighthouse). Но вы не хотите встраивать весь свой CSS, иначе время загрузки HTML увеличится. Вы просто хотите встроить критически важные ресурсы CSS, те, которые блокируют рендеринг и которые увидит ваш пользователь (вы можете отложить остальную часть CSS).

Angular CLI представляет новую опцию в v11.1, чтобы помочь нам в этом: inlineCSSЗатем CLI будет использовать crittersпод капотом, чтобы извлечь критически важные CSS вашего приложения и встроить их непосредственно в HTML. Бег ng build --prodс приведенной выше конфигурацией производит index.htmlфайл с элементом стиля, содержащим критический извлеченный CSS и обычный styles.xxxxx.cssзагружается асинхронно с использованием:

<link rel="stylesheet" href="styles.3d6bb69e3d075769b349.css" media="print" onload="this.media='all'">

Дополнительные сведения о ключевом слове CSP unsafe-inline: https://content-security-policy.com/unsafe-inline/

Источник

Теперь в Angular 16 у нас есть решение для этой долгожданной функции CSP.

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

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