React SPA如何正确配置CSP实现react-router-dom路由直接访问

问题根因 #

• 前端路由跳转（通过react-router-dom的Link组件）仅在浏览器侧执行状态切换，无新的服务器资源请求，使用的是首次加载的index.html中配置的CSP规则，因此正常生效
• 直接在地址栏输入路由地址时，会向服务器发起对应路径的资源请求：
  1. 未配置SPA路由fallback的服务器会默认返回404页面，该页面未配置预期的CSP规则，且默认default-src策略拦截了inline资源
  2. 即使部分服务器做了fallback，服务器响应头中配置的CSP优先级高于html的meta标签CSP，若响应头未配置对应规则，仍会触发拦截
  3. 当前仅配置了script-src规则，报错指向default-src，说明未配置的资源类型会走default-src的默认严格策略，触发拦截

修复步骤 #

第一步：配置服务器路由fallback（SPA直接访问路由的前提） #

所有路径请求统一返回根目录的index.html，由前端路由接管路径匹配逻辑：

• 本地开发webpack-dev-server场景：在webpack配置中添加

module.exports = {
  // 其余配置保持不变
  devServer: {
    historyApiFallback: true,
  }
}

• 生产Nginx场景：在站点配置的server块中添加

location / {
  try_files $uri $uri/ /index.html;
}

• 生产Apache场景：在项目根目录的.htaccess文件中添加

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

第二步：修正CSP配置，保障合规 #

优先在服务器响应头中配置CSP（优先级高于meta标签，避免 fallback 返回时规则不一致），如果仍使用meta标签配置，需补充完整规则：

1. 补充default-src规则，或者覆盖所有用到的资源类型规则，避免触发默认兜底拦截，示例配置：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'">

2. 如需满足严格CSP合规要求（移除unsafe-inline），可给inline脚本添加nonce或sha256哈希值，示例：

<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-随机生成的唯一值' 'unsafe-eval'">
<script nonce="随机生成的唯一值">
// 你的inline脚本内容
</script>

第三步：验证配置生效 #

打开浏览器开发者工具的网络标签，直接访问目标路由地址，检查：

• 响应状态码为200，返回的响应体内容和根路径访问的index.html一致
• 响应头中的Content-Security-Policy字段符合预期，若存在该字段则以它为准，meta配置不生效

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