如何修复部署在Heroku上的Node.js应用的内容安全策略故障

根据你提供的代码和现象（清空页面仅保留h1可正常加载，加入原有表格后崩溃），核心问题集中在以下几点：

• 控制器未做数据库查询错误处理，本地MongoDB连接稳定无报错，Heroku环境下若数据库查询超时、权限变更或返回异常，activities变量会变为undefined，模板渲染时调用activities.forEach直接触发服务端500错误
• 头部模板存在无效语法：https://fonts.googleapis.com/icon?family=Material+Icons的link标签后多了多余的-->注释结束符，可能导致后续静态资源解析异常
• 模板未做变量合法性校验，直接遍历activities，变量为空或非数组时直接崩溃
• CSP配置重复声明font-src，后声明的规则会覆盖前者，可能导致字体资源加载被拦截

1. 给控制器添加错误处理和兜底逻辑 #

修改控制器代码如下：

function index(req, res){
  Activity.find({},function(err, activities){
    if (err) {
      console.error('Activity查询错误：', err)
      // 兜底传空数组，避免模板报错
      activities = []
    }
    User.find({}, function(err, users){
      if (err) {
        console.error('User查询错误：', err)
        users = []
      }
      res.render('activities/index',{ activities, user:req.user,  users })
    })
  })
};

2. 修复头部模板语法错误 #

删除link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">后的多余-->符号。

3. 给模板遍历加合法性判断 #

修改EJS模板中遍历部分的代码，先判断activities是否为数组：

<% if (Array.isArray(activities)) { %>
  <% activities.forEach(function(activity){%>
    <!-- 原有表格行代码 -->
  <% }) %>
<% } %>

4. 优化CSP配置 #

合并重复的font-src规则，修改为：

<meta http-equiv="Content-Security-Policy" 
content="default-src 'self' data:gap: 'unsafe-eval' ws: ;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdn.jsdelivr.net ;
font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com https://cdn.jsdelivr.net ;">

5. 查看Heroku错误日志 #

执行heroku logs --tail命令查看实时运行日志，可直接获取崩溃的具体报错信息，进一步精准定位问题。

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