Firefox多系统版本页面空白问题求助（Nginx与CSP相关）

这问题我太熟悉了！核心原因就是Firefox对内容安全策略（CSP）的执行标准更严格，而你的代码里用到了Function()构造函数——这种动态生成代码的方式属于CSP默认禁止的「eval类操作」，直接触发了拦截规则。而Safari和旧版IE对这部分CSP规则的兼容性没那么严格，所以才会出现跨浏览器的差异。你的Nginx SSL评级A+和这个问题无关，因为CSP是独立于SSL的安全策略。

为什么只有Firefox报错？ #

Firefox完全遵循W3C的CSP规范，把Function()、eval()、setTimeout(string)这类动态执行代码的行为都归为「不安全的代码执行」，默认会被CSP拦截。而Safari和旧版IE要么对这类规则的校验更宽松，要么存在兼容漏洞，没有触发拦截。

快速定位与修复方案 #

• 第一步：确认具体CSP规则
  打开Firefox控制台的「安全」标签，找到CSP报错的完整信息，里面会明确告诉你是哪条CSP指令（通常是script-src）阻止了Function()调用。

• 第二步：选择合适的修复方式

  1. 优先重构代码（推荐）：如果Function()不是必须的，尽量换成普通的函数声明或表达式。比如把const fn = new Function('x', 'return x*2')改成const fn = (x) => x*2，从根源上避免CSP冲突，也更安全。
  2. 调整CSP配置：如果确实需要保留Function()，在Nginx的Content-Security-Policy响应头里，给script-src添加'unsafe-eval'指令（注意单引号不能省略）。示例配置：

     add_header Content-Security-Policy "script-src 'self' 'unsafe-eval';";
     

     不过要注意，添加'unsafe-eval'会降低CSP的安全性，只在万不得已时使用。
  3. 检查前端框架构建版本：如果用了Vue、React这类框架，确保部署的是生产构建版本——开发版框架通常会用到eval类代码用于热重载，生产版会移除这些逻辑，也就不需要unsafe-eval了。

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