Trusted Types для захисту DOM · fullstack.org.ua

Просунутий18 хв· Fullstack Team

Trusted Types для захисту DOM

Застосуєте Trusted Types і сувору CSP для блокування небезпечних DOM-ін’єкцій у складних застосунках.

Навіщо потрібні Trusted Types

DOM-ін’єкція виникає тоді, коли дані, контрольовані користувачем або зовнішнім джерелом, потрапляють у небезпечний DOM-sink без належної обробки.

Наприклад:

javascript

const name = new URLSearchParams(location.search).get("name");

message.innerHTML = `<p>Привіт, ${name}</p>`;

javascript

// Небезпечна політика: вона лише створює ілюзію захисту.
const unsafePolicy = trustedTypes.createPolicy("unsafe", {
  createHTML(value) {
    return value;
  }
});

javascript

// Браузер відхилить створення політики, якщо її ім’я
// не входить до списку trusted-types у CSP.
trustedTypes.createPolicy("another-policy", {
  createHTML(value) {
    return value;
  }
});

javascript

const htmlPolicy = trustedTypes.createPolicy("app-html", {
  createHTML(value) {
    const escaped = String(value)
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#39;");

    return escaped;
  }
});

html

<!doctype html>
<html lang="uk">
  <head>
    <meta charset="utf-8">
    <title>Trusted Types</title>
  </head>
  <body>
    <form id="message-form">
      <label>
        Повідомлення
        <input id="message-input" name="message" autocomplete="off">
      </label>
      <button type="submit">Показати</button>
    </form>

    <section aria-live="polite">
      <h2>Результат</h2>
      <div id="message-output"></div>
    </section>

    <script src="/app.js"></script>
  </body>
</html>

javascript

"use strict";

const output = document.querySelector("#message-output");
const form = document.querySelector("#message-form");
const input = document.querySelector("#message-input");

if (!output || !form || !input) {
  throw new Error("Не знайдено необхідні елементи сторінки");
}

if (!window.trustedTypes) {
  throw new Error("Цей застосунок потребує підтримки Trusted Types");
}

const htmlPolicy = trustedTypes.createPolicy("app-html", {
  createHTML(value) {
    const text = String(value);

    // Перетворюємо введення на текст, а не на довільну HTML-розмітку.
    return text
      .replaceAll("&", "&amp;")
      .replaceAll("<", "&lt;")
      .replaceAll(">", "&gt;")
      .replaceAll('"', "&quot;")
      .replaceAll("'", "&#39;")
      .replaceAll("\n", "<br>");
  }
});

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const userInput = input.value.trim();

  // Якщо потрібен лише текст, безпечнішим вибором був би textContent.
  // Тут навмисно показано використання TrustedHTML для HTML-sink.
  const trustedMessage = htmlPolicy.createHTML(userInput);

  output.innerHTML = trustedMessage;
});

javascript

const htmlPolicy = trustedTypes.createPolicy("app-html", {
  createHTML(value) {
    // sanitizeHtml має бути перевіреним HTML-санітайзером
    // із явно визначеним списком дозволених елементів і атрибутів.
    return sanitizeHtml(value, {
      allowedTags: ["p", "strong", "em", "ul", "ol", "li"],
      allowedAttributes: []
    });
  }
});

javascript

const scriptUrlPolicy = trustedTypes.createPolicy("app-script-url", {
  createScriptURL(value) {
    const url = new URL(value, document.baseURI);

    if (url.origin !== window.location.origin) {
      throw new Error("Заборонене джерело скрипта");
    }

    if (!url.pathname.startsWith("/assets/")) {
      throw new Error("Скрипти дозволені лише з /assets/");
    }

    return url.href;
  }
});

const script = document.createElement("script");
script.src = scriptUrlPolicy.createScriptURL("/assets/widget.js");
document.head.append(script);

javascript

trustedTypes.createPolicy("default", {
  createHTML(value, sinkName) {
    console.warn("Неявне перетворення HTML", {
      value,
      sinkName
    });

    return escapeAsHtml(value);
  }
});

javascript

const trustedValue = htmlPolicy.createHTML("<strong>Текст</strong>");

if (!(trustedValue instanceof TrustedHTML)) {
  throw new Error("Політика не створила TrustedHTML");
}

javascript

const scriptUrlPolicy = trustedTypes.createPolicy("app-script-url", {
  createScriptURL(value) {
    const url = new URL(value, document.baseURI);

    if (url.origin !== location.origin) {
      throw new TypeError("Зовнішні скрипти заборонені");
    }

    return url.href;
  }
});

try {
  scriptUrlPolicy.createScriptURL("https://attacker.example/payload.js");
  throw new Error("Тест не пройдено");
} catch (error) {
  if (!(error instanceof TypeError)) {
    throw error;
  }
}

Trusted Types для захисту DOM

Навіщо потрібні Trusted Types

Небезпечні DOM-sinks

Політика Trusted Types

CSP для ввімкнення Trusted Types

Безпечне відображення тексту

Повний приклад

`index.html`

`app.js`

Санітизація дозволеного HTML

TrustedScriptURL і TrustedScript

Default policy

Міграція складного застосунку

1. Інвентаризація sink-ів

2. Заміна непотрібного HTML

3. Визначення меж довіри

4. Створення обмежених політик

5. Увімкнення блокування

Тестування

Common mistakes

Вважати, що Trusted Types автоматично санітизують HTML

Створювати політику, яка повертає вхід без змін

Використовувати `innerHTML` для звичайного тексту

Покладатися лише на CSP

Дозволяти будь-які назви політик

Використовувати регулярні вирази як HTML-санітизатор

Забути про сторонні бібліотеки

Увімкнути блокування без попереднього аналізу

Summary

Trusted Types для захисту DOM

Навіщо потрібні Trusted Types

Небезпечні DOM-sinks

Політика Trusted Types

CSP для ввімкнення Trusted Types

Безпечне відображення тексту

Повний приклад

index.html

app.js

Санітизація дозволеного HTML

TrustedScriptURL і TrustedScript

Default policy

Міграція складного застосунку

1. Інвентаризація sink-ів

2. Заміна непотрібного HTML

3. Визначення меж довіри

4. Створення обмежених політик

5. Увімкнення блокування

Тестування

Common mistakes

Вважати, що Trusted Types автоматично санітизують HTML

Створювати політику, яка повертає вхід без змін

Використовувати innerHTML для звичайного тексту

Покладатися лише на CSP

Дозволяти будь-які назви політик

Використовувати регулярні вирази як HTML-санітизатор

Забути про сторонні бібліотеки

Увімкнути блокування без попереднього аналізу

Summary

`index.html`

`app.js`

Використовувати `innerHTML` для звичайного тексту