服务器端可控情形的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跨域访问解决方法相关推荐
- [Unity WWW] 跨域访问解决方法
什么是跨域访问 域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation).信任关系是连接在域与域之间的桥梁.当一个域与其他域建立了信任 ...
- jsp允许跨域访问_js跨域访问解决方法(jsp代理)
在javascript中通过xmlhttprequest跨域访问其他资源会被浏览器阻止,因为跨域访问容易引起安全问题.对于要访问的资源那端不能被修改的情况(要访问的资源的服务器不能被修改的情况),可以 ...
- WCF 构建REST Service 跨域访问解决方法
服务端是用vs2013里WCF做的REST风格的web service. 客户端是用jquery+ajax访问web service. 参考 http://www.topwcftutorials.ne ...
- php No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 在PHP请求头加上 header("Access-Control-Allow-Origin: *&q ...
- js 跨域访问问题解决方法
什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 有什么完美的解决方案么 ...
- jq跨域代理_jQuery 跨域访问问题解决方法
jQuery 跨域访问问题解决方法 更新时间:2009年12月02日 01:25:19 作者: 浏览器端跨域访问一直是个问题, 多数研发人员对待js的态度都是好了伤疤忘了疼,所以病发的时候,时不时 ...
- jsp允许跨域访问_Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例 jsp代码: js代码: functiontestJsonp(){ $.ajax({ type :'GET', dataType :'jsonp', // ...
- ajax总结(三):ajax跨域访问接口方法汇总
ajax跨域访问接口方法和模板引擎的应用 一.学习跨域之前先要了解: 1.同源和跨域的概念 a.同源:协议头.域名.端口全部一样就叫同源; b.跨域:只要协议头,域名,端口任意一个不一样就是跨域. 因 ...
- 浏览器同源策略及跨域的解决方法
浏览器同源策略及跨域的解决方法 参考文章: (1)浏览器同源策略及跨域的解决方法 (2)https://www.cnblogs.com/laixiangran/p/9064769.html 备忘一下.
最新文章
- 全国计算机等级二级证书foxbase,2002年4月全国计算机等级考试二级FOXBASE笔试试题...
- php置顶文章,zblogphp调用置顶文章的教程
- 轻松理解UML用例图时序图类图的教程
- flowable连线名称不显示bug修复说明
- infacmd 把工作流添加到应用程序_【案例】Animate 发布Win应用程序
- 黄金分割法与单峰函数求极值
- POJ1338 Ugly Numbers
- 图文安装VMware Workstation教程
- 7.2 异常处理(Exception Handing)
- 杠杆炒股为什么会被强制平仓?
- iwanna 关卡设计(挖坑)指南
- 深扒人脸识别技术,原理、算法深度解析
- 中国计算机专业的大学生相比于美国差在哪里?
- 第2章 C语言的赋值运算符、复合运算符与逗号运算符 (十一)
- 如何用python的turtle画五角星_海龟编辑器五角星怎么画 绘制五角星就是这么简单...
- 【无为则无心Python基础】— 18、Python字符串的格式化输出
- TypeScript类的使用
- CentOS 8发布|CentOS 8下载链接
- Goolge让一切变得简单
- Java 国际化和字符集