时间戳

首页 > 解决方案 > 允许带有 npm 头盔的 S3 图像

node.js - 允许带有 npm 头盔的 S3 图像

问题描述

我正在使用 npm 头盔来保护我的 express 应用程序，但我想允许我的 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 链接列入白名单，但我在他们的文档中找不到关于此主题的任何内容

标签： node.jsexpressamazon-s3node-moduleshelmet.js

解决方案

头盔的维护者在这里。

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 的文档中更清楚地说明的事情，所以感谢您提出这个问题。

推荐阅读