js跨域解决方案

《js跨域解决方案》由会员分享，可在线阅读，更多相关《js跨域解决方案（15页珍藏版）》请在金锄头文库上搜索。

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

2、离的，一个域的脚本不能访问和操作另 外一个域的绝大部分属性和方法。那么什么叫相同域，什 么叫不同的域呢？当两个域具有相同的协议(如 http), 相 同的端口(如 80)，相同的 host（如)，那么我们就可以认 为它们是相同的域。比如 和是同域，而, , , 中的任何两 个都将构成跨域。同源策略还应该对一些特殊情况做处理， 比如限制 file 协议下脚本的访问权限。本地的 HTML 文件 在浏览器中是通过 file 协议打开的，如果脚本能通过 file 协议访问到硬盘上其它任意文件，就会出现安全隐患，目 前 IE8 还有这样的隐患。 受到同源策略的影响，跨域资源共享就会受到制约。 但是随着人

3、们的实践和浏览器的进步，目前在跨域请求的 技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资 源共享分成两种，一种是单向的数据请求，还有一种是双 向的消息通信。接下来我将罗列出常见的一些跨域方式， 以下跨域实例的源代码可以从这里获得。 JavaScript 出于安全方面的考虑，不允许跨域调用其 他页面的对象。但在安全限制的同时也给注入 iframe 或是 ajax 应用上带来了不少麻烦。这里把涉及到跨域的一些问 题简单地整理一下： 首先什么是跨域，简单地理解就是因为 JavaScript 同源策略的限制， 域名下的 js 无法操作或是域名下的对 象。更详细的说明可以看下表： 特别注意两点： 第

4、一，如果是协议和端口造成的跨域问题“前台”是 无能为力的， 第二：在跨域问题上，域仅仅是通过“URL 的首部” 来识别而不会去尝试判断相同的 ip 地址对应着两个域或两 个域是否在同一个 ip 上。 “URL 的首部”指 +，也可以理 解为“Domains, protocols and ports must match” 。 接下来简单地总结一下在“前台”一般处理跨域的办 法，后台 proxy 这种方案牵涉到后台配置，这里就不阐述 了，有兴趣的可以看看 yahoo 的这篇文章：JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest

5、 Calls 对于主域相同而子域不同的例子，可以通过设置的 办法来解决。具体的做法是可以在/和 p 上的 = ; var ifr = (iframe); = p / 在这里操纵 alert(“h1“) 0.childNodes0.nodeValue); ; 上的 = ; 这种方式适用于, , , 中的任何页面相互通信。 备注：某一页面的 domain 默认等于。主域名是不带 www 的域名，例如，主域名前面带前缀的通常都为二级域名 或多级域名，例如 其实是二级域名。 domain 只能设置为主域名，不可 以在中将 domain 设置为。 问题： 1、安全性，当一个站点（）被攻击后，另一个站点

6、（）会引起安全漏洞。 2、如果一个页面中引入多个 iframe，要想能够操作 所有 iframe，必须都得设置相同 domain。 虽然浏览器默认禁止了跨域访问，但并不禁止在页面 中引用其他域的 JS 文件，并可以自由执行引入的 JS 文件 中的 function（包括操作 cookie、Dom 等等） 。根据这一点， 可以方便地通过创建 script 节点的方法来实现完全跨域的 通信。具体的做法可以参考 YUI 的 Get Utility 这里判断 script 节点加载完毕还是蛮有意思的：ie 只能通过 script 的 readystatechange 属性，其它浏览器 是 script

7、 的 load 事件。以下是部分判断 script 加载完毕 的方法。 = = function() if (! | = loaded | = complete) / callback 在此处执行 = = null; ; 不同的域之间，JavaScript 只能做很有限的访问和操 作，其实我们利用这些有限的访问权限就可以达到跨域通 信的目的了。FIM (Fragment Identitier Messaging)就是 在这个大前提下被发明的。父窗口可以对 iframe 进行 URL 读写，iframe 也可以读写父窗口的 URL，URL 有一部分被称 为 frag，就是#号及其后面的字符，它一

8、般用于浏览器锚点 定位，Server 端并不关心这部分，应该说 HTTP 请求过程中 不会携带 frag，所以这部分的修改不会产生 HTTP 请求，但 是会产生浏览器历史记录。FIM 的原理就是改变 URL 的 frag 部分来进行双向通信。每个 window 通过改变其他 window 的 location 来发送消息，并通过监听自己的 URL 的 变化来接收消息。这个方式的通信会造成一些不必要的浏 览器历史记录，而且有些浏览器不支持 onhashchange 事件， 需要轮询来获知 URL 的改变，最后，URL 在浏览器下有长度 限制，这个制约了每次传送的数据量。 这个办法比较绕，但是可以

9、解决完全跨域情况下的脚 步置换问题。原理是利用 来进行传值。在 url： http:/#helloword 中的? #helloworld?就是，改变 hash 并不会导致页面刷新，所以 可以利用 hash 值来进行数据传递，当然数据容量是有限的。 假设域名下的文件要和域名下的传递信息，首先创建自动 创建一个隐藏的 iframe，iframe 的 src 指向域名下的页面，这时的 hash 值可以做参数传递用。 响应请求后再将通过修改的 hash 值来传递数据（由于两个 页面不在同一个域下 IE、Chrome 不允许修改的值，所以要 借助于域名下的一个代理 iframe；Firefox 可以修

10、改） 。同 时在上加一个定时器，隔一段时间来判断的值有没有变化， 一点有变化则获取获取 hash 值。 代码如下： 先是下的文件文件： function startRequest() var ifr = (iframe); = none; = /lab/cscript/#paramdo; (ifr); function checkHash() try var data = ? (1) : ;if () (Now the data is +data); catch(e) ; setInterval(checkHash, XX); 域名下的: /模拟一个简单的参数处理操作 switch() cas

11、e #paramdo:callBack();break; case #paramset: /do something? 篇二：js 跨域及解决方案 js 跨域及解决方案 1.什么是跨域 我们经常会在页面上使用 ajax 请求访问其他服务器 的数据,此时,客户端会出现跨域问题. 跨域问题是由于 javascript 语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一 来源的窗口和文档的属性,这里的同一来源指的是主机名、 协议和端口号的组合. 例如: 2.实现原理 在 HTML DOM 中,Script 标签是可以跨域访问服务器上 的数据的.因此,可以指定 scrip

12、t 的 src 属性为跨域的 url, 从而实现跨域访问. 例如: 这种访问方式是不行的.但是如下方式,却是可以的. 这里对返回的数据有个要求,即:服务器返回的数据不 能是单纯的如“Name“:“zhangsan“ 如果返回的是这个 json 字符串,我们是没有办法引用 这个字符串的.所以,要求返回的值,务必是 var json=“Name“:“zhangsan“,或 json(“Name“:“zhangsan“) 为了使程序不报错,我们务必还要建立个 json 函数. 3.解决方案 方案一 服务器端: protected void Page_Load(object sender, Event

13、Args e) string result = “callback(“name“:“zhangsan“,“date“:“XX-12- 03“)“; (); (result); (); 客户端: var result = null; = function () var script = (“script“); = “text/javascript“; = “; var head = (“head“)0; (script, ); ; function callback(data) result = data; function b_click() alert(); 方案二，通过 jquery 来完

14、成 通过 jquery 的 jsonp 的方式.使用此方式,对服务器 端有要求. 服务器端如下: protected void Page_Load(object sender, EventArgs e) string callback = “jsoncallback“; string result = callback + “(“name“:“zhangsan“,“date“:“XX-12- 03“)“; (); (result); (); 客户端: $.ajax( async: false, type: “GET“, dataType: jsonp, /jsonp 的值自定义,如果使用 js

15、oncallback,那么服 务器端,要返回一个 jsoncallback 的值对应的对象. jsonp: jsoncallback, /要传递的参数,没有传参时，也一定要写上 data: null, timeout: 5000, /返回 Json 类型 contentType: “application/json;utf-8“, /服务器段返回的对象包含 name,data 属性. success: function (result) alert(); , error: function (jqXHR, textStatus, errorThrown) alert(textStatus);

16、); 实际上,在我们执行这段 js 时,js 向服务器发出了这 样一个请求: 42 而服务器也相应的返回了如下对象: jsonp1354506338864(“name“:“zhangsan“,“date“:“XX- 12-03“) 此时就实现了跨域范文数据的要求。 篇三：JS 跨域访问解决方案总结 JS 跨域访问解决方案总结 0 引言： 跨域请求，顾名思义，就是一个站点中的资源去访问 另外一个不同域名站点上的资源。这种情况很常见，比如 说通过 style 标签加载外部样式表文件、通过 img 标签加 载外部图片、通过 script 标签加载外部脚本文件、通过 Web font 加载字体文件等等。默认情况下，脚本访问文档 属性等数据采用的是同源策略（Same origin policy） 。 同源策略：如果两个页