`

服务器端可控情形的Javascript跨域访问解决方法

    博客分类:
  • Ajax
阅读更多
    http://weidagang2046.blog.51cto.com/246444/45917   
  在最近的一个web项目中为了实现bookmark功能碰到了javascript跨域访问的问题。起初,在google上搜的很多解决方案并不适用于我的情形,只在有一篇文章中提到的远程加载javascript方法从理论上看到了解决的希望。但可惜作者只是一笔带过,并未用例子详细说明,所以不得不摸索了一阵才把这个问题搞定。在此,希望通过本文为同样被这个问题困扰的朋友们提供一个解决方法作为参考。如有错误,欢迎指正!

Bookmark是目前许多 web2.0 网站 (http://del.icio.us/, www.diigo.com 等)都提供的热门feature。它能将互联网上自己喜欢的网页收藏到 Bookmark 服务器上。本文要解决的问题就发生在用户提交网页URL(还包括Tag,Notes等)给Bookmark服务器时。

关于 URL 的提交至少可以有三种方式:

1.       登陆Bookmark服务器的提交页面,将要收藏的 URL 通过该页面提交给服务器。
2.       安装浏览器插件,通过插件将 URL 提交给服务器。
3.       从Bookmark服务器动态加载 javascript 小工具到当前页面,通过它来完成提交工作。(参考diigo的例子,收藏一个网页链接到浏览器收藏夹,链接的URL是一段javascript代码,它会从服务器加载一段 javascript注入当前网页)

第一种方式开发起来最简单,但对用户来讲比较麻烦,每次都需要先登陆 Bookmark服务器才能完成提交;第二种方式我并不熟悉插件开发,而且用户也不喜欢太多的插件堆满自己的浏览器;第三种方式开发难度小,又避免了每次登陆服务器的麻烦,所以我最终采用了它。

上面讲的第三种方式中动态加载的javascript小工具除了需要生成 UI 供用户填写信息(URL, tag, notes等),当用户点击提交的时候,还要完成与服务器通信的功能。在没有跨域访问经验的情况下,最先想到的当然是ajax!但很快就会发现根本行不通。

跨域访问,简单来说就是A网站的javascript代码试图访问B网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。写过跨域访问ajax的朋友相信都遇到过被告知“没有权限”的情况。通过XMLHttp来发送数据给Bookmark服务器的尝试失败了。于是,看到网上的一些资料,我又开始尝试用javascript小工具在用户网页动态创建一个隐藏的 iframe,iframe的src指向服务器的一个servlet,试图通过调用iframe中提供的javascript来完成与服务器的通信。但不幸的是,用户网页中的 javascript代码访问iframe也被浏览器归为跨域访问(特指iframe的src 指向其它网站的情形),尝试再次失败。

最终,在一篇文章中看到,与iframe不同,如果A网站从B网站加载 javascript,A网站可以自由的访问该javascript的内容,并不会被浏览器认为是跨域访问。模仿刚才iframe的思路,当用户点击提交时,可以动态创建一个javascript对象,该对象的src指向Bookmark服务器的一个 servlet,注意:URL、Tag、Notes、User、Password等信息被作为src URL参数传给服务器。请看下面的代码:

var url = "http://localhost:8080/Deeryard/BookmarkServlet?" +
           "url=" + url_source + "&" + "title=" + title + "&" +
"tag=" + tag + "&" + "notes=" + notes + "&" + "user=" + user + "&" + "password=" + password;

url = encodeURI(url);
  
//Submit to server with a trick
var js_obj = document.createElement( "script" );
js_obj.type = "text/javascript" ;
js_obj.setAttribute( "src" , url);
  
//Get response from server by appending it to document
document.body.appendChild(js_obj);

上面例子中,js_obj.setArrribute()将信息作为src的URL参数提交给了Bookmark servlet。那么用户又如何取得服务器的响应信息呢?答案就是最末一行代码,servlet的输出必须是javascript代码,它可以调用用户网页上的其他 javascript 函数,以及操作 dom 对象。下面的 servlet 代码生成了一个 javascript 函数调用:

out.write("onServerResponse(INADEQUATE_INFORMATION);");

document.body.appendChild(js_obj) 执行后 onServerResponse( INADEQUATE_INFORMATION) 就会得到执行,使客户网页响应服务器结果。这样一个完整的通信过程就完成了。

来总结一下这个案例,首先与很多跨域访问的情形不同,本文提到的跨域访问需要对服务器端进行控制,即让服务器端 Servlet 来适应客户端网页 javascript 的需求;而其他一些常见的例子则对服务器端没有控制能力,比如从其他网站抓内容的小偷程序。另外,需要注意的是这种方法中实际用到了 get 方法来提交信息,从一些资料上看到, get 方法每次提交的信息不能超过 2k 。
分享到:
评论

相关推荐

    Javascript跨域访问解决方案

    CORS是现代浏览器支持的一种标准跨域机制,通过在服务器端设置`Access-Control-Allow-Origin`响应头来指定哪些源可以访问。例如: ```http Access-Control-Allow-Origin: http://mydomain.com ``` 还可以设置其他...

    跨域访问解决方法-jsonp

    跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...

    Ajax跨域访问解决方案

    **Ajax跨域访问解决方案** 在Web开发中,Ajax(Asynchronous JavaScript and XML)技术被广泛用于实现页面的异步更新,提升用户体验。然而,由于浏览器的同源策略限制,Ajax请求只能向同源(协议、域名和端口相同)...

    JS跨域访问解决方案总结

    总结起来,JavaScript跨域访问的解决方案多种多样,可以根据具体需求选择适合的方法。CORS作为现代浏览器广泛支持的标准,是实现跨域请求的主要手段,既安全又灵活。对于旧版浏览器或不支持CORS的场景,可以考虑使用...

    JQuery跨域访问解决方案

    在Web开发中,由于同源策略的限制,JavaScript通常无法直接访问不同域名下的资源,这就是所谓的跨域问题。然而,为了实现诸如AJAX异步数据交互等需求,开发者需要找到解决这一问题的方法。jQuery作为流行的...

    Javascript 跨域访问解决方案

    JavaScript跨域访问解决方案详解 由于浏览器的同源策略(Same-Origin Policy),JavaScript通常只能访问与当前页面同源(协议、域名、端口均相同)的资源,以防止恶意脚本跨域窃取数据。然而,在实际开发中,我们...

    arcgis api for javascript跨域处理方案

    总结起来,解决ArcGIS API for JavaScript的跨域问题通常需要在客户端和服务器端采取相应的措施。资源代理是一种安全且灵活的解决方案,特别是在处理敏感数据或需要控制访问权限时。理解并正确实施这些方法对于开发...

    javascript跨域方案总结

    本篇文章将详细总结JavaScript实现跨域的多种方法。 1. JSONP(JSON with Padding) JSONP是一种早期解决跨域问题的方式,通过动态创建`<script>`标签来加载指定URL的JavaScript文件。服务器返回的不是JSON数据,而是...

    解决ajax不能访问本地文件问题(利用js跨域原理)

    尽管JSONP和本文中的方法在某些场景下有效,但在实际开发中,更推荐使用CORS,因为它提供了更安全、更可控的跨域访问方式。同时,对于无服务器的前端项目,也可以考虑使用Web Workers或Service Worker等现代Web技术...

    javascript插件 解决双向跨域问题

    代理服务器则是在服务器端处理跨域问题,通过将请求转发到目标源并返回结果,以绕过浏览器的同源策略。 现在,我们转向jcrossdomain这个插件。jcrossdomain是一个专门用于解决JavaScript跨域问题的工具,尤其适用于...

    java服务器端解决跨域问题共6页.pdf.zip

    Java服务器端解决跨域问题是一项常见的任务,尤其是在开发Web应用时。跨域是由于浏览器的安全策略,即同源策略(Same-Origin Policy)所引发的。同源策略限制了JavaScript只能与相同协议、相同主机和相同端口的资源...

    js_跨域访问[参照].pdf

    解决跨域问题的方法多种多样,主要分为两类:服务器端代理和客户端跨域策略。 1. **服务器端代理**: - **本域和子域的相互访问**:可以通过设置`document.domain`属性,将子域和主域设置为相同的顶级域,比如`...

    iframe 跨域访问session

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

    解决openlayers跨域访问的解决方案

    3. **使用代理服务**: 如果以上两种方法都不行,你需要在服务器端设置一个代理。例如,使用Node.js的`http-proxy-middleware`库创建一个简单的代理。 ```javascript const { createProxyMiddleware } = require('...

    js+jsp+json+tomcat跨域访问

    在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...

    HTML5平台中跨域访问使用说明

    2. 跨域请求不会触发浏览器的缓存策略,因此需要服务器端配合处理缓存。 3. 由于安全原因,`file:`协议下无法使用CORS。 4. 对于IE浏览器,需要使用XDomainRequest对象处理跨域,它有一些特殊的限制,比如不支持PUT...

Global site tag (gtag.js) - Google Analytics