浏览器的同源策略和解决方案

六月ゝ 毕业季﹏ 提交于 2019-12-06 14:10:16

浏览器的同源策略和解决方案

同源的定义

如果两个页面的协议、域名和端口(如果有指定)都相同,则两个页面具有相同的源。

举个例子:

下表给出了相对于 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里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

不受同源策略限制的情况

  1. 页面中的链接,重定向以及表单提交是不会受到同源策略限制的。

  2. 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script><img><link><iframe>等。

举例说明

JSONP解决跨域问题

jsonp原理解析

细心点的同学应该会发现我们的demo1项目其实已经接收到了请求并返回了响应,是浏览器对非同源请求返回的结果做了拦截。

再细心点的同学会发现,我们使用cdn方式引用的jQuery文件也是跨域的,它就可以使用。

同样是从其他的站点拿东西,script标签就可以。那我们能不能利用这一点搞点事情呢?

jQuery中getJSON方法

jQuery中有专门的方法实现jsonp。

CORS解决跨域问题

CORS简介

简单请求和非简单请求介绍

简单请求的处理方式

非简单请求的处理方式

使用django-cors-headers

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!