Как заставить элемент стиля в Shadow DOM работать со строгим CSP?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как заставить элемент стиля в Shadow DOM работать со строгим CSP?

Сообщение Anonymous »

В последние годы стандарт веб-компонентов стал известным низкоуровневым API-интерфейсом графического интерфейса для Интернета. Одной из его ключевых особенностей является Shadow DOM, который позволяет инкапсулировать стили в компонент, что, в свою очередь, позволяет более простым селекторам CSS устанавливать стили.
простым примером может быть:

Код: Выделить всё

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);
в моем HTML я бы назвал свой компонент так: Теперь предположим, что я хочу применить строгую CSP (политику безопасности контента).
Для этого я установил следующий заголовок ответа:

Код: Выделить всё

Content-Security-Policy "default-src 'self';"
Но это не работает, поскольку элемент стиля в определении веб-компонента является встроенным, и этот CSP блокирует его.
Тогда возникает вопрос: как мы можем установить строгий CSP для веб-компонентов, использующих теневой DOM?
Единственные решения, о которых я знаю, — это добавить либо nonce, хеш, либо unsafe-inline.
unsafe-inline отменяет защиту политика, поэтому она бесполезна.
О создании хеша или одноразового номера не может быть и речи во всех ситуациях, кроме самых простых.
С хешами может работать только полностью статический контент. Как только контент становится динамическим, хеш становится неверным, и CSP блокирует встроенный стиль. И это не имеет отношения к созданию механизма, который будет программно добавлять хеш для встроенного HTML.
Нонс-код создает другую, столь же сложную проблему. Допустим, я генерирую одноразовый номер и включаю его в заголовок CSP. Как мне внедрить его в файл js?
Помимо внесения дополнения в спецификацию CSP, позволяющего добавлять встроенные стили скриптами из белого списка, я пока не могу представить разумного решения.
Как это вообще можно сделать?

Подробнее здесь: https://stackoverflow.com/questions/680 ... strict-csp
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»