Добавить одноразовый номер во встроенные сценарии пакетов в Vue SSR (включен строгий CSP)
Основываясь на этой статье на web.dev, я обновил CSP на основе списка разрешенных хостов до строгого CSP.
У меня есть приложение Vue с включенным SSR, и я выполнил все 5 шагов, перечисленных в этой статье. Но я получаю следующие ошибки, и приложение не работает (поскольку основной скрипт не загружен):
Мой строгий CSP на основе одноразового номера выглядит так:
script-src 'nonce-e5ecafd12af2d9661071d127eaa72b14' 'strict-dynamic' https:// 'unsafe-inline';
object-src 'none';
base-uri 'none';
Может ли кто-нибудь поддержать меня здесь, дайте мне знать, как мы можем разрешить им строгую CSP?
PS. как вы знаете, у нас нет доступа к этим сценариям в html-файле, чтобы назначить им одноразовый номер.
Ответы 1
Прочитав множество статей и попробовав различные решения, такие как это, я нашел обходной путь, который отлично работает, как показано ниже:
Фон:
- Я использую экспресс для установки правил CSP. Итак, на стороне сервера, где я разместил свои правила CSP, я генерирую одноразовый номер и прикрепляю его к заголовку ответа.
- У меня есть специальный шаблон для моей веб-страницы, куда я помещаю некоторые скрипты, такие как GTM и т. д.
Ранее: Я передавал сгенерированный одноразовый номер в свой шаблон через контекст, а внутри своего шаблона я назначал его каждому сценарию. Но это не работало для встроенных сценариев пакетов. (основная причина, по которой я поднял этот вопрос в первую очередь!)
Решение:
- Я больше не передаю сгенерированный одноразовый номер в свой HTML-шаблон. Таким образом, я не назначаю одноразовые значения никаким сценариям внутри моего шаблона.
- Вместо этого я беру интерполированный шаблон в виде строки и добавляю одноразовый номер ко всем тегам сценария, а затем отправляю версию nonce-included-html клиенту.
- Для этого я изменил обратный вызов
renderToString, как показано ниже.
renderer.renderToString(context, (err, html) => {
const nonceIncludedHTML = addNonceToScriptTags(html, res.locals.cspNonce);
res.send(nonceIncludedHTML);
})
А это тело моей функции "addNonceToScript":
function addNonceToScriptTags(html, nonce) {
if (!nonce || !html) {
return html;
}
return html
.replace(/<script/g, `<script nonce = "${nonce}"`)
.replace(/as = "script">/g, `nonce = "${nonce}" as = "script">`);
}
Мне нужно было добавить одноразовый номер к <link as = "script" rel = "preload" href = "...">, так как мой CSP блокировал сценарии для запроса на предварительную загрузку, хотя в моих сценариях был одноразовый номер.