Firefox中Content Security Policy阻止localhost资源加载问题排查

开发环境 #

• 主机系统：Ubuntu 18.04.6 LTS
• 虚拟机：Virtualbox 5.2.42，运行Lubuntu 20.04
• 本地部署：PHP开发服务器，启动命令：php -S 0.0.0.0:8080 -t /home/alan/DEV/

页面代码（index.html） #

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="main"></div>
  <script src="/main.js"></script>
  <script src="/script.js"></script>
</body>
</html>

问题现象 #

• Chromium可正常访问localhost:8080
• Firefox升级到122.0.1后无法加载页面，控制台报Content-Security-Policy错误：

Content-Security-Policy: The page's settings blocked the loading of a resource at data: ("media-src"). localhost:8080
Content-Security-Policy: The page's settings blocked the loading of a resource at http://localhost:8080/main.js ("script-src-elem"). localhost:8080
Content-Security-Policy: The page's settings blocked the loading of a resource at http://localhost:8080/script.js ("script-src-elem"). localhost:8080

Firefox相关配置（about:config） #

• extensions.webextensions.base-content-security-policy：

script-src 'self' https://* http://localhost:* http://127.0.0.1:* moz-extension: blob: filesystem: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline';

• extensions.webextensions.base-content-security-policy.v3：

script-src 'self' 'wasm-unsafe-eval';

• extensions.webextensions.default-content-security-policy：

script-src 'self' 'wasm-unsafe-eval';

• extensions.webextensions.default-content-security-policy.v3：

script-src 'self'; upgrade-insecure-requests;

已尝试的方法 #

在index.html头部添加<meta http-equiv="Content-Security-Policy" content="default-src 'self'">，问题未解决，还导致Chromium页面布局异常。

1. 排查扩展导致的CSP拦截 #

Firefox升级后部分扩展可能强制注入严格的CSP规则，先禁用所有扩展，重启浏览器后测试。如果恢复正常，逐个启用扩展排查出问题的那个，更新或卸载该扩展即可。

2. 调整Firefox全局CSP配置 #

如果不是扩展问题，可修改Firefox的全局CSP规则：

• 打开about:config，搜索security.csp.enable，临时设为false关闭CSP验证，测试页面是否正常。若正常，说明默认CSP规则过严。
• 更安全的方式是修改security.contentsecuritypolicy.default，设置为允许本地资源加载的规则，比如：

  default-src 'self' http://localhost:* http://127.0.0.1:*; script-src 'self' http://localhost:* http://127.0.0.1:*; media-src 'self' data:;
  

  该规则允许本地脚本加载，同时允许data:资源用于媒体，覆盖默认的严格限制。

3. 通过PHP服务器发送CSP响应头 #

meta标签的CSP优先级低于响应头，且部分限制无法覆盖，建议通过PHP发送CSP头：
将项目根目录的index.html替换为index.php，内容如下：

<?php
header("Content-Security-Policy: default-src 'self' http://localhost:8080; script-src 'self' http://localhost:8080; media-src 'self' data:");
?>
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="main"></div>
  <script src="/main.js"></script>
  <script src="/script.js"></script>
</body>
</html>

重启PHP服务器后，该响应头可同时兼容Firefox和Chromium。

4. 重置Firefox配置 #

若以上方法无效，备份书签后打开about:support，点击「刷新Firefox」重置所有配置，恢复默认状态后再测试。

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