同源策略、跨域、jsonp

Q&A

1. 什么是同源策略？

• 源：协议，域名，端口号。（eg：http://www.baidu.com:80）
• 同源策略：同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，指的是源相同，即协议域名端口号相同。而不同源的客户端脚本未经明确授权的情况下，不能读写对方的资源。

• ** 不是同源策略**：

  
  
  

  不是同源策略

2. 什么是跨域？跨域有几种实现形式？

• 跨域：从一个页面去请求操作另一个页面的资源，绕过同源策略的限制。
• 需要跨域的情况：

需要跨域的情况

• 跨域的形式：
  
  

  跨域的形式
• 降域：
• 概念：顾名思义，在同一主域名下进行降域，需要用到DOM的domain设置。
• 特点：
  • 同域名降域；
  • 只对iframe、cookie有效；
  • 一旦降域，只能往主域名上降域，不能往前深层更改；
  • 安全性受限；
• 试验：

  
    
    
  
  
    你好,child1.a.com
    
    
  

  
    
    
  
  
    你好，a.com
    
  

document.domain

3. jsonp 的原理是什么？

• 原理：
• 动态创建script标签；
• src中传入回调函数的名字；
• 由于JS不同于Ajax，不是同源策略，所以当传入回调函数时，服务器中数据使用callback函数，并且立即生效，达到了类似于跨域的效果。
• 特点：
• 和json并没关系
• 只能进行get请求（因为script只能触发get请求，不能触发post请求）
• 可被注入恶意代码（eg：callback: alert(1);），可用字符串筛选解决；
• 需要校验身份（token）：可以共用一套cookie体系实现安全性，也可以使用jsonp自带的token变量进行验证，但是安全性依然有待考量。
• eg：

  
    
    
  
  
    按钮
    

    
    
  

"Kevin", "age"=>24, "hobby"=>"painting");
  echo $res."(".json_encode($person).")";
?>

jsonp

4. CORS是什么？

• CORS：CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
• 兼容性：
  
  

  CORS兼容性
• eg：
  正常ajax跨域访问的结果：
  
  

  未加CORS
  
  当添加CORS的响应属性，即Access-Control-Allow-Origin，浏览器在HTTP响应报文中得到该信息，即可访问源，从而跨域访问数据。

  
    
    
  
  
    按钮
    

    
    
  

"Kevin", "age"=>24, "hobby"=>"painting");
  echo json_encode($person);
?>

CORS

---

演示：

1. 本地搭建服务器，演示同源策略

• 本地搭建服务器：

  
  
  

  WAMP建立域名
  
  
  

  修改hosts
  
  

  通过修改hosts使用本地IP访问多个域名，得到结果：

  
  
  
  
  
  
  
  child1.a.com下的index.html：

  
    
    
  
  
    按钮
    

    
    
  

b.com下的data.php：

"Kevin", "age"=>24, "hobby"=>"painting");
  echo json_encode($person);
?>

得到结果就是同源策略的限制：

同源策略

• CORS：当在data.php中写入header('Access-Control-Allow-Origin:*')时，CORS生效，可以访问：
  
  

  CORS
• JSONP：
• 将index.html写成：

  
    
    
  
  
    按钮
    

    
    
  

• 将data.php改写成：

"Kevin", "age"=>24, "hobby"=>"painting");
  echo $_GET['callback']."(".json_encode($person).")";
?>

由于一级域名不同，不能采用降域的方法。

---

本文归饥人谷和本人所有，如需转载请注明来源