即使使用超级宽松的内容安全策略，我仍然会收到违规错误

Question

我的HTML上有这个元数据

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

我使用ParcelJS作为捆绑器。使用开发服务器时，一切都会正常工作。但在捆绑项目并在浏览器上运行它之后，我得到：

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

检查源代码，我可以看到CSP在那里，那么为什么我仍然得到这些错误？

完整的捆绑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>

Answer 1

正如你在拒绝加载脚本中看到的那样...因为它违反了下面的内容安全策略指令：“脚本-src 'self'”，它不是你的CSP in meta标签来阻止来源。

您可以通过HTTP header发布第二个CSP。这很可能是由包含在NodeJS依赖项中的Helmet完成的。Helmet从v4开始发布默认的CSP报头。

如果您希望通过元标记使用内容-安全-策略，请禁用contentSecurityPolicy中间件：

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

或者你也可以通过头盔配置CSP，这是一种参考方式.