Ho questa meta sul mio HTML
<meta http-equiv="Content-Security-Policy" content="default-src *;script-src *">
Sto usando ParcelJS come bundler. Mentre si utilizza il server di sviluppo tutto funziona. Ma dopo la creazione di pacchetti di progetto e in esecuzione sul browser mi esce:
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/[email protected]/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
Ispezionare il codice sorgente posso vedere il CSP c'è, quindi perché sto ancora ricevendo questi errori?
Completo di bundle 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/[email protected]/dist/confetti.browser.min.js"></script></body></html>