- 浏览: 417546 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
xiaomuxingren:
你好,请问update-alternatives --inst ...
JDK8安装及jenkins安装 -
wahahachuang8:
我觉得这种东西自己开发太麻烦了,就别自己捣鼓了,找个第三方,方 ...
HTML5 WebSocket -
晨曦的朝阳:
刚好有需求,学习一下!
MySql主从配置 -
mfkvfn:
这是恶意的商业竞争呀
解决 android 微信5.0及后续版本无法打开电话号码的问题 -
fwyhf:
require('./monitor/module_liste ...
NodeJS Server 进程自动重启
JavaScript跨域访问有多种方式:
p3p跨域写cookie
通过jsonp的方式跨域调用
跨域post表单
Ajax跨域实现
1.p3p跨域写cookie
先看hosts配置:
页面代码b.html下面:
c.html
访问b页面:http://dev.operamasks.org/b.html
在iframe中,因为c页面与b页面不在同一个域中,在IE中,禁止iframe的c.html进行cookie的写入,所以刷新页面时c页面找不到cookie,请特别注意两个域名的不同,一个operamasks.org,一个是operamask.org,第二个少了一个s的,所以属于不同的域下。该问题在chrome和firefox中正常写入cookie
如果一定要在c页面中写入cookie怎么办呢?
p3p写法,这里仅以jsp作为例子,php等其实都差不多。
新整一个jsp页面t1.jsp:
同时,将b.html页面改为:
第一次请求b.html页面:http://dev.operamasks.org/b.html
可以在httpwatch中看到有t1.jsp页面有接收到一个aa的cookie:
然后按f5刷新页面,看到如下的cookie场景:
注意到了,有一个sent的cookie,证明了已经往ie中的iframe写入了aa这个cookie了,并且向服务器端发送了,至此,通过p3p的方式可以在iframe中写cookie了。但p3p可能有安全的问题要注意的。
关于p3p规范,大家可以参考这个了解p3p规范的来由:http://hi.baidu.com/kader/blog/item/feacf3def699855495ee3777.html
同时,网上有人做了更深入的分析:http://www.cnblogs.com/Guroer/archive/2011/02/15/1955426.html
那么在IE中,如果同一个域名下不同子域名情况会怎么样呢?
做了一个测试:
域名配置:
192.168.1.160 m1.test.com
192.168.1.160 m3.test.com
192.168.1.160 m2.gogo.com
b.html
c.html
在IE下,m1.test.com 和 m3.test.com的话,客户端写cookie在c.html页面能正常写入
若为b: m1.test.com 和 c: m2.gogo.com的话, 客户端cookie无法写入c.html里面,证明 cookie 在 iframe 中的读写必需是同一个域名下的,子域名不同,则只在当前相同的子域名可写入cookie。
2.通过jsonp的方式跨域调用
host配置:
a.html页面:
ajax.jsp:
访问链接:http://dev.mm.com:8080/test/a.html,即可以在页面上回调到mycallback
jsonp的安全问题是:1.代码出错没有任何的捕获机会。2.接受参数后,有机会被植入危险代码,暂时没想出具体的场景,欢迎提意见改进,目前看到的是如果网站服务端来有JavaScript漏洞,则网页端也会受到攻击的可能:jsonp-维基百科 。
3.跨域post表单
跨域提交能解决一个问题,本地
不同二级域名post表单,手工自己写的几个页面,能正常跑通,当然要封装成控制,还需要时间去抽象和提取,处理初妈化及结果调用并销毁临时对象等问题。看下代码和截图吧:
hosts配置:
index.html 访问方式:m1.test.com:8080/formpost/index.html
中转页面fp_utf8.html:
后台接收post数据并处理代码callback.jsp:
程序在跨二级域名提交后回调当前页面的callback函数,将df进行 alert 了出来:
源码参看附件 test.zip
4.Ajax跨域实现
总体来说 ajax 的跨子域实现也是与formpost一样的,他们都同样遵循 同源策略 (来自 mozilla),所以也是将domain设置为当前的域名后,方可进行ajax调用。
实现过程也是借助于iframe,拿到iframe的对象中的HttpXMLRequest对象,然后通过该对象进行发起Ajax请求,过滤页面设置domain为server相近:
参考文档:实现二级域名ajax跨域操作
p3p跨域写cookie
通过jsonp的方式跨域调用
跨域post表单
Ajax跨域实现
1.p3p跨域写cookie
先看hosts配置:
127.0.0.1 dev.operamasks.org 127.0.0.1 plus.operamask.org
页面代码b.html下面:
<html> <head></head> <body> <iframe src="http://plus.operamask.org/c.html"> </iframe> </body> </html>
c.html
<html> <head> <script> function main() { document.cookie = "aa=bb"; } main(); </script> </head> <body> cc </body> </html>
访问b页面:http://dev.operamasks.org/b.html
在iframe中,因为c页面与b页面不在同一个域中,在IE中,禁止iframe的c.html进行cookie的写入,所以刷新页面时c页面找不到cookie,请特别注意两个域名的不同,一个operamasks.org,一个是operamask.org,第二个少了一个s的,所以属于不同的域下。该问题在chrome和firefox中正常写入cookie
如果一定要在c页面中写入cookie怎么办呢?
p3p写法,这里仅以jsp作为例子,php等其实都差不多。
新整一个jsp页面t1.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% System.out.println("aa"); response.setHeader("P3P","CP=\"CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR\""); response.addCookie(new Cookie("aa", "test")); %>
同时,将b.html页面改为:
<html> <head> </head> <body> <iframe src="http://plus.operamask.org:8080/testqzfl/t1.jsp"></iframe> </body> </html>
第一次请求b.html页面:http://dev.operamasks.org/b.html
可以在httpwatch中看到有t1.jsp页面有接收到一个aa的cookie:
然后按f5刷新页面,看到如下的cookie场景:
注意到了,有一个sent的cookie,证明了已经往ie中的iframe写入了aa这个cookie了,并且向服务器端发送了,至此,通过p3p的方式可以在iframe中写cookie了。但p3p可能有安全的问题要注意的。
关于p3p规范,大家可以参考这个了解p3p规范的来由:http://hi.baidu.com/kader/blog/item/feacf3def699855495ee3777.html
同时,网上有人做了更深入的分析:http://www.cnblogs.com/Guroer/archive/2011/02/15/1955426.html
那么在IE中,如果同一个域名下不同子域名情况会怎么样呢?
做了一个测试:
域名配置:
引用
192.168.1.160 m1.test.com
192.168.1.160 m3.test.com
192.168.1.160 m2.gogo.com
b.html
<html> <head> </head> <body> <!-- <iframe src="http://m2.gogo.com/c.html"> --> <iframe src="http://m3.test.com/c.html"> </iframe> </body> </html>
c.html
<html> <head> <script> function main() { document.cookie = "aa=bb"; } main(); </script> </head> <body> cc </body> </html>
在IE下,m1.test.com 和 m3.test.com的话,客户端写cookie在c.html页面能正常写入
若为b: m1.test.com 和 c: m2.gogo.com的话, 客户端cookie无法写入c.html里面,证明 cookie 在 iframe 中的读写必需是同一个域名下的,子域名不同,则只在当前相同的子域名可写入cookie。
2.通过jsonp的方式跨域调用
host配置:
127.0.0.1 dev.mm.com 127.0.0.1 dev.test.org
a.html页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function mycallback(data) { if (typeof data == "object") { for (var i = 0; i < data.length; i ++) { alert(data[i].name); } } } function jsonpDemo() { var url = 'http://dev.test.org:8080/test/ajax.jsp?callback=mycallback'; var script = document.createElement("script"); script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script); } </script> </head> <body> <button type="button" onclick="jsonpDemo();">测试ajax装载jsonp</button> </body> </html>
ajax.jsp:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <% String callback = request.getParameter("callback"); out.write(callback + "([{name:'test1'}, {name:'test2'}]);"); %>
访问链接:http://dev.mm.com:8080/test/a.html,即可以在页面上回调到mycallback
jsonp的安全问题是:1.代码出错没有任何的捕获机会。2.接受参数后,有机会被植入危险代码,暂时没想出具体的场景,欢迎提意见改进,目前看到的是如果网站服务端来有JavaScript漏洞,则网页端也会受到攻击的可能:jsonp-维基百科 。
3.跨域post表单
跨域提交能解决一个问题,本地
不同二级域名post表单,手工自己写的几个页面,能正常跑通,当然要封装成控制,还需要时间去抽象和提取,处理初妈化及结果调用并销毁临时对象等问题。看下代码和截图吧:
hosts配置:
192.168.1.160 m1.test.com 192.168.1.160 m3.test.com
index.html 访问方式:m1.test.com:8080/formpost/index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>formpost test</title> <script type="text/javascript"> document.domain = "test.com"; var data = {'callback': 'cb', 'name': 'haiyu', 'password': '123456'}; var url = "http://m3.test.com:8080/test/formpost/callback.jsp"; function post() { var iframe = document.createElement('iframe'); iframe.src="http://m3.test.com:8080/test/formpost/fp_utf8.html"; document.body.appendChild(iframe); } function callback(data) { alert(data['aa']); } </script> </head> <body> <button onclick="post();">测试postform</button> </body> </html>
中转页面fp_utf8.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> var domain = document.location.hostname; var ds = domain.split("."); document.domain = ds.splice(ds.length - 2).join("."); </script> </head> <body> <form id="poster" method="post"></form> <script type="text/javascript"> var parent = window.parent; var f = document.getElementById('poster'); var data = parent.data; var url = parent.url; f.setAttribute('action', url); for (var key in data) { var field = document.createElement('input'); field.setAttribute('name', key); field.setAttribute('value', data[key]); f.appendChild(field); } frameElement.callback = parent.callback; f.submit(); </script> </body> </html>
后台接收post数据并处理代码callback.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head></head> <body> </body> <script type="text/javascript"> var domain = document.location.hostname; var ds = domain.split("."); document.domain = ds.splice(ds.length - 2).join("."); <% Object fn = request.getParameter("callback"); String callback = null; if (null != fn) { callback = fn.toString(); out.write("frameElement.callback({aa:'df', bb:'ss'});"); } %> </script> </html>
程序在跨二级域名提交后回调当前页面的callback函数,将df进行 alert 了出来:
源码参看附件 test.zip
4.Ajax跨域实现
总体来说 ajax 的跨子域实现也是与formpost一样的,他们都同样遵循 同源策略 (来自 mozilla),所以也是将domain设置为当前的域名后,方可进行ajax调用。
实现过程也是借助于iframe,拿到iframe的对象中的HttpXMLRequest对象,然后通过该对象进行发起Ajax请求,过滤页面设置domain为server相近:
document.domain = "youdomain.com";
参考文档:实现二级域名ajax跨域操作
发表评论
-
webpack4 - 安装
2019-04-15 17:50 0webpack4 安装 -
项目中使用webpack5
2017-11-26 16:40 1508近期react及vueJs的普及,ES6也有相应的推广及普及, ... -
PIXI 完整示例-PIXI文档翻译(7)
2017-02-27 10:04 895案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1765你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 基本图形-PIXI文档翻译(6)
2017-02-26 18:06 29141、基本图形 使用图像纹理是制作精灵的最有用的方法之一,但Pi ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 13801、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1315你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)
2017-02-26 11:25 55551、通过spritesheets图创建sprite 你现在知 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 58971、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 34971、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1875嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2662XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 7904CRSF全称 Cross Site Request Forge ... -
浏览器缓存机制详解(转)
2013-03-27 21:59 1471同时参考的是W3C RFC2616规范中的 HTTP1.1/H ... -
页面性能优化
2013-03-27 21:56 1829压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2208JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1889摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1656一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1228表单元素类型 常用:tel, email, date, url ...
相关推荐
tomcat解决跨域访问问题,具体配置如下: 1、修改tomcat下的Conf/web.xml文件,在该文件内容中新增以下配置,注意,若该web.xml中存在其它filter,则需要将该filter放在所有filter前面; <filter-name>...
不同软件系统下 js 实现跨域访问
iframe 跨域访问session问题解决方法
ASP.NET后台代码实现XmlHttp跨域访问
使用JSONP完成HTTP和HTTPS之间的跨域访问
本demo为通过jquery 来进行json的跨域访问的小例子。简单易懂!
js_跨域访问[参照].pdf
CORS跨域访问框架jar包,具体配置方法非常简单,网上很多教程,
JS跨域访问解决方案总结[参照].pdf
请用google浏览器打开,页面百分比缩小到百分之三十再访问。 1、 请在服务器上部署附件war 2、 将【两个工程.zip】压缩包中的webChart.war和jdbc2json.war上传至apache-tomcat-8.0.33/webapps下 3、 启动tomcat,~/...
js解决跨域访问问题,在用js访问web后台方法的时候,有时候会遇到跨域访问的问题。文档中介绍了跨域访问产生的原因以及相应的解决办法及代码示例。
跨域访问解决方案,关于跨域访问cookie的资料
文档内容详细,只需要负责粘贴,并替换url即可使用
JS跨域访问解决
怎样实现Ajax 跨域访问的五种方法, 怎样实现Ajax 跨域访问的五种方法
Ajax通过代理来解决跨域访问获取数据,里面描述了两种跨域访问的解决方法
高度自适应 跨域访问实例下载 高度自适应 跨域访问实例下载
JS跨域访问解决方案总结.。总结了记住JS跨域访问解决方案。
解决SilverLight跨域访问问题
项目开发过程中会遇到一个项目区调取另一个项目的现象,就是所说的跨域问题。跨域问题一开始解决方法时改代码,浪费大量的工作量。后来就是查阅大量资料写的这么个文档