0

I have this meta on my HTML

<meta http-equiv="Content-Security-Policy" content="default-src *;script-src *">

I'm using ParcelJS as bundler. While using the development server everything works. But after bundling the project and running it on the browser I get:

Refused to load the script 'https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

meet:1 Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.8.2/angular-animate.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

meet:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

app.js:28 Uncaught ReferenceError: angular is not defined
    at app.js:28

Inspecting the source code I can see the CSP is there, so why I'm still getting these errors?

Complete bundled HTML:

<!doctype html><html lang="en" ng-app="app"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>AsyncMeets</title><meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin referrerpolicy="no-referrer"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"><link rel="stylesheet" href="/meet.2dfc323a.css"><script type="module" src="/meet.958fbeae.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-animate/1.8.2/angular-animate.min.js" integrity="sha512-jZoujmRqSbKvkVDG+hf84/X11/j5TVxwBrcQSKp1W+A/fMxmYzOAVw+YaOf3tWzG/SjEAbam7KqHMORlsdF/eA==" crossorigin referrerpolicy="no-referrer"></script></head><body id="app" ng-controller="main" ng-cloak=""> <img alt="logo" src="/logo.d363cdef.png" class="logo"> <div ng-show="appState === 'welcome'" class="slide"> <div class="container"> <h1>Hello {{data.invitation.to.name}}!</h1> <p><span class="important-text">{{data.invitation.from.name}}</span> has invited you to do an <span class="important-text">AsyncMeeting!</span></p><br> <p><span class="light-text">If this is your first time, click on <a href="">What is this?</a></span></p> <button class="continue" ng-click="setAppState('debrief')">Lets do this!</button> </div> </div> <div ng-show="appState === 'debrief'" class="slide"> <div class="container"> <h1>{{data.meeting.name}}</h1> <p>You'll need to talk about:</p> <p class="important-text">{{data.invitation.presentation.topic}}</p> <br> <p>And you'll have <span class="important-text">{{data.invitation.presentation.time}} seconds</span> to present</p> <button class="continue" ng-click="setAppState(data.meeting.challenge ? 'challenge' : 'prerecord')">Continue</button> </div> </div> <div ng-show="appState === 'challenge'" class="slide"> <div class="container"> <p>and this meeting challenge is...</p> <h1 class="animate__bounceIn">{{data.meeting.challenge.name}}</h1> <button class="continue" ng-click="setAppState('prerecord')">Continue</button> </div> </div> <div ng-show="appState === 'prerecord'" class="slide"> <div class="container"> <p class="important-text">When you are ready, press the record button</p> <p class="light-text">As always, you don't need slides! and don't worry if you mess it up, you can record it as many times as you want.</p> <button id="record-btn" class="record">Record</button> </div> </div> <div ng-show="appState === 'recording'" class="slide"> <div class="container"> <h1>{{data.invitation.to.name}} is now presenting</h1> <p class="important-text">{{data.invitation.presentation.topic}}</p> <br> <br> <p>Time remaining</p> <p class="important-text">{{remainingTime}} seconds</p> <br> <p class="light-text">something went wrong? Go back to the <a href="" ng-click="setAppState('prerecord')">recording step</a></p> </div> </div> <div ng-show="appState === 'done'" class="slide"> <div class="container"> <h1>Thank you!</h1> <p>Your presentation has been submitted, you'll receive an email when all participants presented with a link to the completed meet!</p> </div> </div> <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script></body></html>
DomingoSL
  • 14,920
  • 24
  • 99
  • 173

1 Answers1

0

As you can see in Refused to load the script ... because it violates the following Content Security Policy directive: "script-src 'self'" it's not your CSP in meta tag that blocks sources.

You publish the second CSP via HTTP header. Most likely, this is done by Helmet, which is included in the NodeJS dependencies. Helmet publishes default CSP header since v4.

If you wish to use Content-Security-Policy via meta tag, disable the contentSecurityPolicy middleware:

app.use(
  helmet({
    contentSecurityPolicy: false,
  })
);

Alternatively you can configure CSP via Helmet, it'spreferred way.

granty
  • 7,234
  • 1
  • 14
  • 21