1.什么是同源策略
所谓"同源"指的是"三个相同"：(1)协议相同,(2)域名相同,(3)端口相同
同源策略是浏览器的一个功能，也是浏览器安全的基石，最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，从而保证用户信息的安全性。随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制：
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
换句话说：不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。
2.什么是跨域？跨域有几种实现形式
什么是跨域：跨域即突破同源策略的限制。
跨域有六种实现方式：
-
1.document.domain+iframe
应用范围：这种办法只能解决主域相同而子域不同，且是iframe形式的跨域；
存在问题：安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞。 -
2.JSONP
应用范围：因为是基于script标签，所有只能进行GET请求
存在问题：存在安全性问题，可被注入可执行的js代码（callback=alert(1)）, 对于这个问题，只能通过外界的字符串过滤来解决，如禁止callback中传入括号，使用正则去除左右括号，callback=callback.replace(/\(/g,"")，callback=callback.replace(/\)/g,"") -
3.CORS
给被访问方设置Access-Control-Allow-Origin，如在php文件头部写入header('Access-Control-Allow-Origin:http://a.com:8080'),表示允许来自源http://a.com:8080的请求。这是跨域AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。但是IE10及以下IE版本不支持。 -
4.HTML5 postMessage
这是HTML5的新功能，用postMessage支持基于web的实时消息传递。 -
5.利用iframe和location.hash
这个方法比较绕，原理是利用location.hash来传值。url中#号及其后面的内容就是location.hash,改变hash的值页面并不会刷新，所以可以利用hash值来进行数据传递。
这种方法缺点也很多，诸如数据直接暴露在了url中，数据容量和类型都有限等。 -
6.利用window.name
主要利用window.name值不随url改变而改变，只要当前页面没被关闭，window.name的值就不会改变。
3.jsonp 的原理是什么
JSONP是服务器与客户端l跨域通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
原理：网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
4.CORS是什么?
CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。
支持情况：CORS需要浏览器和服务器同时支持，只要服务器实现了CORS接口，且浏览器支持该功能（目前所有浏览器都支持该功能，IE浏览器不能低于IE10），就可以跨域通信。
对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
实际操作
1.本地搭建服务器，演示同源策略
这里以Wampserver为例演示，具体步骤：
1.在Wampserver软件的www目录下新建两个文件，index.html和main.js。其中，index.html的主要内容如下：
<body>
<h1>hello world!</h1>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
// 分别做如下3个测试
//测试一：a.com/index引用b.com域名下的main.js文件
<script src="//b.com:8080/main.js"></script>
//测试二：a.com/index通过ajax请求b.com域名下的main.js文件
<script type="text/javascript">
$.get("//b.com:8080/main.js",function(response){
console.log(response);
})
</script>
//测试三：a.com/index 通过ajax请求a.com域名下的main.js文件
<script type="text/javascript">
$.get("//a.com:8080/main.js",function(response){
console.log(response);
})
</script>
</body>
main.js的内容如下:
alert (1);
2.以管理员权限运行记事本，用记事本打开路径Windows/System32/drivers/etc下的hosts文件，添加如下两条IP和域名的对应信息。目的是让a.com和b.com两个域名都指向本地机。
127.0.0.1 a.com
127.0.0.1 b.com
3.启动Wampserver，浏览器地址栏输入a.com:8080
4.测试结果：
- 测试一结果：页面 alert(1)，无报错。
说明a.com可以引用b.com里的main.js文件（只是引用，并未读写）。 - 测试二结果：页面无弹框，控制台报错。
受同源策略的限制，a.com不能读写b.com域名下文件，因而控制台会报错，同时main.js里的脚本也不会执行 - 测试三结果：页面alert(1),控制台打印“alert(1)”
- a.com/index通过ajax请求了a.com域名下的main.js文件，说明相同域名之下，文件是可以互相读写的。
2.至少使用一种方式解决跨域问题
方法一：document.domain+iframe
对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。如a.com和child1.a.com,可以在这两个文件中分别加上document.domain = ‘a.com’，然后通过a.html文件中创建一个iframe，去控制iframe的contentDocument。
示例：
host文件添加127.0.0.1 child1.a.com ，index文件内容如下:
<iframe src="//child1.a.com:8080/index2.html" frameborder="0"></iframe>
<script type="text/javascript">
window.onload=function(){
document.domain = "a.com"; //降域
var iframe=window.frames[0];
console.log(iframe.window.name);
}
</script>
index2文件内容如下：
<p>index2</p>
<script type="text/javascript">
document.domain = "a.com"; //降域
window.name="index2";
</script>
浏览器地址栏输入a.com:8080，可以看到，控制台打印出了“index2”, 即，通过document.domain方法，a.com读取到了iframe窗口的window.name属性的值。
方法二：JSONP
虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。
以下演示a.com/index引用b.com域名下的server.php文件
index文件内容如下：
<script>
window.foo=function(data){
alert(data);
}
</script>
//动态引用
<script>
var script=document.createElement("script");
script.src="//b.com:8080/server.php?callback=foo";
document.body.appendChild(script);
</script>
// 或者静态引用，和动态引用没有本质差别
// <script src="//b.com:8080/server.php?callback=foo"></script>
server.php文件内容如下：
<?php
$callback=$_GET["callback"];
echo $callback . "('来自b.com的数据')"; //foo('来自b.com的数据')
?>
浏览器地址栏输入a.com:8080,可以看到如下图弹框，说明通过jsonp已经成功得到了b.com下的数据。
方法三：CORS
以下演示a.com/index通过ajax请求b.com域名下的server.php文件
index文件内容如下:
<script>
$.get("//b.com:8080/server.php?callback=小明",function(response){
console.log(response); //小明：18
})
</script>
server.php文件内容如下：
<?php
header('Access-Control-Allow-Origin:http://a.com:8080'); //设置php头部信息，表示允许a.com访问
$arr = array('小明' => "18", "花花"=>"16","天天"=>"15");
$callback=$_GET["callback"];
echo $callback .":".$arr[$callback];
?>
浏览器地址栏输入a.com:8080,可以看到控制台打印出“小明：18”，说明通过给php设置Access-Control-Allow-Origin头部信息可以实现跨域。
网友评论