`
haiyupeter
  • 浏览: 427613 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

跨域访问

阅读更多
JavaScript跨域访问有多种方式:
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跨域操作


  • 大小: 57.8 KB
  • 大小: 60.4 KB
  • 大小: 64.5 KB
  • 大小: 95.8 KB
分享到:
评论

相关推荐

    链接修改及跨域访问的问题

    在IT领域,尤其是在Web开发中,跨域访问是一个常见的问题,因为浏览器的同源策略(Same-Origin Policy)限制了JavaScript从一个源获取资源到另一个源的能力。为了在不同软件系统间实现跨域通信,开发者需要采取一些...

    tomcat解决跨域访问问题配置

    tomcat解决跨域访问问题,具体配置如下: 1、修改tomcat下的Conf/web.xml文件,在该文件内容中新增以下配置,注意,若该web.xml中存在其它filter,则需要将该filter放在所有filter前面; &lt;filter-name&gt;...

    js+jsp+json+tomcat跨域访问

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

    js跨域访问后台

    根据提供的文件信息,本文将详细解释“JS跨域访问后台”的相关知识点,包括跨域的基本概念、实现方式以及具体的代码示例。 ### 跨域基本概念 在浏览器中,为了安全考虑,存在一种称为“同源策略”的机制。简单来说...

    iframe 跨域访问session

    `iframe` 跨域访问`session`正是为了解决这一问题。 首先,让我们了解一下`session`和`cookie`的关系。`session`通常用于存储用户登录状态等临时信息,而`cookie`则作为`session` ID的载体在客户端和服务器之间传递...

    ASP.NET后台代码实现XmlHttp跨域访问

    ### ASP.NET后台代码实现XmlHttp跨域访问 在Web开发领域,跨域访问是一个常见的问题。当客户端尝试从一个源加载不同源的数据时,就会触发跨域问题。为了解决这个问题,开发者通常会采用多种技术手段,其中一种是...

    Ajax跨域访问(ASP.NET Web)

    本教程将重点讲解如何在ASP.NET Web环境中处理Ajax跨域访问。 一、理解同源策略 同源策略是浏览器为了保护用户安全而实施的一项安全机制,它禁止了一个源(domain)的文档或脚本获取或操作另一个源的资源。这意味着...

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

    在HTML5平台上,跨域访问是一个常见的挑战,尤其在进行多项目协作或者API集成时。跨域资源共享(CORS)是解决这个问题的关键技术。本文档将深入探讨如何在HTML5中实现跨域访问,帮助开发者避免修改大量代码,提高...

    linux geoserver允许跨域访问

    Linux中的geoserver安装,直接把geoserver.war放到tomcat/webapps下即可; geoserver默认是不允许跨域访问的,如果要允许跨域访问,请按以下步骤操作: (已在geoserver 2.12.5下亲测可用)

    JS跨域访问解决方案总结[参照].pdf

    JS 跨域访问解决方案总结 JS 跨域访问解决方案总结是指在不同域名站点之间进行资源访问的解决方案。默认情况下,脚本访问文档属性等数据采用的是同源策略(Same origin policy),即如果两个页面的协议、域名和端口...

    tomcat6跨域访问配置及jar包

    配置tomcat6的跨域访问问题,包含两个xml配置文件clientaccesspolicy.xml,crossdomain.xml,以及两个jar包cors-filter-1.7.1.jar,java-property-utils-1.9.1.jar

    cesium在Tomcat部署后,跨域访问问题解决.zip

    在IT行业中,尤其是在Web开发领域,跨域访问问题是一个常见的挑战。Cesium是一个强大的JavaScript库,主要用于创建交互式的3D地球、地图和其他地理空间应用程序。当Cesium在Apache Tomcat服务器上部署时,由于浏览器...

    CORS跨域访问框架jra包

    `CORS跨域访问框架jra包`则提供了一种方便的方式来实现CORS支持,使得开发者可以轻松地在服务器端配置CORS策略。 `cors-filter-1.7.jar` 是这个框架的核心组件,它是一个基于Java的过滤器(Filter),可以集成到...

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    ### 使用JSONP完成HTTP和HTTPS之间的跨域访问 在现代Web开发中,跨域问题是一项常见挑战,尤其是在涉及不同协议(如HTTP与HTTPS)的数据交互时。本文将深入探讨如何利用JSONP(JSON with Padding)技术来实现HTTP与...

    跨域访问解决方法-jsonp

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

    跨域访问解决方案,关于跨域访问cookie的资料

    ### 跨域访问解决方案与Cookie处理 在现代Web开发中,跨域问题一直是困扰开发者的一大难题。当浏览器出于安全考虑阻止不同源之间的数据交互时,跨域问题便产生了。为了解决这一问题,并确保在跨域场景下可以正确地...

    JAVA的AJAX跨域访问

    ### JAVA的AJAX跨域访问:深入解析与解决方案 #### 引言 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛应用于实现网页的异步加载,从而提升用户体验。然而,AJAX请求的一个常见问题就是...

    跨域访问数据-DEMO

    跨域访问数据是Web开发中的一个关键概念,特别是在构建分布式应用程序和API接口时。这个"跨域访问数据-DEMO"可能是一个示例项目,旨在演示如何在浏览器环境中跨越源限制,即同源策略,来获取JSON或XML数据。下面我们...

    高度自适应 跨域访问实例下载

    在IT行业中,跨域访问是Web开发中的一个重要概念,尤其对于前端开发者来说,这是一个常见的挑战。高度自适应则关乎到网站或应用在不同设备和屏幕尺寸下的表现。在这个"高度自适应跨域访问实例下载"中,我们看到三个...

    html静态页面,实现跨域访问

    请用google浏览器打开,页面百分比缩小到百分之三十再访问。 1、 请在服务器上部署附件war 2、 将【两个工程.zip】压缩包中的webChart.war和jdbc2json.war上传至apache-tomcat-8.0.33/webapps下 3、 启动tomcat,~/...

Global site tag (gtag.js) - Google Analytics