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

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

Обзор

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

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

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

Следующие стандартные правила 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 с помощью небезопасной оценки строк

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

Отсутствие объявления означает, что AngularJS предположит, что вы можете использовать встроенные стили, но выполнит проверку на безопасность unsafe-eval во время выполнения. Например, <body>. Это обратно совместимо с предыдущими версиями AngularJS.
Простой атрибут ng-csp (или data-ng-csp) укажет AngularJS на отключение как встроенных стилей, так и unsafe-eval. Например, <body ng-csp>. Это обратно совместимо с предыдущими версиями AngularJS.
Указание только no-unsafe-eval указывает AngularJS, что нельзя использовать eval, но можно вставлять встроенные стили. Например, <body ng-csp="no-unsafe-eval">.
Указание только no-inline-style указывает AngularJS, что нельзя вставлять стили, но можно использовать eval — автоматическая проверка на unsafe-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–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.6.9/docs/api/ng/directive/ngCsp