CODEWITHSUNDEEP
javascriptnode.jsfont-awesomecontent-security-policynonce
BHANU ARORA
BHANU ARORA

Reputation: 91

How to use a nonce in font awesome scripts?

How to use a nonce in font awesome scripts ?

I already generated a base64 nonce through my server side and I also inserted it in my font awesome script so that I can use the icons provided by it but I got the error mentioned below :- basically stating that font awesome is trying to add some inline css , how to make it insert it in such a way so that it works?

Error:- Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' cdn.jsdelivr.net kit.fontawesome.com 'nonce-somenoncevalue'". Either the 'unsafe-inline' keyword, a hash ('sha256-...), or a nonce ('nonce-...') is required to enable inline execution.

What I tried ? I generated a nonce on server side and applied it on font awesome scripts but It didn't work and also researched a lot but didn't find anything relevant

generating a nonce

const crypto = require('crypto');
let nonce = crypto.randomBytes(16).toString('base64');
module.exports = nonce;

setting a nonce property to csp header

const nonce = require("../middleware/nonce");
app.use(helmet({
    contentSecurityPolicy:{
        useDefaults:true,
        directives:{
            "default-src":"'self'",
            "script-src":["'self'","cdn.jsdelivr.net","kit.fontawesome.com","ka-f.fontawesome.com","js.stripe.com"],
            "style-src":["'self'","cdn.jsdelivr.net","kit.fontawesome.com",`'nonce-${nonce}'`],
            "connect-src":["'self'","ka-f.fontawesome.com"],
            "frame-src":["'self'","js.stripe.com"]
        }
    }
}));

adding the nonce to fontawesome script

<%- include("./layouts/head.ejs") %>

<body>
  <%-include("./layouts/nav.ejs") %>
  <% if(editProd==true){ %>
    <div class="container w-100">
      <div class="alert alert-success alert-dismissible fade show h-100 w-100" role="alert">
        <strong>Success!</strong> Your product is successfully edited
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
    </div>
  <% }%>
  <div class="d-flex justify-content-around mainBox flex-wrap progress productBox">
    <% prods.forEach((element)=> { %>
      <div class="card position-relative">
        <% if(loggedIn && userId.toString()==element.userId.toString()){%>
          <input type="hidden" name="_csrf" value="<%= csrfToken %>">
          <input type="hidden" name="prodId" value="<%= element._id %>">
          <div class="d-flex justify-content-center align-items-center deleteBtn">
            <i class="far fa-window-close fa-3x" nonce='<%= nonce %>'></i>
          </div>
        <% } %>
        <div class="card-body productCard">
          <div class="container d-flex flex-column justify-content-evenly align-items-center p-0 imgBox">
            <img src="/<%= element.imageurl %>" class="card-img-top displayProd" data-Id="<%=element._id %>" alt='<%=element._id %>'>
            <h5 class="card-title fs-4 text-capitalize">
              <%=element.title %>
            </h5>
          </div>
          <div class="container d-flex justify-content-between w-100 p-0">
            <% if(loggedIn && userId.toString()==element.userId.toString()){%>
              <a href="/edit-product/<%= element._id %>?edit=true"
                class="btn btn-primary details d-flex justify-content-center align-items-center">Edit</a>
            <% } %>
            <%- include("./layouts/redirectToCart.ejs",{element:element,loggedIn
            : loggedIn}) %>
          </div>
        </div>
      </div>
    <% }); %>
  </div>
  <%- include("./layouts/pagination.ejs",{currentPage: currentPage,totalPages:totalPages,nextPage:nextPage,prevPage:prevPage}) %>
  <%- include("./layouts/end.ejs") %>
  <script src="/mvcshop1/public/productDelete.js"></script>
  <script src="/mvcshop1/public/productDisplay.js"></script>
  // font awesome script 
  <script nonce='<%= nonce %>' src="https://kit.fontawesome.com/bedf74ce64.js" crossorigin="anonymous"></script>
</body>
</html>

Also suggest an alternative approach to solve the error if you can

Upvotes: 2

Views: 879

Answers (0)

Related Questions