1. 什么是同源策略
同源是指域名、协议、端口相同。
同源策略(Same-Origin Policy)是浏览器的一个功能；最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，从而保证用户信息的安全性。随着互联网的发展，"同源政策"越来越严格。目前，如果非同源，共有三种行为受到限制：(1) Cookie、LocalStorage 和 IndexDB 无法读取。(2) DOM 无法获得。(3) AJAX 请求不能发送。换句话说：不同源的客户端脚本在没明确授权的情况下，不能读写对方的资源。
2. 什么是跨域？跨域有几种实现形式
简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表：
实现形式：
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')
,表示允许来自源http://a.com
的请求。这是跨域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 的原理是什么
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
4. CORS是什么
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
练习
- 本地搭建服务器，演示同源策略
- 本地搭建服务器（如果使用 SAE 可创建不同的代码版本，这样可通过1.xxx.sinapp.com和2.xxx.sinapp.com 访问了）2. 修改 本地host，通过不同域名访问本地服务器。比如访问http://a.com/index.html, http://b.com/ajax.php，本质是3. 在 index.html 里使用 ajax 接口访问 http://b.com/ajax.php 里的数据。4. 查看输出报错
这里以XAMPP为例演示，具体步骤：
在XAMPP软件的htdocs/tests/cross-origin目录下新建两个文件，index.html和main.js。其中，index.html的主要内容如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>同源策略</title></head><body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script src="//b.com/tests/cross-origin/main.js"></script> <script type="text/javascript"> $.get('//b.com/tests/cross-origin/main.js',function(response){ console.log(response); }) </script> <script type="text/javascript"> $.get('//a.com/tests/cross-origin/main.js',function(response){ console.log(response); }) </script></body></html>
main.js的内容如下:
alert (1);
以管理员权限运行记事本，用记事本打开路径Windows/System32/drivers/etc下的hosts文件，添加如下两条IP和域名的对应信息。目的是让a.com和b.com两个域名都指向本地机。127.0.0.1 a.com127.0.0.1 b.com
启动XAMPP，浏览器地址栏输入a.com/tests/cross-origin/index.html
测试结果：
测试一结果：页面 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文件，说明相同域名之下，文件是可以互相读写的。
- 至少使用一种方式解决跨域问题
方法一：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
，新建index1文件，内容如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index1</title></head><body> <h1>hello world</h1> <iframe src="//child1.a.com/tests/cross-origin/index2.html" frameborder="0" style="background-color: #ccc"></iframe> <script type="text/javascript"> window.onload = function(){ document.domain = 'a.com'; var iframe = window.frames[0]; console.log(iframe.window.name); } </script></body></html>
index2文件内容如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index2</title></head><body background="#ccc"> <p>index2</p> <script type="text/javascript"> document.domain = "a.com"; window.name = "index2" </script></body></html>
浏览器地址栏输入a.com/tests/cross-origin/index1.html
，可以看到，控制台打印出了“index2”, 即，通过document.domain方法，a.com读取到了指向child1.a.com的iframe窗口的window.name属性的值。
方法二：JSONP虽然浏览器默认禁止了跨域访问，但并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function（包括操作cookie、Dom等等）。根据这一点，可以方便地通过创建script节点的方法来实现完全跨域的通信。以下演示a.com域名下的JSONP.html引用b.com域名下的server.php文件JSONP.html文件内容如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JSONP</title></head><body> <script type="text/javascript"> window.foo = function(data){ alert(data); } </script> <script type="text/javascript"> var script = document.createElement('script'); script.src = '//b.com/tests/cross-origin/server.php?callback=foo'; document.body.appendChild(script); </script> </body></html>
server.php文件内容如下：
<?php$callback = $_GET["callback"];echo $callback . '("来自b.com里的数据")'; //foo("来自b.com里的数据")?>
浏览器地址栏输入//a.com/tests/cross-origin/JSONP.html,可以看到如下图弹框，说明通过jsonp已经成功得到了b.com下的数据。
方法三：CORS以下演示a.com下的CORS.html通过ajax请求b.com域名下的server-CORS.php文件CORS.html文件内容如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CORS</title></head><body> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script> <script type="text/javascript"> $.get("//b.com/tests/cross-origin/server-CORS.php?callback=小美",function(response){ console.log(response); //小美：22 }) </script></body></html>
server-CORS.php文件内容如下：
<?php //设置php头部信息，表示允许a.com访问 header('Access-Control-Allow-Origin:http://a.com'); $arr = array('小明'=>'18','小红'=>'20','小美'=>'22'); $callback = $_GET["callback"]; echo $callback.':'.$arr[$callback];?>
浏览器地址栏输入http://a.com/tests/cross-origin/CORS.html
,可以看到控制台打印出“小美：22”，说明通过给php设置Access-Control-Allow-Origin头部信息可以实现跨域。
方法四：使用HTML5 postMessagea.com下h5-index.html中的代码：
<iframe id="ifr" src="//b.com/tests/cross-origin/h5-index2.html" style="background-color: #ccc"></iframe> <script type="text/javascript"> window.onload = function(){ var ifr = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; ifr.contentWindow.postMessage('我在这里',targetOrigin); } </script>
b.com下h5-index2.html中的代码：
<script type="text/javascript"> window.addEventListener('message',function(event){ // 通过origin属性判断消息来源地址 if(event.origin = 'http://a.com'){ alert(event.data); // 弹出"我在这里" alert(event.source); // 对a.com、index.html中window对象的引用。 //但由于同源策略，这里event.source不可以访问window对象 } }) </script>
最终效果：
网友评论