простым примером может быть:
Код: Выделить всё
const template = document.createElement('template');
template.innerHTML = /*html*/`
p {
color: red;
}
Hello, world!
`;
class HelloWorld extends HTMLElement {
constructor() {
super()
.attachShadow({ mode: 'open' });
.shadowRoot.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hello-world', HelloWorld);
Код: Выделить всё
Для этого я установил следующий заголовок ответа:
Код: Выделить всё
Content-Security-Policy "default-src 'self';"
Тогда возникает вопрос: как мы можем установить строгий CSP для веб-компонентов, использующих теневой DOM?
Единственные решения, о которых я знаю, — это добавить либо nonce, хеш, либо unsafe-inline.
unsafe-inline отменяет защиту политика, поэтому она бесполезна.
О создании хеша или одноразового номера не может быть и речи во всех ситуациях, кроме самых простых.
С хешами может работать только полностью статический контент. Как только контент становится динамическим, хеш становится неверным, и CSP блокирует встроенный стиль. И это не имеет отношения к созданию механизма, который будет программно добавлять хеш для встроенного HTML.
Нонс-код создает другую, столь же сложную проблему. Допустим, я генерирую одноразовый номер и включаю его в заголовок CSP. Как мне внедрить его в файл js?
Помимо внесения дополнения в спецификацию CSP, позволяющего добавлять встроенные стили скриптами из белого списка, я пока не могу представить разумного решения.
Как это вообще можно сделать?
Подробнее здесь: https://stackoverflow.com/questions/680 ... strict-csp
Мобильная версия