5

Using Vue SPA distributed by Express.

this is my helmet code in express

app.use(helmet.contentSecurityPolicy({
  directives: {
   defaultSrc: ["'self'"],
   styleSrc: ["'self'","'unsafe-inline'" ,'unpkg.com', 'cdn.jsdelivr.net', 
   'fonts.googleapis.com', 'use.fontawesome.com'],
   scriptSrc: ["'self'","'unsafe-inline'",'js.stripe.com'],
   frameSrc: ["'self'",'js.stripe.com'],
   fontSrc:["'self'",'fonts.googleapis.com','fonts.gstatic.com','use.fontawesome.com','cdn. joinhoney.com']
 }
}));

Doing this produces no errors in the browser console but my page loads blank , am I missing something ?

Here is the stuff i'm trying to import in my index.html

<script src="https://js.stripe.com/v3/"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700%7CMaterial+Icons' rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
Tcadet
  • 47
  • 1
  • 3
  • 2
    It's hard to diagnose exactly what's going on here. It's possible that you're running into [Vue + CSP issues](https://vuejs.org/v2/guide/installation.html#CSP-environments). In any case, try removing `helmet.contentSecurityPolicy` and seeing if that fixes it. Then try adding parts of it back, piece by piece, until you reproduce the problem. – Evan Hahn Jul 23 '18 at 15:57

1 Answers1

-2

Solved my issue by adding "'unsafe-eval'" to my scriptSrc

Tcadet
  • 47
  • 1
  • 3
  • You should look at the Network and the Console tab in the developer tools and see what requests were getting blocked, then only add those origins that you need to `script-src`. While it doesn't totally negate the benefits, adding 'unsafe-eval' does reduce a lot of the good that CSP does. – Nick Sweeting Mar 11 '21 at 17:23