为何带module属性的Script无法运行？Firebase应用排查

核心问题 #

你遇到的type="module"脚本不执行、nomodule脚本也无输出的情况，大概率是内容安全策略（CSP）限制导致的，而非代码语法本身的问题。

关键排查点 #

你的CSP仅配置了connect-src，但模块脚本的加载（包括import的Firebase资源）受script-src指令管控——当前script-src未明确允许https://www.gstatic.com的资源，浏览器会直接阻止模块脚本的下载与执行。

另外，nomodule脚本无输出也侧面说明：要么CSP完全阻止了所有脚本执行，要么页面存在其他脚本错误导致后续代码无法运行。

具体修复步骤 #

1. 更新CSP的script-src指令
   在CSP中添加https://www.gstatic.com，同时确保允许'unsafe-inline'（测试用的nomodule脚本需要该权限）。示例配置：

   script-src 'self' https://www.gstatic.com 'unsafe-inline';
   

   若你用default-src作为兜底策略，也要确保包含上述来源。

2. 查看浏览器控制台的CSP报错
   打开浏览器开发者工具的「Console」或「Security」面板，会显示具体哪个资源被CSP阻止，这是定位问题最准确的方式。

3. 简化测试脚本
   先测试最基础的模块脚本，排除Firebase代码的干扰：

   <script type="module">
     console.log("Module script works");
   </script>
   <script nomodule>
     console.log("No module script works");
   </script>
   

   如果这个测试脚本也无输出，说明CSP的脚本限制是核心问题。

4. 修正Firebase初始化代码
   当CSP问题解决后，检查Firebase代码：getDatabase()需要传入app实例，你当前的代码少了参数，会导致后续报错，需修改为：

   const db = getDatabase(app);
   

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