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

Обзор

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

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

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

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

• Запрещено использование eval(), Function(string) и подобных функций для динамического создания и выполнения кода из строк. AngularJS использует это в службе $parse, чтобы обеспечить на 30% повышение скорости оценки выражений AngularJS. (Это правило 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.

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

• no-inline-style: это останавливает AngularJS от внедрения стилей CSS в DOM

• no-unsafe-eval: это останавливает AngularJS от оптимизации $parse с помощью небезопасного вычисления строк

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

• Отсутствие объявления означает, что AngularJS предположит, что вы можете использовать встроенные стили, но он проведет проверку на безопасность при выполнении. Например, <body>. Это обратно совместимо с предыдущими версиями AngularJS.

• Простой атрибут ng-csp (или data-ng-csp) сообщит AngularJS об отключении как встроенных стилей, так и небезопасного вычисления. Например, <body ng-csp>. Это обратно совместимо с предыдущими версиями AngularJS.

• Указание только no-unsafe-eval сообщает AngularJS, что мы не должны использовать eval, но можем вставлять встроенные стили. Например, <body ng-csp="no-unsafe-eval">.

• Указание только no-inline-style сообщает AngularJS, что мы не должны вставлять стили, но можем запускать 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">

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