CSPViolationReportBody: свойство effectiveDirective

Чтение-только свойство effectiveDirective интерфейса CSPViolationReportBody — это строка, представляющая эффективную директиву Политики безопасности содержимого (CSP), которая была нарушена.

Обратите внимание, что здесь содержится конкретная директива, которая была фактически нарушена, например, script-src-elem для нарушений, связанных с элементами script, а не политика, которая была указана, которая могла быть (более общей) default-src.

Значение

Строка, представляющая эффективную Content-Security-Policy директиву, которая была нарушена.

Примеры

Нарушение CSP для встроенного скрипта

Этот пример вызывает нарушение CSP с использованием встроенного скрипта и сообщает о нарушении с помощью ReportingObserver. В частности, он записывает effectiveDirective и originalPolicy, что делает разницу ясной.

HTML

В файле HTML ниже используется элемент <meta> для установки Content-Security-Policy default-src в значение self, что позволяет загружать скрипты и другие ресурсы с того же домена, но не позволяет выполнять встроенные скрипты. В документе также есть встроенный скрипт, который должен вызвать нарушение CSP.

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; report-to csp-endpoint" />
    <meta
      http-equiv="Reporting-Endpoints"
      content="csp-endpoint='https://example.com/csp-reports'" />
    <script src="main.js"></script>
    <title>CSP: Violation due to inline script</title>
  </head>
  <body>
    <h1>CSP: Violation due to inline script</h1>
    <script>
      const int = 4;
    </script>
  </body>
</html>

JavaScript (main.js)

Вышеупомянутый документ также загружает внешний скрипт main.js, который показан ниже. Поскольку он загружается с того же домена, что и HTML, он не блокируется CSP.

Скрипт создает новый ReportingObserver для наблюдения за отчётами о нарушениях содержимого типа "csp-violation". Каждый раз, когда вызывается функция обратного вызова, мы получаем тело первой записи в массиве отчётов и используем его для записи в консоль эффективной директивы и originalPolicy нарушения.

// main.js
const observer = new ReportingObserver(
  (reports, observer) => {
    console.log(`effectiveDirective: ${reports[0].body.effectiveDirective}`);
    // effectiveDirective: script-src-elem
    console.log(`originalPolicy: ${reports[0].body.originalPolicy}`);
    // originalPolicy: default-src 'self'; report-to csp-endpoint
  },
  {
    types: ["csp-violation"],
    buffered: true,
  },
);

observer.observe();

Обратите внимание, что, хотя в возвращаемом массиве может быть несколько отчётов, для краткости мы записываем значения только первого элемента.

Результаты

Вывод консоли для вышеприведенного кода:

effectiveDirective: script-src-elem
originalPolicy: default-src 'self'; report-to csp-endpoint

Обратите внимание, что originalPolicy соответствует <meta> содержимому директивы Content-Security-Policy в HTML и указывает, что политика по умолчанию self (default-src 'self').

effectiveDirective равно script-src-elem, что определяет допустимые источники для элементов JavaScript <script>. Это конкретная директива, которая фактически была нарушена, даже если default-src была установлена в политике.

Спецификации

Спецификация
Политика безопасности содержимого уровня 3 # dom-cspviolationreportbody-effectivedirective

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`effectiveDirective`	74	79	Нет	56	превью	74	Нет	48	Нет	10.0	74

См. также

SecurityPolicyViolationEvent.effectiveDirective

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSPViolationReportBody/effectiveDirective