解决Strapi通过IIS反向代理访问时的CSP错误

当前环境配置 #

• Strapi实例运行在默认端口1337
• DNS配置将cms.mysite.com流量导向服务器公网IP
• IIS配置反向代理，把该域名的流量转发至1337端口
• 已设置Strapi随服务器开机自启，且通过SSL证书实现https://cms.mysite.com的安全通信

问题现象 #

从服务器外的浏览器访问https://cms.mysite.com能正常加载首页，但点击「Open the administration」按钮时触发CSP（内容安全策略）错误。

原因分析 #

仅按照官方入门教程完成基础部署，未对Strapi的security middleware做额外配置。默认CSP规则中使用localhost:1337作为资源来源，但反向代理场景下，外部实际访问的域名是cms.mysite.com，浏览器校验CSP规则时发现资源来源不匹配，因此抛出错误。将错误信息中的localhost:1337替换为域名后可正常响应，也验证了这一点。

解决方案 #

1. 修改Strapi的CSP安全头配置 #

编辑项目根目录下的config/middleware.js文件（若不存在则新建），调整security middleware的contentSecurityPolicy规则，将所有涉及localhost:1337的位置替换为你的域名https://cms.mysite.com：

module.exports = {
  settings: {
    security: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https://cms.mysite.com'],
          'script-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'", 'https://cms.mysite.com'],
          'img-src': ["'self'", 'data:', 'blob:', 'https://cms.mysite.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'https://cms.mysite.com'],
          'frame-src': ["'self'", 'https://cms.mysite.com']
          // 可根据浏览器控制台的具体CSP错误提示，补充修改其他需要调整的directive
        }
      }
    }
  }
};

2. 配置Strapi的外部访问URL #

编辑config/server.js文件，设置url字段为你的正式域名，确保Strapi生成的资源链接使用正确的域名：

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  app: {
    keys: env.array('APP_KEYS'),
  },
  url: env('SERVER_URL', 'https://cms.mysite.com'), // 替换为你的域名
});

3. 重启Strapi服务 #

修改配置后，重启Strapi服务使配置生效，再次访问https://cms.mysite.com并点击管理后台按钮，即可正常进入。

内容的提问来源于stack exchange，提问作者JP Damstra