`

[转]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最全的10种跨域共享的方法.docx

    【标题】:JavaScript中最全面的10种跨域共享技术详解 在JavaScript和其他客户端编程语言中,同源策略是保障网络安全的重要机制。它规定,来自不同源(协议、域名或端口不同)的脚本之间不能互相访问对方的大部分...

    (转)10种方式实现跨域资源的共享

    标题"10种方式实现跨域资源的共享"暗示了我们将探讨多种克服同源策略限制的方法。以下是一些主要的跨域资源共享实现方式: 1. **JSONP(JSON with Padding)**: JSONP是一种较早的跨域方法,通过动态插入`<script>`...

    跨域共享session (实现http跳转https 共享session)

    但是,为了提供更好的用户体验,特别是在单点登录(Single Sign-On, SSO)场景下,跨域共享session变得非常重要。 **一、跨域共享session原理** 1. **JSONP(JSON with Padding)**:JSONP是一种早期的跨域解决方案...

    javascript插件 解决双向跨域问题

    jcrossdomain是一个专门用于解决JavaScript跨域问题的工具,尤其适用于需要双向通信的场景。它通过创建隐藏的IFrame和利用window.postMessage API来实现跨域通信。window.postMessage是HTML5引入的一个API,允许来自...

    javascript跨域方案总结

    JavaScript跨域方案是Web开发中的一个重要主题,尤其是在构建现代Web应用程序时。由于浏览器的安全策略,JavaScript在不同域名之间默认不允许进行通信,这就是所谓的“同源策略”。然而,开发者经常需要在多个域之间...

    arcgis api for javascript跨域处理方案

    在使用ArcGIS API for JavaScript开发Web应用程序时,经常会遇到跨域问题。这是因为浏览器的安全策略限制了JavaScript从一个源(域名、协议或端口)请求另一个源的数据。ArcGIS API for JavaScript是一个强大的工具...

    javascript/jquery 跨域访问

    JavaScript 和 jQuery 是Web开发中广泛使用的两种技术,它们在实现跨域访问方面起着关键作用。跨域访问是Web应用程序中常见的需求,特别是在Ajax请求、API调用或数据共享时。由于浏览器的安全策略,不同域名、协议或...

    javascript跨域访问的方法.pdf

    以下是两种主要的JavaScript跨域技术:基于iframe的跨域和JSONP(JSON with Padding)。 1. 基于iframe实现跨域: 当两个页面的基础域相同,如aa.xx.com和bb.xx.com,可以通过设置`document.domain`来实现跨子域的...

    javascript跨域的方法汇总.docx

    JavaScript跨域是Web开发中一个常见的挑战,主要是由于浏览器的安全策略——同源策略(Same-origin policy)限制。同源策略要求网页只能访问与其自身URL协议、域名和端口完全相同的资源,以防止恶意脚本窃取数据。...

    Javascript跨域访问解决方案

    总结来说,JavaScript跨域访问有多种解决方案,开发者应根据具体需求和环境选择合适的方法。JSONP适合简单的GET请求,CORS更通用且安全,代理服务器适用于服务器无跨域控制能力的情况,WebSocket则适用于需要实时...

    iframe 跨域解决方法

    解决`iframe`跨域问题有多种方法: 1. **使用`CORS`(跨源资源共享)**:服务器可以通过设置响应头`Access-Control-Allow-Origin`来允许特定的源访问其资源。例如,`Access-Control-Allow-Origin: *`表示允许所有源...

    解决跨域的几种方法.zip

    每种方法都有其适用场景和优缺点,开发者需要根据实际需求选择合适的跨域解决方案。例如,CORS和JSONP适合大部分情况,但CORS需要服务器配合,而JSONP仅限GET请求;IFrame适合处理跨域的嵌入内容;postMessage适用于...

    JavaScript跨域总结

    JavaScript跨域总结 在Web开发中,由于浏览器的同源策略限制,JavaScript代码通常只能访问与自身页面协议、域名和端口完全相同的资源。这种安全机制是为了防止恶意脚本通过跨站点请求获取用户敏感信息。然而,随着...

    CORS跨域资源共享及解决方案.docx

    ### CORS跨域资源共享及其解决方案详解 #### 一、CORS跨域资源共享背景 在现代Web应用开发中,前后端分离已成为一种主流趋势。在这种模式下,前端负责展示...开发者可以根据实际情况选择最合适的方法来解决跨域问题。

    什么是跨域?跨域解决方法.docx

    4. CORS(Cross-Origin Resource Sharing),是跨域资源共享的缩写,是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。 六、设置 document.domain 解决无法读取非同源网页的 Cookie 问题 可以通过设置相同的 ...

    iframe 跨域访问session

    6. **服务器端代理**:最安全且可靠的方法是不在客户端处理跨域`session`,而是通过服务器端的代理。例如,服务器可以接收来自`iframe`的请求,然后转发到实际的目标,并在响应中包含`session`信息。 在提供的文件...

    JAVA前后台跨域的两种方法(详细步骤)

    在现代Web开发中,跨域资源共享(CORS)是一个常见的需求,特别是在使用JavaScript进行前后端分离的架构下。本文将详细介绍两种在JAVA后台处理跨域问题的方法,以便于前端和后端之间的数据交互。 方法一:CORS ...

    跨域引用资源技术

    跨域引用资源技术是Web开发中的一个重要概念,它涉及到浏览器的同源策略和资源的共享。同源策略是由浏览器强制实施的一种安全策略,确保JavaScript只能访问与当前页面同源(即相同协议、相同域名和相同端口)的网页...

Global site tag (gtag.js) - Google Analytics