Nginx 托管 React 应用需适配严格 CSP：统一静态资源路径、消除内联脚本/样式、配置 nonce/hash 机制；dangerouslySetInnerHTML 和手动 <style> 标签会破坏 CSP，应改用安全渲染方式。
用 Nginx 托管 React 应用本身很简单，但加上严格的 CSP（Content Security Policy）防护后，容易因策略过严导致白屏、资源加载失败或 React 路由跳转异常。关键在于：静态资源路径要统一、内联脚本/样式必须消除、CSP 需适配 React 的运行时行为（如 eval、nonce 或 hash 机制），同时保留开发体验的灵活性。
构建 React 应用时规避内联风险
React 默认构建（npm run build）不会生成内联脚本或样式，但以下情况会破坏 CSP 安全性：
- 在 JSX 中写
dangerouslySetInnerHTML渲染未转义 HTML，可能引入内联<script>；应改用 DOM API 或安全渲染库 - 使用
style={{ color: 'red' }}是安全的（CSS 属性由 React 注入 style 标签外的 DOM 属性），但若手动插入<style>...就触发style-src 'unsafe-inline'限制 - 避免在
index.html中添加内联<script>或<style>—— 所有逻辑应走打包产物（main.xxx.js、static/css/*.css）
Nginx 配置基础托管与 history 模式支持
React Router 使用 BrowserRouter 时依赖 HTML5 History API，需让 Nginx 将所有非静态资源请求回退到 index.html：
location / {
try_files $uri $uri/ /index.html;
}
同时确保静态文件正确服务：
location /static/ {
alias /var/www/my-react-app/build/static/;
expires 1y;
add_header Cache-Control "public, immutable";
}
注意：React 构建输出目录（如 build/）需完整部署到 Nginx 的 root，且 index.html 中的 <base href="/> 与实际部署路径一致（如部署在子路径 /app/，则需配置 homepage 并调整 Nginx location /app/）。
配置严格但可用的 CSP 响应头
直接在 Nginx 中用 add_header 设置 CSP，推荐使用 Content-Security-Policy（而非旧版 X-Content-Security-Policy）：
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'sha256-abc123...'; style-src 'self' 'sha256-def456...'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' https:; frame-ancestors 'none'; base-uri 'self'; form-action 'self';" always;
要点说明：
-
script-src不允许'unsafe-inline'或'unsafe-eval'；React 生产包不含eval，但若用了Function构造器或某些第三方库（如部分图表库）可能触发，需查构建产物或替换库 - 用
sha256-xxx指定index.html中可能存在的内联脚本哈希（实际 React 构建不生成内联脚本，此值可省略；若有自定义<script>，需用openssl dgst -sha256 -binary < file.js | base64计算） -
connect-src必须包含 API 接口域名（如connect-src 'self' https://api.example.com），否则fetch或axios请求被拦截 -
frame-ancestors 'none'防止被嵌入 iframe；base-uri 'self'禁止修改<base>；form-action 'self'限制表单提交目标
调试 CSP 违规并持续优化
CSP 违规不会中断页面，但会在浏览器控制台报错，并可配置上报：
- 在 CSP 中加入
report-uri /csp-report或report-to csp-endpoint（需配合 Reporting API）收集违规详情 - 本地调试时，先用
Content-Security-Policy-Report-Only头，观察控制台警告再收紧策略，避免直接上线白屏 - 检查 Network 面板中哪些资源被阻止（Status 显示
blocked:csp），对照 CSP 规则补全对应src类型（如字体加载失败需加font-src） - 若使用 Google Analytics、Clarity 等第三方脚本，需显式加入
script-src和img-src（如https://www.google-analytics.com），并确认其是否支持 nonce/hash
不复杂但容易忽略：CSP 是声明式策略，不是开关；它依赖你对应用所有资源来源的清晰认知。从最小权限起步，逐项放开，比一开始就写宽泛策略更可靠。
