前端安全相关的知识体系
1、跨站脚本攻击 XSS
2、跨站请求伪造 CSRF
3、点击劫持 ClickJacking
4、HTTP 严格传输安全 HSTS
5、CDN 劫持
6、内容安全策略 CSP
7、安全沙箱 Sandbox
8、Iframe
CDN 劫持
1、什么是 CDN ？
CDN Content Delivery Network，内容分发网络
具体来说，CDN 就是采用更多的缓存服务器 【 CDN 边缘节点 】，布放在用户访问相对集中的地区或网络中。当用户访问网站时，利用全局负载技术，将用户的访问指向距离最近的缓存服务器上，由缓存服务器响应用户请求。CDN 应用广泛，支持多种行业、多种场景内容加速，例如：
图片小文件、大文件下载、视音频点播、直播流媒体、全站加速、安全加速
2、什么是 CDN 劫持 ？
网络上有很多黑客为了让用户能够登录自己开发的 钓鱼网站 ，都会通过对 CDN 进行劫持的方法，让用户自动转入自己开发的网站
3、CDN 劫持的防范措施
使用 SRI 来解决 CDN 劫持
SRI 全称 Subresource Integrity - 子资源完整性，是指浏览器通过验证资源的完整性（通常从 CDN 获取）来判断其是否被篡改的安全特性
通过给 link 标签或者 script 标签增加 integrity 属性即可开启 SRI 功能，比如
<script type="text/javascript" src="//s.url.cn/xxxx/aaa.js"
integrity="sha256-xxx sha384-yyy" crossorigin="anonymous">
</script>
开启 SRI 能有效保证页面引用资源的完整性，避免恶意代码执行
浏览器如何处理 SRI
1、当浏览器在 script 或者 link 标签中遇到 integrity 属性之后，会在执行脚本或者应用样式表之前对比所加载文件的哈希值和期望的哈希值。
2、当脚本或者样式表的哈希值和期望的不一致时，浏览器必须拒绝执行脚本或者应用样式表，并且必须返回一个网络错误说明获得脚本或样式表失败
Iframe 威胁
1、Iframe 威胁的原理
iframe 中的内容是由第三方来提供的，默认情况下他们不受我们的控制，他们可以在 iframe中运行 JavaScirpt 脚本、Flash 插件、弹出对话框等等，这可能会破坏前端用户体验
2、如何让自己的网站不被其他网站的 iframe 引用 ？
1、js 的防御方案
<script>
if (self == top) {
var theBody = document.getElementsByTagName('body')[0];
theBody.style.display = "block";
} else {
top.location = self.location;
}
</script>
这段代码放到网站页面的 </body> 标签前，这样别人在通过 iframe 框架引用你的网站网页时，浏览器会自动跳转到你的网站所引用的页面上
2、使用 X-Frame-Options 防止网页被 iframe
X-FRAME-OPTIONS 是微软提出的一个 http 头，专门用来防御利用 iframe 嵌套的点击劫持攻击
DENY 拒绝任何域加载
SAMEORIGIN 允许同源域下加载
ALLOW-FROM 可以定义允许frame加载的页面地址
3、禁止被使用的 iframe 对当前网站某些操作 - 设置 sandbox 属性
sandbox 是 html5 的新属性，主要是提高 iframe 安全系数
安全沙箱 - Sandbox
多进程的浏览器架构将主要分为两块：浏览器内核和渲染内核。而安全沙箱能限制了渲染进程对操作系统资源的访问和修改，同时渲染进程内部也没有读写操作系统的能力，而这些都是在浏览器内核中一一实现了，包括持久存储、网络访问和用户交互等一系列直接与操作系统交互的功能。浏览器内核和渲染内核各自职责分明，当他们需要进行数据传输的时候会通过 IPC 进行
安全沙箱的存在是为了保护客户端操作系统免受黑客攻击，但是阻止不了 XSS 和 CSRF