Почему пользовательские заголовки для «Политики безопасности контента» не работают на github?
Я пытаюсь отправить ответ SVG с помощью NodeJS. Этот SVG имеет небольшой встроенный код JavaScript, который динамически вычисляет ширину SVG. Все работает, когда API вызываются напрямую из браузера. Но когда я использую эти API в файле readme GitHub (для сервера SVG в файле readme), это не позволяет мне запускать этот встроенный код JavaScript, хранящийся в SVG.
Когда добавляется любой SVG, ссылка генерируется github и выглядит как :: https://camo.githubusercontent.com/some-unique-id-for-each-content и когда я открыл эту ссылку прямо в браузере, в консоли браузера появилась следующая ошибка:
Отказано в выполнении встроенного сценария, поскольку он нарушает следующую директиву политики безопасности содержимого: «default-src 'none'». Для включения встроенного выполнения требуется либо ключевое слово unsafe-inline, либо хэш ('sha256-'), либо одноразовый номер ('nonce-...'). Также обратите внимание, что 'script-src' не был задан явно, поэтому 'default-src' используется как запасной вариант.
Но проблема в том, что я устанавливаю пользовательские заголовки Content-Security-Policy перед отправкой ответа, который выглядит так:
res.setHeader("Content-Type", "image/svg+xml");
res.setHeader("Content-Security-Policy", "default-src 'self'; данные img-src:; style-src 'unsafe-inline'; script-src 'self' 'unsafe-inline'");
И кажется, что пользовательский script-src не работает с github readme. Я также пытался установить значение хеша, но ничего не влияет на заголовки.
Может ли кто-нибудь исправить меня или сказать мне, что здесь не так?
Ответы 2
Github публикует собственный заголовок Content-Security-Policy: как видите, он полностью ограничивает использование javascript.
Для svg публикуются те же заголовки, что и выше, поэтому использование javascript запрещено.
Так что не ваш CSP блокирует javascript, а github.
Невозможно переопределить эти заголовки, потому что они находятся в ведении github. Но после загрузки изображений через <img src='https://camo.githubusercontent.com/some-unique-id-for-each-content' вы можете запустить любой javascript на своей странице. Возможно, можно использовать событие img.onload.
GitHub не позволяет пользователям выполнять пользовательский JavaScript при просмотре SVG, потому что они устанавливают свой собственный заголовок Content-Security-Policy. Это связано с тем, что, как правило, ненадежный JavaScript может делать вредоносные вещи, а GitHub не хочет, чтобы люди крали учетные данные или становились переносчиками вредоносных программ.
Это ограничение будет распространяться на все предоставленные пользователями SVG, отображаемые на GitHub, поскольку все изображения на GitHub проксируются через Camo для предотвращения вредоносного JavaScript и отслеживания, и, следовательно, все изображения отправляются с заголовком Content-Security-Policy GitHub, а не с вашим. Если вы хотите запустить JavaScript в SVG, это нужно будет сделать только на вашем собственном сайте.
Итак, одна вещь, которую я могу сделать, это запустить этот JavaScript на стороне сервера, а затем передать рассчитанную ширину для этого SVG. Но теперь возникает вопрос, как мне запустить этот скрипт svg.setAttribute("width", svg.getBBox().width); на стороне сервера, потому что содержимое в SVG заполняется динамически. И эти SVG Template Literals на стороне сервера.
Я определенно не тот человек, которого стоит спрашивать о JavaScript. Все, что я могу сделать, это объяснить, почему GitHub делает то, что делает. Однако спрашивать, как делать то, что вы хотите, без использования JavaScript, кажется отличным новым вопросом.
Конечно, я опубликую новый вопрос по этой теме. И спасибо, что помог мне.
Так есть ли способ переопределить эти заголовки? Или какой-либо обходной путь для запуска JavaScript в SVG?