- 浏览: 427613 次
- 性别:
- 来自: 广州
文章分类
最新评论
-
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 1637近期react及vueJs的普及,ES6也有相应的推广及普及, ... -
PIXI 完整示例-PIXI文档翻译(7)
2017-02-27 10:04 1026案例研究:寻宝者 所 ... -
PIXI 碰撞检测-PIXI文档翻译(6)
2017-02-27 09:59 1907你现在知道如何制作各种各样的图形对象,但你能用他们做什么?一个 ... -
PIXI 基本图形-PIXI文档翻译(6)
2017-02-26 18:06 31791、基本图形 使用图像纹理是制作精灵的最有用的方法之一,但Pi ... -
PIXI 分组 Sprite-PIXI文档翻译(5)
2017-02-26 11:55 15221、分组sprite 组可以创建游戏场景,并将类似的精灵一起管 ... -
PIXI 移动 Sprite-PIXI文档翻译(4)
2017-02-26 11:38 1445你现在知道如何显示精灵,但是你怎么让他们移动?这很容易:使用创 ... -
PIXI 创建 Sprite的几种方法-PIXI文档翻译(3)
2017-02-26 11:25 58641、通过spritesheets图创建sprite 你现在知 ... -
PIXI Sprite的定位,尺寸和旋转-PIXI文档翻译(2)
2017-02-26 00:14 61631、定位Sprite 现在你知道如何创建和显示精灵,让我们了解 ... -
PIXI入门-PIXI文档翻译(1)
2017-02-25 09:47 36571、创建渲染器和舞台 ... -
如何快速的开放一个小游戏
2016-11-02 20:50 01、找一个可用的框架 2、通读一下文档和源码 3、搞一个小创意 ... -
生产环境页面性能监控
2013-04-18 00:46 1932嵌入式的开发 在代码片断中嵌入各个时间点,最后统一上报。 一 ... -
XSS攻击原理解析
2013-04-16 23:49 2720XSS全称Cross Site Script,跨站脚本攻击 它 ... -
CRSF攻击原理解析
2013-04-16 23:02 8040CRSF全称 Cross Site Request Forge ... -
浏览器缓存机制详解(转)
2013-03-27 21:59 1527同时参考的是W3C RFC2616规范中的 HTTP1.1/H ... -
页面性能优化
2013-03-27 21:56 1875压缩JS,CSS,图片 合并 ... -
JavaScript异常监控
2013-03-27 21:50 2264JavaScript异常一般可通过try ca ... -
HTML5 geolocation 规范翻译
2013-04-22 13:32 1954摘要 规范定义了脚本方式访问主机地理位置信息的API。 安全 ... -
JS文档构建(jsdoc)
2012-06-07 02:08 1715一、命令分类 类定义 @class 类型定义 @ve ... -
HTML5 Forms
2012-06-03 22:16 1284表单元素类型 常用:tel, email, date, url ...
相关推荐
在IT领域,尤其是在Web开发中,跨域访问是一个常见的问题,因为浏览器的同源策略(Same-Origin Policy)限制了JavaScript从一个源获取资源到另一个源的能力。为了在不同软件系统间实现跨域通信,开发者需要采取一些...
tomcat解决跨域访问问题,具体配置如下: 1、修改tomcat下的Conf/web.xml文件,在该文件内容中新增以下配置,注意,若该web.xml中存在其它filter,则需要将该filter放在所有filter前面; <filter-name>...
在IT行业中,跨域访问是Web开发中一个重要的概念,特别是在使用JavaScript、JSP、JSON以及前端库如jQuery时。本教程将详细讲解如何利用这些技术实现跨域数据交互。 首先,我们需要理解“跨域”这个术语。在浏览器的...
根据提供的文件信息,本文将详细解释“JS跨域访问后台”的相关知识点,包括跨域的基本概念、实现方式以及具体的代码示例。 ### 跨域基本概念 在浏览器中,为了安全考虑,存在一种称为“同源策略”的机制。简单来说...
`iframe` 跨域访问`session`正是为了解决这一问题。 首先,让我们了解一下`session`和`cookie`的关系。`session`通常用于存储用户登录状态等临时信息,而`cookie`则作为`session` ID的载体在客户端和服务器之间传递...
### ASP.NET后台代码实现XmlHttp跨域访问 在Web开发领域,跨域访问是一个常见的问题。当客户端尝试从一个源加载不同源的数据时,就会触发跨域问题。为了解决这个问题,开发者通常会采用多种技术手段,其中一种是...
本教程将重点讲解如何在ASP.NET Web环境中处理Ajax跨域访问。 一、理解同源策略 同源策略是浏览器为了保护用户安全而实施的一项安全机制,它禁止了一个源(domain)的文档或脚本获取或操作另一个源的资源。这意味着...
在HTML5平台上,跨域访问是一个常见的挑战,尤其在进行多项目协作或者API集成时。跨域资源共享(CORS)是解决这个问题的关键技术。本文档将深入探讨如何在HTML5中实现跨域访问,帮助开发者避免修改大量代码,提高...
Linux中的geoserver安装,直接把geoserver.war放到tomcat/webapps下即可; geoserver默认是不允许跨域访问的,如果要允许跨域访问,请按以下步骤操作: (已在geoserver 2.12.5下亲测可用)
JS 跨域访问解决方案总结 JS 跨域访问解决方案总结是指在不同域名站点之间进行资源访问的解决方案。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy),即如果两个页面的协议、域名和端口...
配置tomcat6的跨域访问问题,包含两个xml配置文件clientaccesspolicy.xml,crossdomain.xml,以及两个jar包cors-filter-1.7.1.jar,java-property-utils-1.9.1.jar
在IT行业中,尤其是在Web开发领域,跨域访问问题是一个常见的挑战。Cesium是一个强大的JavaScript库,主要用于创建交互式的3D地球、地图和其他地理空间应用程序。当Cesium在Apache Tomcat服务器上部署时,由于浏览器...
`CORS跨域访问框架jra包`则提供了一种方便的方式来实现CORS支持,使得开发者可以轻松地在服务器端配置CORS策略。 `cors-filter-1.7.jar` 是这个框架的核心组件,它是一个基于Java的过滤器(Filter),可以集成到...
### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中,跨域问题是一项常见挑战,尤其是在涉及不同协议(如HTTP与HTTPS)的数据交互时。本文将深入探讨如何利用JSONP(JSON with Padding)技术来实现HTTP与...
跨域访问是Web开发中一个常见的挑战,尤其是在进行Ajax异步请求时,浏览器的同源策略(Same-origin policy)会限制JavaScript从一个源获取另一个源的数据。为了解决这个问题,开发者通常采用JSONP(JSON with ...
### 跨域访问解决方案与Cookie处理 在现代Web开发中,跨域问题一直是困扰开发者的一大难题。当浏览器出于安全考虑阻止不同源之间的数据交互时,跨域问题便产生了。为了解决这一问题,并确保在跨域场景下可以正确地...
### JAVA的AJAX跨域访问:深入解析与解决方案 #### 引言 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛应用于实现网页的异步加载,从而提升用户体验。然而,AJAX请求的一个常见问题就是...
跨域访问数据是Web开发中的一个关键概念,特别是在构建分布式应用程序和API接口时。这个"跨域访问数据-DEMO"可能是一个示例项目,旨在演示如何在浏览器环境中跨越源限制,即同源策略,来获取JSON或XML数据。下面我们...
在IT行业中,跨域访问是Web开发中的一个重要概念,尤其对于前端开发者来说,这是一个常见的挑战。高度自适应则关乎到网站或应用在不同设备和屏幕尺寸下的表现。在这个"高度自适应跨域访问实例下载"中,我们看到三个...
请用google浏览器打开,页面百分比缩小到百分之三十再访问。 1、 请在服务器上部署附件war 2、 将【两个工程.zip】压缩包中的webChart.war和jdbc2json.war上传至apache-tomcat-8.0.33/webapps下 3、 启动tomcat,~/...