什么是同源策略
一个源的定义
如果协议，端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源。
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
什么是跨域？跨域有几种实现形式
出于安全方面考虑，浏览器根据同源策略来限制不同源的页面之间的交互，虽然这些限制是必要的，但是有时很不方便，合理的用途也受到影响，跨域就是去规避浏览器同源策略的限制来实现你想要的功能，目前跨域一般使用JSONP与CORS，特殊情况下有降域与postMessage等方法
JSONP 的原理是什么
由于同源策略使得网页无法访问与其不同源的网页的内容，但是在web页面中，js文件的调用不受同源策略的影响，因此可以在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据,为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
CORS是什么
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest
请求，从而克服了AJAX只能同源使用的限制。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。（浏览器必须IE10以上才支持）
降域
相同父级域名下的两个子页面需要相互访问时使用document.domain = 'xxx.com'(相同的父级域名)即可`
//页面A
<body>
<div class="main">
<input type="text" placeholder="http://a.jrg.com/a.html">
</div>
<iframe src="http://b.jrg.com/b.html" frameborder="1"></iframe>
<script>
document.querySelector('.main input').addEventListener('input', function () {
window.frames[0].document.querySelector('input').value = this.value
})
document.domain = 'jrg.com'
</script>
</body>
/////////////////////////////////////////////////
<body>//页面B
<div class="ct">
<input type="text" placeholder="http://b.jrg.com/b.html">
</div>
<script>
document.querySelector('input').addEventListener('input', function () {
window.parent.document.querySelector('input').value = this.value
})
document.domain = 'jrg.com'
</script>
</body>
网友评论