一、跨域安全限制（同源策略）
同源：协议+主机+端口相同
同源策略阻止从一个源加载的文档或脚本获取或设置从另一个源加载的文档的属性。
这种限制可以防止某些恶意攻击，但也会带来诸多不便。
解决方法：
1、document.domain + iframe （子域名代理）
1.1 知识点
（1）某一页面的domain默认等于window.location.hostname
（2）主域名是不带有www前缀的，带前缀的通常都为二级域名或多级域名
（3）domain只能设置主域名
1.2 对于主域相同，子域相同的情况
父页面、子页面同时设置 document.domain = "parent.com"
1.3 对于主域相同，子域不相同的情况
Eg：
A页面：http://www.a.com/a.html
B页面：http://blog.a.com/b.html
1.4 问题
（1）安全性：如果一个站点被攻击（b.a.com）,另一站点（c.a.com）也会引起安全漏洞；
（2）安全性的连锁危机：如果一个页面引入多个iframe，要想操作所有iframe，必须得设置相同的domain。
2、JSOP
2.1 原理：浏览器对script标签跨域没有限制，它是一个无关标准，使用脚本标签来跨域获取数据的技术。
2.2 具体实现
（1）客户端通过script的src属性，实现不同域服务端接口请求；
（2）客户端将需要发送的数据放置在url串中，并通过一个callback参数告诉服务器将返回的数据封装在此方法中，
（3）服务器收到请求，将数据以json格式包裹在callback方法中然后返回；
（4）callback对应客户端的一个可执行的js方法，通过callback方法的执行，客户端获得了服务器返回的数据。
2.3 问题
（1）只支持get方法，携带信息量有限
（2）JSONP挟持
3、CORS（跨资源共享）
3.1 原理：CORS是一种W3C标准，它定义了浏览器与服务器如何通过可控的方式进行跨域通信。
3.2 兼容性：
（1）IE8通过XDR(XDomainRequest)支持CORS
（2）其它浏览器通过XHR（XMLHttpRequest）对象实现对CORS的原生支持
3.3 实现
（1）浏览器：请求头加上 Origin: http://www.codingplayboy.com
（2）服务器：响应头加上 Access-Control-Allow-Origin: http://www.codingplayboy.com
对于公共资源且允许任何源请求数据，服务器通常返回该值为通配符* Access-Control-Allow-Origin: *
3.4 问题
3.4.1 安全限制
（1）不能通过SetRequestHeader()设置HTTP自定义头部信息；
（2）默认不发送和接受cookie
3.4.2 解决方法
（1）服务端设置：Access-Control-Allow-Credentials: true
（2）客户端设置：xhr.withCredentials = true
4、postMessage
Html5的 window.postMessage 是一个基于事件的消息API
5、代理
（1）开发环境：利用webpack-dev-server的proxy属性；
（2）线上环境：利用Nginx进行代理。
二、XSS跨站脚本攻击（JS代码注入）
1、输入检查：主要放在服务端，前端所能做的是一些防止用户误操作的检查。
2、输出检查：涉及HTML标签、属性输出需要进行HTMLEncode；涉及script标签、事件输出需要进行JavascriptEncode。
流行的MVVM框架或者模板引擎默认会进行输出转义。
3、url参数：避免在url直接获取信息并展示，最好由服务端提供，前端进行转义后再输出。
4、涉及敏感信息的cookie设置HttpOnly，不允许js读取。
三、CSRF跨站请求伪造【也被称为“One Click Attack”】
其实就是网站中的一些提交行为，被黑客利用，你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上(如：你所使用的网络银行的网站。
1、合理使用post请求
我们日常的开发，还是要遵循提交业务，严格按照post请求去做的。更不要使用jsonp去做提交型的接口，这样非常的危险
2、验证码
3、引入token认证机制
最简单的办法就是加验证码，这样除了用户，黑客的网站是获取不到用户本次session的验证码的。但是这样也会降低用户的提交体验，特别是有些经常性的操作，如果总让用户输入验证码，用户也会非常的烦。另一种方式，就是在用访问的页面中，都种下验证用的token，用户所有的提交都必须带上本次页面中生成的token，这种方式的本质和使用验证码没什么两样，但是这种方式，整个页面每一次的session，使用同一个token就行，很多post操作，开发者就可以自动带上当前页面的token。如果token校验不通过，则证明此次提交并非从本站发送来，则终止提交过程。如果token确实为本网站生成的话，则可以通过。
四、HTTP挟持
1、页面被嵌入到iframe框架中
how：
if (window.top !== window.self) {
top.location.href = location.href
}
2、页面被注入DOM元素
3、使用https（成本高，速度慢）
如果网站无法使用https，页面表单提交部分可使用非对称加密（客户端加密，然后只有服务端才能解开）
五、控制台注入
console.info(“提醒”)
来源：https://www.cnblogs.com/webenjoy/p/12162727.html