如何修复我的 heroku 部署应用程序的内容安全策略？答案

【问题标题】：How to fix the content security policy on my heroku deployed app?如何修复我的 heroku 部署应用程序的内容安全策略？
【发布时间】：2021-11-02 14:05:23
【问题描述】：

我有一个 nodeJs、express、MongoDB 待办事项列表项目在服务器端运行并呈现 ejs 模板。在本地服务器上运行时，它运行良好但是我将项目部署到 Heroku 并且它在差不多一个月前运行，昨天我对 CSS 进行了一些试验并添加了一些字体，但应用程序崩溃了。端点活动 URL 是崩溃的，但它是应用程序中最重要的页面。虽然它没有任何特定的家庭字体，但有关如何找回它的任何帮助。console errors of the deployed app 目前，我几乎删除了样式表 CSS 中的所有字体。

请检查此更新：

我从活动页面中删除了所有内容，只保留了一个，页面加载得很好，带有 h1 标签，现在我在这个页面上没有任何特殊的家族字体，没有在代码本身上，也没有在 CSS 样式表中引用

活动/index.ejs 页面

  <%- include('../partials/header') %>

<h1>Your Activitis so far...</h1>


<table class="table">
    <thead>
      <tr>
        <th scope="col">Title</th>
        <th scope="col">date</th>
        <th scope="col">Add Note</th>
        <th scope="col">edit</th>
        <th scope="col">delete</th>
      </tr>
    </thead>
    <tbody>
      <% activities.forEach(function(activity){%>
        <tr>
          <td><%= activity.title %></td>
          <td><%= activity.duration.toLocaleDateString() %></td>
          <!-- <td><%= activity.action ='true' ? 'done' : 'not done'  %></td> -->
          <td><a href="/activities/<%= activity._id %>"> <button    class="waves-effect waves-light small  " btn type="submit" value="details">   <i class="material-icons white">add</i>
          </a>
          </td>
          
          <td><a href="/activities/<%= activity._id %>/edit"><button type="submit"class="waves-effect waves-light small " value=""> <i class="material-icons light-green lighten-3">mode_edit</i>
          </a>
   
           </td>

            <td>       

              <form action="/activities/<%= activity._id %>?_method=DELETE" method="POST">
                <button type="submit"class="waves-effect waves-light small red"  value=""> <i class="material-icons ">delete</i></form>
            </td>
          
        </tr>

      <% }) %>
      
    </tbody>
  </table>

另外需要注意的是，在我昨天开始添加字体/css 之前，该应用程序完美运行了将近一个月。

sn-ps的代码解释：

标头中的元标记：

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  -->


<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css">

<title>Document</title>

活动路线

router.get('/',isLoggedIn, activitiesCtrl.index);
// new.ejs return view to add new activity
router.get('/new',isLoggedIn, activitiesCtrl.new);
router.post('/', activitiesCtrl.create)

控制器（专门用于索引 ejs，渲染活动页面）

function index(req, res){
// console.log(req.user,'is the user')
Activity.find({},function(err, activities){
    User.find({}, function(err, users){
        res.render('activities/index',{ activities, user:req.user,  users })

    })
})

};

【问题讨论】：

标签： javascript html heroku content-security-policy meta

【解决方案1】：

元标记中的 CSP 应如下所示：

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

因为：

CSP 不支持重复指令（在您的情况下为 font-src）
您尚未在 <head> 部分的 CSP 规则中列出所有来源。

判断：“...因为它违反了以下内容安全策略指令：“default-src 'none'”。请注意，'font-src' 没有明确设置，..." 您有另一个 CSP 正在运行（使用规则 "default-src 'none'" 和缺少的 font-src 指令）。特雷弗：

检查您是否通过 HTTP 标头传递 CSP - manual how to do that。
检查static.json 文件中是否存在类似内容：

"headers": {
"/**": {
"Content-Security-Policy": "default-src 'none'; ..."
}
}

如果您已经通过 HTTP 标头发布了 CSP，您应该将您的规则添加到其中，而不是添加到元标记中。

禁用Grammarly（语法检查浏览器扩展），它会在查看的页面中注入一些字体。

【讨论】：