为 CDN 实施正确的 CSP 规则

Question

我目前正在我的大学学习移动 Web 应用程序开发课程，并且正在努力在我的秘银应用程序上设置引导程序。

我之前在 “正常” Web 应用程序上设置了引导程序，但我很难理解如何在我的 Mithril.js 应用程序中正确设置内容安全策略。

应该注意的是，这不是我当前任务的必需部分，但我宁愿尝试自己理解 CSP 的概念，因为理解它非常重要（OWASP top 10，哟！）。

所以我不是要求任何人帮助我完成一项任务，而是帮助我了解我在 CSP 的课外应用中哪里出了问题。

---

这就是我的 CSP 现在的样子：

<meta http-equiv="Content-Security-Policy" 
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
         style-src 'self' 'unsafe-inline' http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css;
         media-src *; img-src 'self' data: content:;
         script-src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
         http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js;">

CDN 网址工作正常，目前已在我设置的多个其他网站上实施，但在 Chrome 上检查控制台时出现这些错误：

拒绝加载脚本“http://localhost:8013/cordova.js”，因为 它违反了以下内容安全政策指令： “脚本-src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"。

index.html:1 拒绝加载脚本 'http://localhost:8013/bin/app.js' 因为它违反了以下规定 内容安全策略指令：“script-src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"。

jquery.min.js:2 拒绝加载字体 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2' 因为它违反了以下内容安全政策指令： “default-src 'self' 数据：差距：https://ssl.gstatic.com'unsafe-eval'”。 注意 'font-src' 没有显式设置，所以使用了 'default-src' 作为后备。

(匿名)@jquery.min.js:2 jquery.min.js:2 拒绝加载字体 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff' 因为它违反了以下内容安全政策指令： “default-src 'self' 数据：差距：https://ssl.gstatic.com'unsafe-eval'”。 注意 'font-src' 没有显式设置，所以使用了 'default-src' 作为后备。

(匿名)@jquery.min.js:2 jquery.min.js:2 拒绝加载字体 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf' 因为它违反了以下内容安全政策指令： “default-src 'self' 数据：差距：https://ssl.gstatic.com'unsafe-eval'”。 注意 'font-src' 没有显式设置，所以使用了 'default-src' 作为后备。

（匿名）@ jquery.min.js:2 http://localhost:8013/favicon.ico 失败 加载资源：服务器响应状态为 404（不是 找到）

Answer 1

在我们的聊天中也回答了这个问题，但对于其他人来说，这里是简短的答案。把你的url放到'unsafe-inline'前面的css文件中，所以是

style-src 'self' bootstrap.css 'unsafe-inline';

在 jquery 和 bootstrap.js 之前，您需要在 script-src 中使用“self”。