CSP 内容安全策略

CSP.md

CSP 内容安全策略

https://developers.google.com/web/fundamentals/security/csp/

CSP 基于白名单来源，因为此方法可明确指示浏览器将特定的资源集视为可接受的资源，并拒绝其余资源。

https://developers.google.com/web/fundamentals/security/csp/

TL;DR

• 使用白名单告诉客户端允许加载和不允许加载的内容。
• 了解可使用哪些指令。
• 了解这些指令接受哪些关键字。
• 内联代码和 eval() 被视为是有害的。
• 向服务器举报政策违规行为，以免执行这些行为。

    
<meta http-equiv="Content-Security-Policy" 
content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'" />

https://github.com/xgqfrms-GitHub/webgeeker/blob/gh-pages/CSP/readme.md

如果您一定要使用它 ...

CSP Level 2 可为内联脚本提供向后兼容性，即允许您使用一个加密随机数（数字仅使用一次）或一个哈希值将特定内联脚本列入白名单。
尽管这可能很麻烦，但它在紧急情况下很有用。

要使用随机数，请为您的 script 标记提供一个随机数属性。该值必须与信任的来源列表中的某个值匹配。 例如：

<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
  ///Some inline code I cant remove yet, but need to asap.
</script>

现在，将随机数添加到已追加到 nonce- 关键字的 script-src 指令。

Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

请记住，必须为每个页面请求重新生成随机数，并且随机数必须是不可猜测的。

哈希值的工作方式与此大致相同。创建脚本自身的 SHA 哈希值并将其添加到 script-src 指令，而不是为 script 标记添加代码。
例如，假设您的页面包含以下内容：

<script>alert('Hello, world.');</script>

您的政策将包含以下内容：

Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='

以下是几点注意事项。
sha*- 前缀指定生成此哈希值的算法。 上面的示例中便运用了 sha256-。
CSP 同样支持 sha384- 和 sha512-。 生成此哈希值时 不包含 <script> 标记。
大写字母和空格也同样重要，包括前导空格或结尾空格。

使用 Google 搜索如何生成 SHA 哈希值，将会返回任何语言的解决方法。
使用 Chrome 40 或更高版本，您可以打开 DevTools，然后重新加载您的页面。
Console 标签将包含错误消息，提供每个内联脚本的正确的 sha256 哈希值。

生成 SHA 哈希值

http://www.fileformat.info/tool/hash.htm
http://www.sha1-online.com/
https://www.tools4noobs.com/online_tools/hash/
http://passwordsgenerator.net/sha512-hash-generator/
http://hash.online-convert.com/
http://www.xorbin.com/tools/sha256-hash-calculator
http://www.miniwebtool.com/sha512-hash-generator/
http://www.convertstring.com/Hash/SHA512
http://md5decrypt.net/en/Sha512/
http://md5decrypt.net/en/Password-cracking-wordlist-download/
http://www.freeformatter.com/message-digest.html#ad-output
http://www.md5calc.com/sha512

new Function ([arg1[, arg2[, ...argN]],] functionBody)

CSP: https://developers.google.com/web/fundamentals/security/csp/#eval

https://davidwalsh.name/new-function
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function
https://docs.angularjs.org/api/ng/directive/ngCsp

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function

Function 构造函数 创建一个新的Function对象。
在 JavaScript 中, 每个函数实际上都是一个Function对象。

句法
new Function ([arg1[, arg2[, ...argN]],] functionBody)
参数

arg1, arg2, ... argN
被函数使用的参数的名称必须是合法命名的。
参数名称是一个有效的JavaScript标识符的字符串，或者一个用逗号分隔的有效字符串的列表;例如“×”，“theValue”，或“A，B”。
functionBody
一个含有包括函数定义的JavaScript语句的 字符串。

demo

// 可以直接运行在 JavaScript 控制的代码例子

// 创建了一个能返回两个参数和的函数
const adder = new Function("a", "b", "return a + b");

// 调用函数
adder(2, 6);
//  8

报告

CSP 能够阻止不受信任的资源客户端，这对于您的用户来说是一个巨大的优势，而若能够向服务器返回某种通知以便您可以在第一时间发现和制止允许恶意注入的错误，更是很有帮助。因此，您可以指示浏览器将 JSON 格式的违规行为报告 POST 到在 report-uri 指令中指定的位置。

Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

报告类似如下：

{
  "csp-report": {
    "document-uri": "http://example.org/page.html",
    "referrer": "http://evil.example.com/",
    "blocked-uri": "http://evil.example.com/evil.js",
    "violated-directive": "script-src 'self' https://apis.google.com",
    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
  }
}

仅报告

如果您是刚刚开始使用 CSP，那么，在向您的用户部署严格的政策前，先评估您的应用的当前状态很重要。
作为完整部署的敲门砖，您可以要求浏览器监控某个政策，报告违规行为，但不强制执行限制。
发送 Content-Security-Policy-Report-Only 标头，而不是 Content-Security-Policy 标头。

Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;

Content Security Policy Level 2

http://caniuse.com/#search=csp

Content Security Policy 1.0

http://caniuse.com/#feat=contentsecuritypolicy

CSP 1通过将允许的脚本，样式和其他资源来源列入白名单来减轻跨站点脚本攻击。

CSP 2增加了hash-source，nonce-source和五个新的指令

https://publish.twitter.com/#
https://blog.twitter.com/2011/improving-browser-security-with-csp
https://developers.facebook.com/docs/plugins/like-button
https://developers.google.com/+/web/+1button/

Content-Security-Policy: 
default-src 'none'; 
script-src https://cdn.mybank.net; style-src https://cdn.mybank.net;
img-src https://cdn.mybank.net; 
connect-src https://api.mybank.com; child-src 'self'

Content-Security-Policy: 
default-src https:; 
script-src https: 'unsafe-inline';
style-src https: 'unsafe-inline'

Content Security Policy Level 3

W3C Working Draft, 13 September 2016

https://www.w3.org/TR/CSP3/

Content Security Policy Level 2

W3C Recommendation, 15 December 2016

https://www.w3.org/TR/CSP2/

CORS & CSP

Fetch API get json data

https://gist.github.com/xgqfrms-GitHub/840fe27cecb9e7217fb4f0b09db19406

CSP & CORS

document.readyState & DOMContentLoaded

https://gist.github.com/xgqfrms-GitHub/b0da64ef34e0ba8072de09599aeb4cbf