CSPViolationReportBody: свойство blockedURL

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

Значение

Строка, содержащая значение или URL, представляющий ресурс, нарушивший политику.

Если значение не является URL-адресом ресурса, оно должно быть одной из следующих строк:

inline: Встроенный ресурс. Например, встроенный скрипт, который был использован, когда 'unsafe-inline' не был указан в CSP.
eval: eval(). Например, eval() был использован, но 'unsafe-eval' не был указан в CSP.
wasm-eval: Вычисление Wasm. Например, eval() был использован, но 'wasm-unsafe-eval' не был указан в CSP.
trusted-types-policy: Ресурс, нарушивший директиву CSP trusted-types. Например, TrustedTypePolicy был создан с помощью window.trustedTypes.createPolicy() с именем, которое не было указано в директиве CSP trusted-types.
trusted-types-sink: Ресурс, нарушивший директиву CSP require-trusted-types-for. Например, директива была установлена в script, но документ не использовал TrustedTypePolicy для очистки данных перед передачей их в узел, такой как Element.innerHTML.

Примеры

Следующие примеры показывают HTML, который приведет к некоторым из blockedURL значений, описанных выше.

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

const observer = new ReportingObserver(
  (reports, observer) => {
    console.log(`blockedURL: ${reports[0].body.blockedURL}`);
  },
  {
    types: ["csp-violation"],
    buffered: true,
  },
);

observer.observe();

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

blockedURL для внешнего ресурса

В приведенном ниже HTML задается политика Content-Security-Policy: default-src 'self', которая разрешает загрузку только ресурсов с того же сайта, а затем пытается загрузить скрипт с внешнего сайта https://apis.google.com.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    <script src="main.js"></script>
  </head>
  <body>
    <!-- This should generate a CSP violation -->
    <script src="https://apis.google.com/js/platform.js"></script>
  </body>
</html>

Результатом вывода blockedURL будет:

blockedURL: https://apis.google.com/js/platform.js

blockedURL для ресурсов unsafe-inline

HTML ниже демонстрирует условия, которые приведут к blockedURL inline. Он устанавливает политику Content-Security-Policy: default-src 'self', которая не разрешает выполнение встроенных скриптов, что вызывает нарушение, так как страница содержит встроенный скрипт.

<!doctype html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
    <script src="main.js"></script>
  </head>
  <body>
    <script>
      const int = 4;
    </script>
  </body>
</html>

Результатом вывода blockedURL будет:

blockedURL: inline

blockedURL для ресурсов trusted-types-policy

HTML ниже демонстрирует условия, которые приведут к blockedURL trusted-types-policy. Сначала он определяет политику, которая разрешает выполнение 'unsafe-inline' скриптов, чтобы мы могли создать TrustedTypePolicy, который вызовет нарушение. Политика также использует директиву trusted-types для указания того, что разрешено создание TrustedTypePolicy с именем myPolicy.

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'report-sample' 'unsafe-inline'; trusted-types myPolicy" />
    <script src="main.js"></script>
  </head>

  <body></body>

  <script>
    const policy = trustedTypes.createPolicy("somePolicy", {
      createHTML: (string) => {
        // Some (insufficient) sanitization code
        return string.replace(/</g, "&lt;");
      },
    });
  </script>
</html>

В скрипте создается политика с именем somePolicy.

Примечание: Определенная выше политика не является хорошей политикой. Цель использования trusted types — не навязывать конкретную политику, а потребовать соблюдения какой-либо политики и обеспечить, чтобы код очистки находился в одном месте и был легко проверяем.

Так как это не указано в директиве trusted-types , это нарушение CSP, и мы увидим вывод лога:

blockedURL: trusted-types-policy

Если мы изменим имя разрешенной политики на somePolicy, страница больше не будет нарушать политику.

blockedURL для ресурсов trusted-types-sink

HTML ниже демонстрирует условия, которые приведут к blockedURL trusted-types-sink. Сначала он определяет политику, которая разрешает выполнение 'unsafe-inline' скриптов, и, как и в предыдущем примере, он использует директиву trusted-types для указания того, что разрешено создание TrustedTypePolicy с именем myPolicy.

Кроме того, он указывает директиву require-trusted-types-for 'script', которая требует, чтобы узлам передавался только отфильтрованный контент с использованием надежного типа.

<!doctype html>
<html lang="en">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self' 'report-sample' 'unsafe-inline'; trusted-types 'myPolicy'; require-trusted-types-for 'script'" />
    <script src="main.js"></script>
  </head>
  <body>
    <input type="text" id="userInput" />
    <button onclick="updateContent()">Update Content</button>
    <div id="content"></div>
  </body>

  <script>
    function updateContent() {
      const userInput = document.getElementById("userInput").value;

      // Passing unsanitized content - a violation of the policy
      document.getElementById("content").innerHTML = userInput;
    }
  </script>
</html>

Метод updateContent() передает неотфильтрованный контент в свойство innerHTML элемента, что приведет к нарушению CSP. Мы увидим вывод лога:

blockedURL: trusted-types-sink

Чтобы избежать нарушения, нам нужно обновить скрипт для определения политики надежного типа и использования её для очистки входных данных, передаваемых элементу:

const policy = trustedTypes.createPolicy("myPolicy", {
  createHTML: (string) => {
    // Some (insufficient) sanitization code
    return string.replace(/</g, "&lt;");
  },
});

function updateContent() {
  const userInput = document.getElementById("userInput").value;
  const sanitizedInput = policy.createHTML(userInput);
  document.getElementById("content").innerHTML = sanitizedInput;
}

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

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

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

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

См. также

SecurityPolicyViolationEvent.blockedURI

© 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/blockedURL