同源策略及跨域

以a.com 和 child.a.com
a.com 和 b.com
为例
先修改本地hosts文件，便于验证

• 引用

• 1.实现a.com 引用 child.a.com 下的main.js文件（本来就无限制）
  a.html中

<script type="text/javascript" src="//child.a.com/test/origin/main.js"></script>

• 2.a.html通过main.js文件读取child.a.com下的data(内容假设为1)文件内的内容
  main.js中：

$.get('//child.a.com/test/origin/data',function(response){
   console.log(response)
});

a.com中会报错

child.a.com中正常工作

• 降域
• 1.在a.com的html中添加

<iframe src="//child.a.com/test/origin/child.html"></iframe>

• 2.document.domain = 'a.com'在 a.com 和 child.a.com 中添加

<script type="text/javascript">
   document.domain = 'a.com';
</script>

这样就可以改变两者的域名为'a.com'，这样两者就同名了

• 3.在child.a.com中设置window.name

<script type="text/javascript">
   document.domain = 'a.com';
   window.name='child';
</script>

• 4.在a.com中进行访问

<script type="text/javascript">
       document.domain = 'a.com';
       setTimeout(function(){
           console.log(window.frames[0].window.name);
       },2000);//等待iframe加载完，否则报错
</script>

即 a.com 可以对 child.a.com中的JS进行读操作，甚至可以在 a.com 中调用 child.a.com 的JS中的方法。
child.a.com中定义方法，最好以window对象的方式定义

window.functionChild = function(){
    console.log('child.a.com');
}

a.com中调用该方法

window.frames[0].functionChild();

缺点：

• 只对iframe形式的页面有效。

• 只对拥有相同一级域名的情况有效。(child.a.com 和 a.com有相同的一级域名(a.com))，所以 a.com 和 b.com 不能通过降域来实现跨域。

• JSONP(以a.com 访问 b.com的后台php文件为例)

• 1.在 a.com 中️

<script type="text/javascript">
   function foo(data){
       console.log(data);
   }
</script>
<script type="text/javascript">
   var script = document.createElement('script');
   script.src = '//b.com/test/origin/b.php?callback=foo';/*后台的php中可以GET到($_GET["callback"])*/
   $('body').append(script);
</script>

• 2.在 b.com 的 后台 b.php 文件中️

<?php
   $data = $_GET['callback'];

   echo $data . '({"name": "Hunter","age":"22"})';/*模仿后台从数据库中得到的数据*/
?>

此时a.com的 JS文件会收到foo({"name": "Hunter","age":"22"})，所以a.com的JS文件中的foo()函数就可以执行。
所以 a.com 实现了对 b.com 下的数据库进行读的操作。

JSONP的缺点：

• 1.安全问题：任何网页只要复制JSONP的代码后，都可以实现跨域。（解决方法，附加一个动态参数，用于验证）

script type="text/javascript">
    var script = document.createElement('script');
    var cookie=...;/*动态获取的当前登录的cookie，其他网页无法获取该信息*/
    script.src = '//b.com/test/origin/b.php?callback=foo&token=cookie';/*另一端进行验证*/
    $('body').append(script);
 </script>

• 2.不能用POST请求（即只能进行读操作），只能通过GET请求（script标签只能触发GET请求，又GET方式写数据比较危险）
• 3.可能会被恶意注入信息（可以通过字符串过滤避免）

var script = document.createElement('script');
    script.src = '//b.com/test/origin/b.php?callback=alert(...)';/*另一端进行验证*/
    $('body').append(script);

• CORS(跨域资源共享)
  以 a.com 访问 b.com的后台b.php文件为例
  在 b.com的后台 b.php文件中

header("Access-Control-Allow-Origin:http://a.com");/*设置响应头后，a.com就可以访问b.com的资源了*/
    $name = $_POST["name"];
    $age = $_POST["age"];
    $ret = array($name,$age);

    echo  json_encode($ret);

设置完响应头后，a.com直接发起Ajax请求即可。

$.ajax({
   type: "POST",
   url: "//b.com/test/origin/b.php",
   data: {
    "name": "Hunter",
    "age": "22"
   },
   dataType: "json",
   success: function(msg){
     console.log(msg);
   }
});