起因
以前直接在页面上发送 ajax 请求的时候，经常会遇到这种情况：
起初以为是发送的时候，缺少了什么条件，后来才发现，原来是页面上的 csp 在作怪。而 meta 标签的强大，这只是冰山一角。
说来惭愧，做了这么久的前端，一直忽视了 meta 标签的重要性。这次在文章中特别记录下来所了解到的内容，以备将来温习。
内容安全策略
当我们页面加载资源的时候，都会发起一次请求，但是有些请求未必是可靠的，也许中间信任的脚本请求了一些额外的恶意网址，那么就有可能造成网页漏洞，用户展示的内容被劫持。那么内容安全策略(CSP)就是用于修复这个问题，让资源得到许可进行加载的。
正文
如果我们新建一个 HTML 5 文件出来，一般来说会自带两个 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="img-src 'self' https://img.alicdn.com;">
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type default-style refresh | 把 content 属性关联到 HTTP 头部。 |
| name | application-name author description generator* *keywords | 把 content 属性关联到一个名称。 |
| scheme | format/URI | HTML5不支持。 定义用于翻译 content 属性值的格式。 |
首先解读一下，第一个是用于视窗自适应的调整。
第二个是内容安全策略的 HTTP 头部定义，这个会直接影响页面上的内容状态，也是页面上目前非常重要的一个属性。
我们先说第二个例子里面的 http-equiv :
http-equiv 属性提供了 content 属性的信息/值的 HTTP 头。
http-equiv 属性可用于模拟一个 HTTP 响应头。
很明显这个属性最大的作用在于，可以控制网页的 HTTP 请求行为,这是一个非常非常强力的功能。
例如刚刚例子当中，我只开放了自身网页域和 img.alicdn.com 域名下的（http不行）权限，也就意味着图片链接只允许二者之一，否则就会进入拦截！
控制台输出：
network 面板情况：
但是假如你在控制台输入：
fetch('https://img.alicdn.com/imgextra/i2/1764501833/O1CN01xdKKV31PPYT0DY3Ql_!!1764501833.jpg').then(res=>res.blob()).then(res=>res)
或者直接发送一个 ajax 请求，会发现还是可以请求到？其实这里是因为例子里面我们只规定了图片的 src 。我们可以看下全部的属性：
| 指令名 | demo | 说明 |
|---|---|---|
| default-src | 'self' cdn.example.com | 默认策略,可以应用于js文件/图片/css/ajax请求等所有访问 |
| script-src | 'self' js.example.com | 定义js文件的过滤策略 |
| style-src | 'self' css.example.com | 定义css文件的过滤策略 |
| img-src | 'self' img.example.com | 定义图片文件的过滤策略 |
| connect-src | 'self' | 定义请求连接文件的过滤策略 |
| font-src | font.example.com | 定义字体文件的过滤策略 |
| object-src | 'self' | 定义页面插件的过滤策略,如 , 或者等元素 |
| media-src | media.example.com | 定义媒体的过滤策略,如 HTML6的 , 等元素 |
| frame-src | 'self' | 定义加载子frmae的策略 |
| sandbox | allow-forms allow-scripts | 沙盒模式,会阻止页面弹窗/js执行等,你可以通过添加allow-forms allow-same-origin allow-scripts allow-popups, allow-modals, allow-orientation-lock, allow-pointer-lock, allow-presentation, allow-popups-to-escape-sandbox, and allow-top-navigation 策略来放开相应的操作 |
| report-uri | /some-report-uri | |
| base-uri | base-uri img.alicdn.com; | HTTP Content-Security-Policy base-uri指令限制可以在文档](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base)元素中使用的URL 。如果此值不存在，则允许使用任何URI。如果此指令不存在，则用户代理将使用该[元素中的值。 |
| block-all-mixed-content | 可防止在使用 HTTPS 加载页面时使用 HTTP 加载任何资产。 |
当我们使用了 default-src 之后，将会更加严格。因为将包含所有行为。
控制台：
network 面板：
反向调试绕过
可以使用代理，例如 chrome 的 Devtools 工具或者Fiddler 等其他代理工具，修改 html 返回过来的请求文件即可。
如果还发现有问题，那么可能出在了服务器返回的 headers 里面，对应做代理修改即可。
