Разрешение образов S3 со шлемом npm
Я использую шлем npm для защиты своего экспресс-приложения, но я хочу разрешить рендеринг изображений из корзины S3. Я получаю эту ошибку, когда использую helment Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:"., что имеет смысл, я нарушаю CSP, который реализует этот шлем.
Единственное, что я смог найти в их документах, это:
app.use(
helmet({
contentSecurityPolicy: false,
})
);
что позволяет отображать мои изображения, но я все еще хочу, чтобы CSP обеспечивал этот шлем. Мне просто нужно внести в белый список мою ссылку S3, но я не могу найти ничего в их документах по этой теме.
Ответы 1
Хранитель Шлема здесь.
Helmet по умолчанию устанавливает несколько заголовков, связанных с безопасностью, в том числе один под названием Content-Security-Policy. Политика безопасности контента, или CSP, фактически представляет собой белый список того, что вашей странице разрешено загружать и делать.
Вы видите ошибку, указывающую на то, что ваш CSP не разрешает загрузку изображений откуда-либо, кроме вашего домена ('self') или URI данных (data:). Вы можете исправить это с помощью чего-то вроде:
app.use(
helmet({
contentSecurityPolicy: {
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
"img-src": ["'self'", "s3.amazonaws.com"],
},
},
})
);
Чтобы узнать больше о CSP, ознакомьтесь с этим введением на MDN.
Это то, что я думал сделать более понятным в документации Helmet, так что спасибо, что задали этот вопрос.
эй, спасибо за ответ, я попробовал этот код, и я все еще получаю ту же ошибку; Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self' data:". Я пытался настроить "s3.amazonaws.com" так, чтобы он соответствовал моему URL, и все равно безуспешно.
я сделал опечатку; image-src должно быть img-src.
привет, Эван, извините, что беспокою вас снова. Я знаю, что вы, вероятно, заняты, поэтому не стесняйтесь просто игнорировать это сообщение, но предоставленный вами код по-прежнему не работает даже с исправлением опечатки. Я все еще получаю исходное сообщение об ошибке.
упс, извините, я только что исправил .. пришлось немного изменить URL-адрес, извините за беспокойство .. спасибо за поддержку такого потрясающего пакета!
Без проблем! Рад, что смог помочь.
я в настоящее время также имею дело с подобной вещью, после исследования, я приближаюсь к
app.use(helmet({contentSecurityPolicy: {directives:{...helmet.contentSecurityPolicy.getDefaultDirectives(),"img-src" : ["'self'", "data: https:"]}}}));