同源策略、跨域、jsonp

Q&A

1. 什么是同源策略？

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

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


    不是同源策略

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

  • 跨域：从一个页面去请求操作另一个页面的资源，绕过同源策略的限制。
  • 需要跨域的情况：
需要跨域的情况
  • 跨域的形式：
    跨域的形式
  • 降域：
  • 概念：顾名思义，在同一主域名下进行降域，需要用到DOM的domain设置。
  • 特点：
    • 同域名降域；
    • 只对iframe、cookie有效；
    • 一旦降域，只能往主域名上降域，不能往前深层更改；
    • 安全性受限；
  • 试验：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>child1.a.com</title>
  </head>
  <body style="background:#333">
    你好,child1.a.com
    <iframe src="//a.com/index.html"></iframe>
    <script>
      // document.domain = 'a.com';   // 为了验证
      window.name = location.href;
      var ifr = window.frames[0];
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a.com</title>
  </head>
  <body style="background:#fff">
    你好，a.com
    <script>
      document.domain = 'a.com';
      window.name = 'index2';
    </script>
  </body>
</html>
document.domain

3. jsonp 的原理是什么？

  • 原理：
  • 动态创建script标签；
  • src中传入回调函数的名字；
  • 由于JS不同于Ajax，不是同源策略，所以当传入回调函数时，服务器中数据使用callback函数，并且立即生效，达到了类似于跨域的效果。
  • 特点：
  • 和json并没关系
  • 只能进行get请求（因为script只能触发get请求，不能触发post请求）
  • 可被注入恶意代码（eg：callback: alert(1);），可用字符串筛选解决；
  • 需要校验身份（token）：可以共用一套cookie体系实现安全性，也可以使用jsonp自带的token变量进行验证，但是安全性依然有待考量。
  • eg：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>child1.a.com</title>
  </head>
  <body>
    <button id="get" type="button">按钮</button>
    <div class="show-data"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      function localHandler(res) {
        var str = '';
        for(var key in res) {
          str += key + ':' + res[key] + '<br>';
        }
        $('.show-data').html(str);
      }
      $('#get').on('click', function() {
        var url = '//b.com/data.php?callback=localHandler';
        var script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);
      });

    </script>
  </body>
</html>

<?php
  $res = $_GET['callback'];
  $person = array("name"=>"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响应报文中得到该信息，即可访问源，从而跨域访问数据。
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>child1.a.com</title>
  </head>
  <body>
    <button id="get" type="button">按钮</button>
    <div class="show-data"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

      function onSuccess(res) {
        var str = '';
        for(var key in res) {
          str += key + ':' + res[key] + '<br>';
        }
        $('.show-data').html(str);
      }
      $('#get').on('click', function() {
        $.ajax({
          url: '//b.com/data.php',
          type: 'get',
          dataType: 'json',
          success: function(res) {
            onSuccess(res);
          },
          error: function() {
            alert('异常');
          }
        });
      });
    </script>
  </body>
</html>

<?php
  header('Access-Control-Allow-Origin:*');
  $person = array("name"=>"Kevin", "age"=>24, "hobby"=>"painting");
  echo json_encode($person);
?>
CORS

演示：

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

  • 本地搭建服务器：


    WAMP建立域名

    修改hosts

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




    child1.a.com下的index.html：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>child1.a.com</title>
  </head>
  <body>
    <button id="get" type="button">按钮</button>
    <div class="show-data"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

      function onSuccess(res) {
        var str = '';
        for(var key in res) {
          str += key + ':' + res[key] + '<br>';
        }
        $('.show-data').html(str);
      }
      $('#get').on('click', function() {
        $.ajax({
          url: '//b.com/data.php',
          type: 'get',
          dataType: 'json',
          success: function(res) {
            onSuccess(res);
          },
          error: function() {
            alert('异常');
          }
        });
      });
    </script>
  </body>
</html>

b.com下的data.php：

<?php
  // header('Access-Control-Allow-Origin:*');
  $person = array("name"=>"Kevin", "age"=>24, "hobby"=>"painting");
  echo json_encode($person);
?>

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


同源策略
  • CORS：当在data.php中写入header('Access-Control-Allow-Origin:*')时，CORS生效，可以访问：
    CORS
  • JSONP：
  • 将index.html写成：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>child1.a.com</title>
  </head>
  <body>
    <button id="get" type="button">按钮</button>
    <div class="show-data"></div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
      function localHandler(res) {
        var str = '';
        for(var key in res) {
          str += key + ':' + res[key] + '<br>';
        }
        $('.show-data').html(str);
      }
      $('#get').on('click', function() {
        var url = '//b.com/data.php?callback=localHandler';
        var script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);
      });

    </script>
  </body>
</html>
  • 将data.php改写成：
<?php
  $person = array("name"=>"Kevin", "age"=>24, "hobby"=>"painting");
  echo $_GET['callback']."(".json_encode($person).")";
?>

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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容