浏览器的同源策略和解决方案
同源的定义
如果两个页面的协议、域名和端口(如果有指定)都相同,则两个页面具有相同的源。
举个例子:
下表给出了相对于 http://a.yumin.com/dir/page.html 同源检测的示例:
URL | 结果 | 原因 |
---|---|---|
http://a.yumin.com/dir2/other.html | 成功 | |
http://a.yumin.com/dir/inner/another.html | 成功 | |
https://a.yumin.com/secure.html | 失败 | 协议不同(https和http) |
http://a.yumin.com:81/dir/etc.html | 失败 | 端口不同(81和80) |
http://a.other.com/dir/page.html | 失败 | 域名不同(yumin和other) |
同源策略是什么
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以yumin.com下的js脚本采用ajax读取other.com里面的文件数据是会被拒绝的。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
不受同源策略限制的情况
页面中的链接,重定向以及表单提交是不会受到同源策略限制的。
跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的
<script src="..."></script>
,<img>
,<link>
,<iframe>
等。
举例说明
JSONP解决跨域问题
jsonp原理解析
细心点的同学应该会发现我们的demo1项目其实已经接收到了请求并返回了响应,是浏览器对非同源请求返回的结果做了拦截。
再细心点的同学会发现,我们使用cdn方式引用的jQuery文件也是跨域的,它就可以使用。
同样是从其他的站点拿东西,script标签就可以。那我们能不能利用这一点搞点事情呢?
jQuery中getJSON方法
jQuery中有专门的方法实现jsonp。