EP2.内容安全标头CSP的示例

相关内容真正的权威

关于内容安全标头的相关内容，建议各位阅读以下两个页面：

• Content-Security-Policy (CSP) – HTTP 中文开发手册 – 开发者手册 – 云+社区 – 腾讯云
• 内容安全策略( CSP ) – HTTP | MDN

读上面的说明会一愣一愣的同学该如何准确添加内容安全标头呢？这便是本文的意义所在。（能读懂的就可以自己写了）

注意：内容安全标头必须包含所有样式、脚本、图片甚至音乐，不然他们将无法加载。本教程的权威性远不及以上的两位，本文如有错误请评论斧正。

内容安全标头的意义

内容安全标头的意义是防止跨站脚本攻击，关于这个攻击，我推荐非技术人员阅读前端安全系列（一）：如何防止XSS攻击？ – 美团技术团队。

普通博客的站长就当考验细心吧。

林林的不懂装懂

我们假想有一个人，名叫李四。我们将跟随李四从网站的简单到复杂写写内容安全标头。

李四刚开始直接用记事本写HTML网页，也没有写样式、脚本，图片也没有，那此时就可以使用最简单的内容安全标头：

Content-Security-Policy: default-src 'none'

李四后来在记事本中直接写脚本、样式（也就是内联），标头也该升级了：

李四的脚本或样式越写越多，后来将它们独立出了一个文件（也就是同域外部文件），表头应是：

脚本和样式越写越多，李四给网站使用了cdn，标头应是：

李四为网站使用了第三方统计（或者广告联盟的脚本），表头应是：

李四在同域下引用了图片，标头应有：

李四在不同域下（也就是图床）引用了图片，标头应有：

（位置先占着，应该不会更新了，欢迎大家补充）