一、同源策略与跨站脚本攻击
JavaScript 的同源策略，是由Netscape提出的一个著名的安全策略，为了阻止A站的JS去操作别的网站的数据。你想啊，你现在打开了浏览器，在一个tab窗口中打开了银行网站，在另外一个tab窗口中打开了一个恶意网站，而那个恶意网站挂了一个的专门修改银行信息的JavaScript，当你访问这个恶意网站并且执行它JavaScript时，你的银行页面就会被这个JavaScript修改（比如说获取你的卡号和密码，又或者是转账到黑客的账户上等等），后果会非常严重！而同源策略就为了防止这种事情发生，它规定了A网站下的JS文件只能操作A网站下的数据，不能去操作B网站的数据。
二、跨域方式总结
场景1-JSONP JSON with padding
JSONP由两部分组成:回调函数和数据。通过动态创建script，再请求一个带参网址实现跨域通信，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
优势：前后端易实现，兼容性好。
问题：1、只能实现get请求2、不便处理接口错误 3、接口并发请求时，回调名必须不同
场景2-document.domain
有一个页面是http://www.example.com/a.html,
在这个页面中还有一个http://www.child.example.com/b.html，
很显然，a.html与b.html是不同域的，所以我们无法通过在页面中书写js代码来获取iframe中的东西，但是，如果我们把这2个页面的document.domain都设置成相同的域名就可以了，需要注意的是，我们只能把document.domain设置成自身或更高一级的父域，且主域名必须相同。
优势：document.domain适用于主域相同，不同子域的框架之间的交互。
问题：非不同子域框架间无效。在file（本地文件访问）情况下，设置domain失效。
场景3-window.postMessage
postMessage是HTML5中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
a.） 页面和其打开的新窗口的数据传递
b.） 多窗口之间消息传递
c.） 页面与嵌套的iframe消息传递
d.） 上面三个场景的跨域数据传递
场景4-window.name
window对象有个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的。
场景5-CORS跨域资源共享
跨域资源共享定义了在必须访问跨域资源的时，浏览器与服务器应该如何沟通。他的原理是使用自定义的 HTTP 头部，让服务器与浏览器进行沟通，主要是通过设置响应头的 Access-Control-Allow-Origin 来达到目的的。
优势：支持get、post各种请求方法。
问题：兼容性，浏览器不能低于IE10。需要服务端设置报文头部。
场景6-反向代理跨域
同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
实现思路：通过配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口。
优势：不存在前端跨域问题，服务器间接口调用效率可以提高
问题：多配置一台服务器，成本较高。
场景7- WebSocket协议
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
优势：跨域、全双工、服务器推送
问题：需要服务器配套协议支持
场景8- location.hash + iframe跨域
实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
三、工作中的实例
1、Iframe在网络协议中的跨域document.domain
异步上传文件的方式：
1、ajax2级，实现post发送，真正的异步发送，但有兼容性问题。
2、ajaxfileupload.js使用iframe实现异步上传。当需要用到跨域时要做修改。
2、Iframe在file协议中的跨域postMessage
在一个c++客户端，内嵌html页面时，iframe之间的通信在file协议下收到限制
3、Canvas读取图片数据cors
为了实现在前端将图片黑白化处理，用到canvas读取图片。图片缓存服务器通常会跨域。
4、JSOP使用过程，回传格式有误
回传必须是函数包裹数据，后端可能会失误，漏掉。或者回调名不变，当并发请求时会报错。
5、Img错误汇报，统计计数
前端性能监控，错误监控，埋点计数等，使用图片的请求将数据发送回服务端。
6、服务器反向代理，vue开发脚手架
在本地开发Vue项目时，可以启用脚手架的代理服务，完成跨域访问测试环境。
原文地址：https://www.cnblogs.com/banyue/p/8687421.html