跨域访问

haiyupeter

浏览: 417546 次
性别:
来自: 广州

最近访客更多访客>>

chenyanfei

Jaakko

justplayoop1

zhaobin87

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JS进阶

跨域 jsonp ajax

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相近：