How to fix the content security policy on my heroku deployed app?

Question

I have a nodeJs, express, MongoDB todo list project running on server-side and rendering ejs templates. When running on local server it works fine However I deployed the project to Heroku and it was working almost a month ago, yesterday I experimented with the CSS a little and added a few fonts but the app crashed. the endpoint activities URL is the one crashing but it's the most important page in the app. It does not have any specific family font on it though, Any help on how to get this back.console errors of the deployed app At the moment I almost removed all the fonts I have in the stylesheets CSS.

Please Check this update:

I removed everything from the activities page and just kept a , the page loaded just fine with the h1 tag, Now I don't have any special family fonts on this page, not on the code itself, and not referenced inside the CSS stylesheets

the activities/index.ejs page

  <%- 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>

Also important to note here, the app was perfectly working for almost a month until I started adding fonts/ css yesterday.

snippets of the code to explain :

meta tags in 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>

activities routes

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

controller (specially for the index ejs, rendering the activities page)

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

    })
})

};

score 0 · Answer 1 · answered Nov 02 '21 at 23:17

Your CSP in the meta tag should looks like:

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

because of:

duplicates of directives (font-src in your case) are not supported in CSP
you have not listed all sources in the CSP rules from your <head> section.

Judging by: "... because it violates the following content security policy directive: "default-src 'none'". Note that 'font-src' was not explicitly set, ..." you have another CSP in action (with rule "default-src 'none'" and the missing font-src directive). Trerefore:

check if you delivery a CSP via HTTP header - manual how to do that.
check static.json file for presence of something like that:

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

If you already published CSP via HTTP header, you should add your rules into it, not into meta tag.

Disable Grammarly (grammar check browser extension), it injects some fonts into viewed page.

How to fix the content security policy on my heroku deployed app?

Please Check this update:

1 Answers1

Linked