同源策略(same-origin policy)及三种跨域方法

1.同源策略

含义:

同源是指文档的来源相同,主要包括三个方面

  • 协议
  • 主机
  • 载入文档的URL端口

所以同源策略就是指脚本只能读取和所属文档来源相同的窗口和文档的属性这样一个规定。

同源策略目的

一项政策的颁布肯定事出有因,所以同源策略也不例外,主要是出于安全性考虑,比如可以防止恶意脚本读取内容

注意:

同源策略限制的是脚本嵌入的文本来源,而不是脚本本身,理解这点特别重要。比如B主机可以通过使用(<script>标签的src)属性加载A主机的脚本,但是却不可以载入A主机的文档,这就是同源策略发挥作用了。

限制范围

非同源,共有三种行为受到限制。

(1) Cookie、LocalStorage 和 IndexDB 无法读取。

(2) DOM 无法获得。

(3) AJAX 请求不能发送。

虽然这些限制是必要的,但是有时很不方便,合理的用途也受到影响。

2.三种跨域方法

(1)设置document.domain

比如home.example.com要读取developer.example.com里面的文档,由于同源策略的限制,就无法读取,我们通过设置document.domain="example.com";这时就不再受同源策略的限制了。

(2)夸资源共享CORS(Cross-origin resource sharing)

CORS采用新的“origin:”请求头和新的Access-Control-Allow-Origin响应头来扩展HTTP。它允许服务器用头信息显示地列出源,或使用通配符来匹配所有的源并允许任何地址请求文件。

因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。

从而它允许浏览器向跨源服务器,发出XMLHttpRequest请求,克服了AJAX只能同源使用的限制。

(3)跨文档消息(cross-document messaging)

允许来自一个文档的脚本可以传递消息到另一个文档里的脚本,而不管脚本的来源是否不同,通过调用window.postMessage()方法,可以异步传递消息事件(可以使用onmessage事件处理程序函数来处理它)到窗口的文档里。

参考:

1.javascript权威指南

2.浏览器同源政策及其规避方法

3.跨域资源共享 CORS 详解

同源策略(same-origin policy)及三种跨域方法的更多相关文章

  1. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  2. js处理的8种跨域方法

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  3. 前端开发必须说的那些事之——同源策略(same origin policy)

    同源策略指的是三个相同 协议相同 域名相同 端口相同 如https://www.baidu.com/hahah.html这个网址来说 https是使用的协议,www.baidu.com是域名,端口号默 ...

  4. web三种跨域请求数据方法

    以下测试代码使用php,浏览器测试使用IE9,chrome,firefox,safari <!DOCTYPE HTML> <html> <head>     < ...

  5. jsonp的三种跨域方式

    1.通过jq的$.ajax()完成跨域,这是我比较喜欢的一种方式. 代码如下: $.ajax({ type:'get', async:true, url:'地址', dataType:'jsonp', ...

  6. AJAX四种跨域处理方法

    同源策略 同源策略 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名. ...

  7. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  8. js中几种实用的跨域方法原理详解

    这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. [转]js中几种实用的跨域方法原理详解

    转自:js中几种实用的跨域方法原理详解 - 无双 - 博客园 // // 这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同 ...

随机推荐

  1. Dell解决黑苹果网卡(BCM94352ZAE/DW1560)怎么都打不开WiFi

    Dell解决黑苹果网卡(BCM94352ZAE/DW1560)怎么都打不开WiFi 2017年10月20日17:41:00 by SemiconductorKING 本来觉得驱动这个网卡不是个问题,以 ...

  2. 1.Windows服务-->添加一个简单的服务

    Windows服务应用程序是一种需要长期运行的应用程序,它对于服务器环境特别适合.它没有用户界面,并且也不会产生任何可视输出.任何用户消息都会被 写进Windows事件日志.计算机启动时,服务会自动开 ...

  3. 读EntityFramework.DynamicFilters源码_心得_整体了解01

    前两天同事发给我一个连接地址:实体框架高级应用之动态过滤 EntityFramework DynamicFilters为什么会找到动态过滤的内容,是源于前段时间,我们想做一个个人blog 后端用.NE ...

  4. shell编程之export

    shell 与 export命令用户登录到Linux系统后,系统将启动一个用户shell.在这个shell中,可以使用shell命令 或声明变量,也可以创建并运行shell脚本程序.运行shell脚本 ...

  5. jqGrid用法汇总(全经典)

    1.支持多种类型的数据集合作为数据源 $("#grid1").jqgrid( ........ datatype: "xml", ........ ); XML ...

  6. [Java反射基础二]获取类的信息

    本文接上文“Class类的使用”,以编写一个用来获取类的信息(成员函数.成员变量.构造函数)的工具类来讲解"反射之获取类的信息" 1.获取成员函数信息 /** * 获取成员函数信息 ...

  7. mysql的with rollup

    无意间发现了mysql的with rollup函数(用在group by 函数后面) 测试 1. SELECT NAME,DATE,score FROM stu 结果是 2. SELECT NAME, ...

  8. CSS3之盒模型

    1. 什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性(存在的特点)有: content ( ...

  9. JavaScript 二维数组排列组合2

    <html> <head> <title>二维数组排列组合</title> </head> <body> <div id= ...

  10. Django—自定义分页

    分页功能在每个网站都是必要的,对于分页来说,其实就是根据用户的输入计算出应该显示在页面上的数据在数据库表中的起始位置. 确定分页需求: 1. 每页显示的数据条数 2. 每页显示页号链接数 3. 上一页 ...