时间戳

首页 > 解决方案 > 如何修复我的 heroku 部署应用程序的内容安全策略？

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

问题描述

我有一个 nodeJs、express、MongoDB 待办事项列表项目在服务器端运行并呈现 ejs 模板。在本地服务器上运行时它工作正常但是我将项目部署到 Heroku 并且它在将近一个月前工作，昨天我对 CSS 进行了一些试验并添加了一些字体，但应用程序崩溃了。端点活动 URL 是崩溃的，但它是应用程序中最重要的页面。但是，它上面没有任何特定的系列字体，有关如何取回它的任何帮助。已部署应用程序的控制台错误 目前，我几乎删除了样式表 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。

要解释的代码片段：

Header 中的元标记：

<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 })

    })
})

};

标签： javascripthtmlherokucontent-security-policymeta

解决方案

  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: ;">

因为：

  • font-srcCSP 不支持重复的指令（在您的情况下）

  • 您尚未在您的<head>部分中列出 CSP 规则中的所有来源。

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

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

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

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

推荐阅读