Почему браузеры жалуются только на определенные типы встроенных стилей? ⇐ CSS

[Anonymous]

У меня есть CSP, из которого я хочу удалить unsafe-inline из style-src. Частью этого процесса является удаление всех встроенных стилей из файла JavaScript. При проверке журналов консоли в браузерах я вижу, что все протестированные мной браузеры: Chrome, Safari, Opera, Firefox и Edge — жаловались только на встроенные стили, подобные строке ниже.

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

h.setAttribute('style', 'visibility: hidden;position: absolute; top: 0px; left: -999px;');

Но он не будет жаловаться на эту строку. Насколько я понимаю, приведенный ниже стиль по-прежнему является встроенным, но разница в том, что он использует назначение свойств стиля JavaScript.

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

s.style.fontSize = "12px";

Мне нужно подтверждение своей правоты, поскольку я не уверен на 100 %, и если кто-нибудь лучше разбирается в этом и может объяснить, почему он не жалуется, это было бы потрясающе. Я пытался найти это в Интернете, но не нашел ресурсов, объясняющих это.
РЕДАКТИРОВАТЬ: Ниже приведена ошибка журнала консоли, которую я вижу в Chrome
< р>

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

file.js?ts=1731118161084:51 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' https://cdn.com". Either the 'unsafe-inline' keyword, a hash ('sha256-Aq7e5LGf4kZTmyqS7SqWaWXFaN/dvBB41GlMIGE1TF8='), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.

РЕДАКТИРОВАНИЕ 2: исправлено значение 12 пикселей на «12 пикселей». Я опечатался при написании вопроса. s.style.fontSize = "12px"; так это выглядит в моем javascript.
РЕДАКТИРОВАТЬ 3: Добавлен воспроизводимый пример. Я не смог воспроизвести его, используя функцию фрагмента stackoverflow. Итак, вот HTML-код. Вы можете запустить его в HTML-редакторе и получить журнал ошибок в своем браузере.

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

Minimal CSP Example




This is a hidden element


// This line will trigger a CSP error because of the inline style
const h = document.getElementById('hidden-element');
h.setAttribute('style', 'visibility: visible');

Затем вы можете заменить встроенный стиль на

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

        h.style.visibility = "visible";

И вы больше не должны видеть журнал ошибок. Я использовал html-редактор w3schools.

Подробнее здесь: https://stackoverflow.com/questions/791 ... ine-styles