同源策略(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. 点击select下拉框,触发事件

    <div class="controls moneycheck floatleft"> <select class="span12 chosen_cat ...

  2. mysql8.0 安装 修改密码 允许远程连接

    转自:https://www.cnblogs.com/xyabk/p/8967990.html mysql从5.7一下子跳跃到了8.0,其中的改变还是很大,有点这里就不说了,小伙伴们自己去百度了解一下 ...

  3. CXF生成客户端遇到的问题

    一.CXF环境配置路径错误 1.错误现象 在命令行中输入 wsdl2java -v 检查CXF安装是否正确. 出现错误=> ERROR: Unable to find cxf-manifest. ...

  4. 用图片替代cursor光标样式

    鼠标光标样式有限,可参考http://css-cursor.techstream.org/,自定义光标样式可用设置cursor:url('xxx.cur'),auto;.还有一种办法,就是用图片替代鼠 ...

  5. Golang 的 TOML库

    TOML 的全称是 Tom's Obvious, Minimal Language,因为它的作者是 GitHub 联合创始人 Tom Preston-Werner. TOML 的目标是成为一个极简的配 ...

  6. 利用setTimeoutc处理javascript ajax请求超时

    用过jquery的人都知道里面的$.ajax能设置超时处理及各种错误的抛出,确实好用.原生的js没有对应的方法,还得写各种兼容.在实际运用中,不管请求是否成功都应该做容错处理, 不然用户不知道到底发生 ...

  7. 简单理解C#中的抽象工厂模式是什么概念!

    抽象工厂模式向客户端提供一个接口,使得客户端在不必指定具体类型的情况下,创建多个产品族中的对象.本文采取的仍然是接着以前的那个快餐店的例子.现在,快餐店经常良好,逐渐发展壮大,为了适合不同地方人的饮食 ...

  8. 《火星救援》NASA惊现lisp

    duang-跳出个界面上面一个lisp程序.

  9. HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  10. 【阿里云产品公测】OpenSearch初体验

    OpenSearch是一个非常有意义的功能,对于很多数据量较大的站点, SF2<   如果搜索功能自己做的话,或者用数据库里的查询语句,首先效率低下,而且占用资源. ); <Le6   另 ...