入手 CSP

背景

我在访问的小站时，屡次发现个别 js 在加载时被 Location 到了一个未知来源的广告 js 上。而我的 js 其实是可以访问的。
这种情况持续至少半年了，在我的两台电脑上都能复现。
那么这个恶意的行径，应该至少出在路由上，或者更上游的 ISP 上。不过我已黔驴技穷，无法查验根源。
但我依然需要避免这种问题。
于是我打算接入 CSP 。CSP 在我开发 Chrome 扩展时打过交道。

接入要点

• csp 可以通过 http header 设置，也可以在 html 页面内设置
• 由于我的小站部署在 github page 上，我直接通过 html 标签控制更方便，大概长这样：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

• default-src 是各种类型资源的默认项，如果设置更细节的资源规则，则会覆盖默认。default-src 'self'; 则表示默认资源只能来自宿主页面（当前页面所在的域）
• script-src 控制外部引用的 js，可以配置一级域名，不会包含二级域名；二级域名可以用通配符，如*.getcrx.cn。需要重点强调的是，指令值提供了unsafe-inline，表示允许内联加载<script></script>，比如百度统计的 sdk 加载代码，就要求在页面顶端嵌入内联<script>，我觉得这是与 CSP 设计所矛盾的。要知道有些 DNS 劫持，就是在页面内额外嵌入内联 js 代码执行。虽然不用unsafe-inline也不能完全避免这种情况，起码还是更规范一步。结合 https 来防范就更有效了。
• connect-src 控制发起接口所在域，请求方法可以是fetch/XMLHttpRequest/WebSocket/EventSource产生的
• img-src 控制图片资源的
• CSP 的指令不止我上边列出的这么多，但我的小站也就用到了这几个，暂时列举这些。

参考文档

• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP
• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/connect-src