浏览器跨域问题

一、什么是跨域？

跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域,由于浏览器的同源策略造成的。

二、浏览器为什么要限制跨域访问呢

1.浏览器的同源策略:何为同源：域名，协议，端口号均相同。

2.同源策略分为两种:

DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求
AJAX同源策略主要用来防止CSRF攻击。如果没有AJAX同源策略，相当危险，我们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么可以做如下攻击.

用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。
用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。
http://evil.com向http://mybank.com发起AJAX HTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。
银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。
而且由于Ajax在后台执行，用户无法感知这一过程。
DOM同源策略也一样，如果iframe之间可以跨域访问，可以这样攻击：
1. 做一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。
2. 把iframe宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
3. 这时如果用户输入账号密码，我们的主网站可以跨域访问到http://mybank.com的dom节点，就可以拿到用户的输入了，那么就完成了一次攻击。
所以说有了跨域跨域限制之后，我们才能更安全的上网了

三、跨域访问的解决方案

1.服务器端响应头设置:

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Origin: yourhost.com");

header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

2.jsonp实现跨域

原理：通过动态创建script标签,然后利用src属性进行跨域。浏览器对script,img的src属性是不做跨域限制的。

列子:simple.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<script type="text/javascript">
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
//搜索apple，将自定义的回调函数名result传入callback参数中
addScriptTag('http://127.0.0.1/kuayu/demo.php?v=1.0&q=apple&callback=result');
};
//自定义的回调函数result
function result(data) {
//我们就简单的获取apple搜索结果的第一条记录中url数据
alert(data.Name);
}
</script>
</head>
<body>
</body>
</html>

服务器端：

<?php
#header("Connection: Close");
#header("http/1.1 404 Not Found test");
#header("Access-Control-Allow-Origin: *");
#header("Access-Control-Allow-Origin: yourhost.com");
$arr = array('Name'=>'jian','age'=>'26');
$callback = $_GET['callback'];
$json = json_encode($arr);
echo "$callback($json)";
#echo json_encode($arr);
?>

Jquery对jsonp的实现

列子:getJson.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>test</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var url="http://127.0.0.1/kuayu/demo.php?callback=?";
$(function(){
$.getJSON(url,function(data){
alert (data.Name);
})
});
</script>
</head>
<body>
</body>
</html>

服务端：

<?php
#header("Connection: Close");
#header("http/1.1 404 Not Found test");
#header("Access-Control-Allow-Origin: *");
#header("Access-Control-Allow-Origin: yourhost.com");
$arr = array('Name'=>'jian','age'=>'26');
$callback = $_GET['callback'];
$json = json_encode($arr);
echo "$callback($json)";
#echo json_encode($arr);
?>

注意点：

a.发送到数据接收方的地址后面一定要加上callback=?这样的参数，且这个?是会被Jquery自动替换成回调方法的名称。（在Jquery1.4中可以自己指定回调方法的名称了）

b.由于调用Jquery的$.getJSON方法时，Jquery有自己的处理，实际上通过script的scr请求的，但要知道，数据最终还是通过url后面通过get方式发送数据出去的，这就决定了，发送的data数据量不能太多，否则造成url太长接收失败（getJSON方式是不可能有post方式递交的）。

3.代理

例如www.a.com/index.html需要调用www.b.com/index.php，可以写一个接口www.a.com/index.php，由这个接口在后端去调用 www.b.com/index.php并拿到返回值，然后再返回给index.html，这就是一个代理的模式。相当于绕过了浏览器端，自然就不存在跨域问题。

猜你喜欢