HTML中如何编写Content-Security-Policy？其取值是链接还是关键词？

你给出的示例代码如下：

<meta http-equiv="content-security-policy" content="default-src 'self' example.com *.example.com">

这段代码的实际作用 #

这行meta标签给当前网页设置了默认的资源加载白名单，所有类型的外部资源（JS脚本、CSS样式、图片、字体、嵌入的iframe等），只有来自白名单范围内的来源才允许加载，不在名单里的资源浏览器会直接拦截，主要用来防范恶意脚本注入、非法资源挂载这类安全问题。

核心问题解答 #

• 为什么加了'self'还要额外写域名？
  'self'的权限非常严格，只允许加载和当前网页完全同源的资源——也就是协议、域名、端口三个必须全和当前网页一致才算合规。实际开发网站时，很少把所有资源都存在和网页同一个域名下：比如会把图片放专门的图床域名、静态文件放CDN域名、用第三方服务的统计脚本，这些资源的域名和当前网页不一样，光靠'self'会把这些合法资源全拦掉，导致网站显示/功能异常，所以必须把你信任的这些外部资源所属的域名加到白名单里。

• 写在取值里的域名到底是什么？需要写带协议的完整链接吗？
  这些域名不是具体的某一个JS/CSS文件的地址，也不需要写带https://的完整链接，就是信任的资源来源域名匹配规则，浏览器加载资源的时候会自动核对资源本身的来源域名，只要匹配上规则就放行：

  • 写example.com：代表所有来源是example.com根域名的资源都允许加载，不限制http/https协议
  • 写*.example.com：是通配符写法，代表example.com下所有级别的子域名来源都放行，比如static.example.com、img.example.com、a.b.example.com这些都符合规则
  • 只要域名匹配，这个域名下任意路径的任意合法资源（不管是JS、CSS还是图片）都可以正常加载，不需要单独给每个文件加规则

新手容易踩的注意点 #

• CSP的特殊关键字（比如'self'、'none'、'unsafe-inline'）两边的单引号不能漏写，漏写之后浏览器会把它当成普通域名识别，规则直接失效
• 域名类规则默认不会限制端口和协议，如果你要限制只允许https协议的资源，可以写成https://example.com的形式，零基础阶段先记基础写法就行

内容的提问来源于stack exchange，提问作者sara