Улучшить эту документацию Просмотреть исходный код ngCsp

директива в модуле ng

Обзор

В AngularJS есть некоторые функции, которые могут конфликтовать с определёнными ограничениями, применяемыми при использовании правил CSP (Content Security Policy).

Если вы планируете реализовать CSP с этими правилами, то вы должны сообщить AngularJS, чтобы он не использовал эти функции.

Это необходимо при разработке таких вещей, как расширения Google Chrome или универсальные приложения Windows.

Следующие стандартные правила CSP влияют на AngularJS:

Использование eval(), Function(string) и аналогичных функций для динамического создания и выполнения кода из строк запрещено. AngularJS использует это в службе $parse для повышения скорости вычисления выражений AngularJS на 30%. (Это правило CSP можно отключить с помощью ключевого слова CSP unsafe-eval, но это не рекомендуется, так как это ослабит защиту, предлагаемую CSP.)
Использование встроенных ресурсов, таких как встроенные <script> и <style> элементы, запрещены. Это предотвращает встраивание пользовательских стилей непосредственно в документ. AngularJS использует это для включения некоторых правил CSS (например, ngCloak и ngHide). Чтобы эти директивы работали при блокировке правил CSP встроенных стилей, необходимо вручную связать angular-csp.css в вашем HTML. (Это правило CSP можно отключить с помощью ключевого слова CSP unsafe-inline, но это не рекомендуется, так как это ослабит защиту, предлагаемую CSP.)

Если вы не предоставите ngCsp, то AngularJS попытается автоматически определить, блокирует ли CSP динамическое создание кода из строк (например, unsafe-eval не указано в заголовке CSP) и автоматически отключит эту функцию в службе $parse. Однако эта автоматическая проверка приводит к записи ошибки CSP в консоль:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of
script in the following Content Security Policy directive: "default-src 'self'". Note that
'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Эта ошибка не вредит, но раздражает. Чтобы предотвратить отображение ошибки, поместите директиву ngCsp на элемент HTML документа, который появляется до тега <script>, загружающего файл angular.js.

Примечание: эта директива доступна только в форме атрибутов ng-csp и data-ng-csp.

Вы можете указать, какие функции AngularJS, связанные с CSP, следует отключить, указав значение для атрибута ng-csp. Варианты следующие:

no-inline-style: это останавливает AngularJS от вставки CSS-стилей в DOM
no-unsafe-eval: это останавливает AngularJS от оптимизации $parse с помощью небезопасного eval строк

Вы можете использовать эти значения в следующих комбинациях:

Отсутствие объявления означает, что AngularJS предположит, что вы можете использовать встроенные стили, но проведет проверку во время выполнения на небезопасные eval. Например, <body>. Это обратно совместимо с предыдущими версиями AngularJS.
Простой атрибут ng-csp (или data-ng-csp) сообщит AngularJS о необходимости отключения как встроенных стилей, так и небезопасного eval. Например, <body ng-csp>. Это обратно совместимо с предыдущими версиями AngularJS.
Указание только no-unsafe-eval указывает AngularJS, что нельзя использовать eval, но можно вставлять встроенные стили. Например, <body ng-csp="no-unsafe-eval">.
Указание только no-inline-style указывает AngularJS, что нельзя вставлять стили, но можно использовать eval — автоматическая проверка небезопасного eval не будет происходить. Например, <body ng-csp="no-inline-style">
Указание и no-unsafe-eval, и no-inline-style указывает AngularJS, что нельзя вставлять стили и использовать eval, что эквивалентно пустому атрибуту ng-csp. Например, <body ng-csp="no-inline-style;no-unsafe-eval">

Информация о директиве

Эта директива выполняется на уровне приоритета 0.

Использование

как атрибут:
```
<ANY
  ng-csp>
...
</ANY>
```

Пример

В этом примере показано, как применить директиву ngCsp к тегу html.

<!doctype html>
<html ng-app ng-csp>
...
...
</html>

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/ngCsp