`

[转]JavaScript最全的10种跨域共享的方法

阅读更多

在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意 义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?

同源策略

 

在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚 本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.example.org),那么我们就可以认为它们是相同的域。比如 http://www.example.org/index.html和http://www.example.org/sub/index.html是 同域,而http://www.example.org, https://www.example.org, http://www.example.org:8080, http://sub.example.org中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。 本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的 隐患。

 

受到同源策略的影响,跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步,目前在跨域请求的技巧上,有很多宝贵经验的沉淀和积累。这里我把跨域 资源共享分成两种,一种是单向的数据请求,还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式,以下跨域实例的源代码可以从这里获得。

单向跨域

JSONP

 

JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标 记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA 需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后 会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行, 那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

flash URLLoader

 

flash有自己的一套安全策略,服务器可以通过crossdomain.xml文件来声明能被哪些域的SWF文件访问,SWF也可以通过API来确定自 身能被哪些域的SWF加载。当跨域访问资源时,例如从域www.a.com请求域www.b.com上的数据,我们可以借助flash来发送HTTP请 求。首先,修改域www.b.com上的crossdomain.xml(一般存放在根目录,如果没有需要手动创建) ,把www.a.com加入到白名单。其次,通过Flash URLLoader发送HTTP请求,最后,通过Flash API把响应结果传递给JavaScript。Flash URLLoader是一种很普遍的跨域解决方案,不过需要支持iOS的话,这个方案就无能为力了。

Access Control

 

Access Control是比较超越的跨域方式,目前只在很少的浏览器中得以支持,这些浏览器可以发送一个跨域的HTTP请求(Firefox, Google Chrome等通过XMLHTTPRequest实现,IE8下通过XDomainRequest实现),请求的响应必须包含一个Access- Control-Allow-Origin的HTTP响应头,该响应头声明了请求域的可访问权限。例如www.a.com对www.b.com下的 asset.php发送了一个跨域的HTTP请求,那么asset.php必须加入如下的响应头:

 

header("Access-Control-Allow-Origin: http://www.a.com");

 

 

……

 

 

 

原文链接:http://www.woiweb.net/10-cross-domain-methods.html

分享到:
评论

相关推荐

    JavaScript跨域共享方法

    javascript最全的10种跨域共享的方法

    主题:javascript最全的10种跨域共享的方法.docx

    在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要...同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?

    「JavaScript」JS四种跨域方式详解

    浏览器都有一个同源策略,其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。 三、使用window.name来进行跨域 ...

    前端常见跨域解决方案(全).mht

    分享转载:前端常见跨域解决方案 1、 通过jsonp跨域 2、 document.domain + iframe跨域 3、 location.hash + ...6、 跨域资源共享(CORS) 7、 nginx代理跨域 8、 nodejs中间件代理跨域 9、 WebSocket协议跨域

    【JavaScript源代码】Ajax解决跨域之设置CORS响应头实现跨域案例详解.docx

    设置CORS响应头实现跨域 跨源资源共享(CORS) CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 ...

    js跨域资源共享 基础篇

    本文详细介绍了javascript跨域资源共享,供大家参考,具体内容如下 1.为什么提出跨域资源共享(CORS)?  因为XHR实现ajax的安全限制是:XHR 对象只能访问与包含它的页面位于同一个域中的资源 2.如何实现跨域?(跨...

    Apache中配置支持CORS(跨域资源共享)实例

    主要介绍了Apache中配置支持CORS(跨域资源共享)实例,本文给出了一个完整的apache、PHP、JavaScript结合实现的跨域资源共享实例,需要的朋友可以参考下

    guide-cors:有关如何在Open Liberty中启用跨域资源共享(CORS)的指南

    启用跨域资源共享(CORS) 笔记该存储库包含指南文档源。 要以已发布的形式查看该指南,请在上进行查看。 了解如何在Open Liberty中启用跨源资源共享(CORS),而无需编写Java代码。您将学到什么您将学习如何添加两...

    JSONP 跨域共享信息

    用 JSONP 抓到的资料并不是 JSON,而是任意的 JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。 下面是我在一个项目中的应用: 描述:域名dev.uc.everychina.com 要获得域名 dev.members.ever

    PostEvent:跨域事件处理程序javascript库。 纯香草JS,无依赖性

    介绍该库的初衷是一个简单的目标:提供一种处理事件的简单方法,而无需付出多次编写特殊代码的麻烦,以防万一我们处于跨域情况。 向PostEvent打个招呼。功能集跨域如果iFrame不共享相同的原始URL,或者标头未设置为...

    JS跨域解决方案之使用CORS实现跨域

    跨域是我在日常面试中经常会问到的问题,这词在前端界出现的频率不低,主要原因还是由于安全限制(同源策略, 即JavaScript或Cookie只能访问同域下的内容),因为我们在日常的项目开发时会不可避免的需要进行跨域操作...

    详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    目录 一、AJAX示例 1.1、优点 1.2、缺点 1.3、jQuery AJAX示例 二、延迟对象(Deferred) 2.1、回调函数 ...AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网

    cross-domain-storage:跨域localStorage

    允许跨域共享本地存储。 使用主机授予对本地存储的访问权限。 使用来宾来访问主机上的本地存储。安装npm我跨域存储用法主持人var createHost = require ( 'cross-domain-storage/host' ) ;主机(allowedDomains) ...

    seance:前端的跨域状态共享

    Séance可以通过浏览器的本地存储实现跨域状态共享。 Séance可以由任意多个域达成协议。 一个Seance实例在您要用作提供者的域上初始化。 订阅此共享状态的每个域都会注册一个Medium ,从而允许其观察共享状态并对...

    AngYony#ay-treasure-tool#CORS-跨域资源共享1

    public class CorsConfig {public CorsConfig() { }// 1. 添加cors配置信息// 设置是否发送cookie信

    ExtJS4中文教程2 开发笔记 chm

    JavaScript的10种跨域共享方法 JavaScript类型总览 JavaScript获取文本框光标的像素位置 js函数match、exec、test、search、replace、split使用介绍 技巧:Javascript使用隐藏的new来创建对象 禁止页面全选复制,...

    scol-r:共享的跨域学习资源

    斯科尔SCOL-R(可共享的跨源学习资源)可帮助您通过SCORM API将教学内容与LMS连接,即使两者位于不同的域中也是如此。 开始: 在的body的data-source属性中设置远程内容的URL。 编辑以编辑课程标题和标识符以及元...

    disable-cors:一个 Firefox 扩展,将禁用当前选项卡的跨域资源共享 (CORS)

    禁用-cors 将禁用当前选项卡的跨域资源共享 (CORS) 的 Firefox 扩展。下载已编译的插件

    Ajax请求WebService跨域问题的解决方案

    (2) CROS:跨域资源共享 以下为CROS解决方案:  a.在WebService接口加上响应头信息:  b.在web.config文件中加上相关配置节信息: 运用a或者b的解决方案后,浏览器头信息中变动如下: 最终问题得以较好的解决,...

Global site tag (gtag.js) - Google Analytics