时间戳

首页 > 解决方案 > 内容安全策略未按预期工作

javascript - 内容安全策略未按预期工作

问题描述

我有一个角度应用程序，我收到以下Content Security Policy错误。

video.es.js:32051 Refused to create a worker from 'blob:https:/mysubdomain.mycompany.com/ff064232-41e8-4c21-82fe-4b523e4eeae1' because it violates the following Content Security Policy directive: "default-src https: 'unsafe-inline'". 
Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ video.es.js:32051
MasterPlaylistController @ video.es.js:50112
src @ video.es.js:53476
... (lines turncated)
core.js:6210 ERROR DOMException: Failed to construct 'Worker': Access to the script at 'blob:https:/mysubdomain.mycompany.com/ff064232-41e8-4c21-82fe-4b523e4eeae1' is denied by the document's Content Security Policy.
    at new <anonymous> (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:39448:40)
    at new MasterPlaylistController (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:57509:24)
    at VhsHandler.src (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:60873:38)
    at Object.handleSource (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:61403:14)
    at Html5._Tech.setSource (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:17126:30)
    at new Html5 (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:27067:13)
    at Player.loadTech_ (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:30212:18)
    at Player.src_ (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:32652:12)
    at https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:32557:25
    at setSourceHelper (https:/mysubdomain.mycompany.com/modules-presentation-presentation-module.js:17492:5)

即使我Content Security在我的 html 文件中添加了标题，浏览器似乎也无法识别它。这是我的index.html文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ITeaserApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="assets/favicon.svg">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta http-equiv="Content-Security-Policy" content="default-src http: https: data: blob: 'self' 'unsafe-eval' 'unsafe-inline'; worker-src http: https: data: blob: 'self' 'unsafe-eval' 'unsafe-inline';">
</head>
<body>
  <my-app-root></my-app-root>
</body>
</html>

我已尝试根据MDNdefault-src设置以下两者和worker-src策略。

当我在本地 (http://localhost:4200) 运行此代码时，我没有收到此错误，但仅当我通过 CDN 交付应用程序时（托管在 Cloudfront 上，由 S3 支持）。

请让我知道我是否遗漏了什么，或者我是否必须有可能解决此问题的 Cloudfront 设置。

标签： javascriptangularamazon-cloudfrontcdncontent-security-policy

解决方案

推荐阅读