同源策略 & 跨域

作者: 诺CIUM | 来源:发表于2018-11-20 14:29 被阅读7次

1. 同源策略（Same origin Policy）

浏览器处于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

本域指的是：

同协议：如都是 http 或者 https；
同域名：如都是 http://baidu.com/a 和 http://baidu.com/b；
同端口：如都是80端口。

如：

http://baidu.com/a/b.js 和 h88ttp://baidu.com/index.php（同源）

不同源的例子：

http://baidu.com/a.js 和 https://baidu.com/a.php（协议不同）
http://baidu.com/a.js 和 http://bbs.baidu.com/a.php（域名不同，域名必须完全相同才可以）
http://baidu.com/a.js 和 http://baidu.com:8080/a.php（端口不同，第一个是80）

需要注意的是：对于当前页面来说，页面存放 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域（即：当前代码的执行环境）。

报错范例：

server，浏览器访问 http://locallhost:8080/index.html

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')

http.createServer(function(req, res){
  var pathObj = url.parse(req.url, true)

  switch (pathObj.pathname) {
    case '/getWeather':
      res.end(JSON.stringify({beijing:'sunny'}))
      break;

    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e) {
          res.writeHead(404, 'not found')
          res.end('<h1>404 Not Found</h1>')
        }else {
          res.end(data)
        }
      })
  }
}).listen(8080)

index.html

<h1>饥人谷</h1>
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET', 'http://localhost:8080/getWeather', true)
  xhr.send()
  xhr.onload = function(){
    console.log(xhr.responseText)
  }
</script>

猜测出现报错的原因（报错：No 'Access-Control-Allow-origin' header ...):

请求未发出去，直接被浏览器拦截掉了；
请求发出去了，但服务器发现不一样，这是服务器未响应；
请求发出了，服务器也响应了，但是数据返回来之后浏览器发现不对，然后拦截掉了。

可能是这些原因导致我们的数据得不到，做个测试看到底是什么原因：

// server.js
case '/getWeather':
  console.log('get weather') // 查看它是否出现
  res.end(JSON.stringify({beijing:'sunny'}))
  break;

' get weather ' 这句话出现了，表示请求发出去了，服务器也响应了，但浏览器发现不对拦截掉了。
同源策略是浏览器的安全机制。

2. 跨域的几种方法

1. JSONP

HTML 中 script 标签可以加载其他域下的js，比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢？

可以先这样试试：

<script src="http://api.jirengu.com/weather.php"></script>

这时候会向天气接口发送请求获取数据，获取数据后做为 js 来执行。但这里有个问题，数据是 JSON 格式的数据，直接作为 JS 运行的话我如何去得到这个数据来操作呢？

这样试试：

<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后，后端会去解析 callback 这个参数获取到字符串showData，在发送数据做如下处理：

之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。用户只需要在加载提前在页面定义好showData这个全局函数，在函数内部处理参数即可：

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这就是 JSONP(JSON with padding)，总结：

JSONP 是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

JSONP 就是返回一个 JSON 然后给你加了一些东西。

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')

http.createServer(function(req, res){
  var pathObj = url.parse(req.url, true)

  switch(pathObj.pathname) {
    case '/getNews':
      var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心"
      ]
      res.setHeader('Content-Type', 'text/json; charset=utf-8')
      if(pathObj.query.callback){
        res.end(pathObj.query.callback + '(' +JSON.stringify(news) + ')')
      }else {
        res.end(JSON.stringify(news))
      }
      break;

    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e){
          res.writeHead(404, 'not found')
          res.end('<h1>404 Not Found</h1>')
        }else {
          res.end(data)
        }
      })
  }
}).listen(8080)

服务端代码注解（server.js）：

当收到参数 /getNews 时，返回一个数组 var news。
res.setHeader 是为了让我直接去访问这个请求时不出现乱码，这个是可要可不要的。
关键在于：

if(pathObj.query.callback){
  res.end(pathObj.query.callback + '(' +JSON.stringify(news) + ')')
}else {
  res.end(JSON.stringify(news))
}
break;
...
})

path.query 如果它有 callback 这个参数，那就 callback 加上 ( 加上数组再加上 )
else {res.end(JSON.stringify(news))} 如果没有 callback 这个参数就直接发数据。

后端要做的实际以前就是直接发送数据，现在加了一个判断，相当于这个接口就支持跨域了，支持 JSONP 了。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    $('.show').addEventListen('click', function(){
      var script = document.createElement('script');
      script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
      document.head.appendChild(script);
      document.head.removeChild(script);
    })

    function appendHtml(news) {
      var html = '';
      for(var i = 0; i < news.length; i++){
        html += '<li>' +news[i] + '</li>';
      }
      console.log(html);
      $('.news').innerHTML = html;
    }

    function $(selector){
      return document.querySelector(selector);
    }
  </script>
</body>
</html>

静态页面代码注解（index.html）：
功能作用：当点击按钮时，向后台发个请求获取数据，获取到数据之后，再把数据拼装 DOM 放到页面上。

当点击按钮时，先去创建一个 script 标签
var script = document.createElement('script')
然后给这个 script 设置 src 的标签
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml'
src 里面有个 getNews，有个 callback=appendHtml。
而我们全局下面有一个 appendHtml这样一个方法
function appendHtml(news){}
然后再把 script 标签放到 head 上
document.head.appendChild(script)
放上后为了让 HTML 看起来干净一点，再把 script 标签移除掉

只要把 script 标签放上去，它就会向这个东西发请求，获取到之后就会去执行，不管后面是否去移除 script 标签。

当创建标签、设置 src 之后，这是浏览器会向这个 src 里的东西发送请求。发送请求得到的是 appendHtml(数组) 这个数据，这个数据到来之后，由于我们把 script 标签放到页面上，这个数据就会当成 JS 去执行。执行它时，因为页面上已经有了 appendHtml 这个函数，所以就会执行这个函数，把 appendHtml(数组) 作为参数传递进去。

打开终端，输入 node server.js ，浏览器打开 http://localhost:8080/index.html

3. CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE 支持10以上。实现方式很简单：当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin。后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin；浏览器判断该响应头中是否包含 Origin 的值，如果有，则浏览器会处理响应，我们就可以拿到响应数据；如果不包含，浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

server.js

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')

http.createServer(function(req, res){
  var pathObj = url.parse(req.url, true)

  switch (pathObj.pathname) {
    case '/getNews':
      var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心"
        ]

      res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
      //res.setHeader('Access-Control-Allow-Origin','*')
      res.end(JSON.stringify(news))
      break;
    default:
      fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
        if(e){
          res.writeHead(404, 'not found')
          res.end('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

服务端代码注解（server.js）：
还是一样的，只是在返回数据时有一个 setHeader 设置响应头：
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080')
加上了 'Access-Control-Allow-Origin'（访问控制），允许的域是 'http://localhost:8080' （注意协议、域名、端口）这个。
换句话说，加了这句话，浏览器看到这句话之后就表示：如果我的域和它允许的是一样的，就可以去响应，继续去处理返回的数据。

CROS 就是让 ajax 本身支持跨域请求。
res.setHeader('Access-Control-Allow-Origin','*')
星号指：任何人都可以使用我的数据，浏览器允许任何人获取数据。
对于老的浏览器，比如 IE10 以下的，就可以使用 JSONP 的方式

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JSONP</title>
</head>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

  <script>
    $('.show').addEventListen('click', function(){
      var xhr = new XMLHttpRequest()
      xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
      xhr.send()
      xhr.onload = function(){
        appendHtml(JSON.parse(xhr.responseText))
      }
    })

    function appendHtml(news) {
      var html = '';
      for(var i = 0; i < news.length; i++){
        html += '<li>' +news[i] + '</li>';
      }
      $('.news').innerHTML = html;
    }

    function $(selector){
      return document.querySelector(selector);
    }
  </script>
</body>
</html>

静态页面代码注解（index.html）：
前端其实就是发生了 ajax 请求。

启动终端，执行 node server.js ，浏览器打开 http://localhost:8080/index.html，查看效果和网络请求。

4. 降域

JSONP 和 CORS 本质上是像一个不同域下的接口去获取数据，有时会涉及到另一种跨域（跨域是因为浏览器会阻止），不同域下的 iframe 的一个操作。

使用 iframe 可以显示，但无法使用 JS ，获取都不能获取到。

范例:

a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a.html</title>
    <style>
      .ct{
        width: 910px;
        margin: auto;
      }
      .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
      }
      .main input{
        margin: 20px;
        width: 200px;
      }
      .iframe{
        float: right;
      }
      iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <h1>使用降域实现跨域</h1>
      <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
      </div>

      <iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
    </div>

    <script>
      //URL: http://a.jrg.com:8080/a.html
      document.querySelector('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].document.querySelector('input').value = this.value;
      })
      document.domain = "jrg.com"
    </script>
  </body>
</html>

b.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>b.html</title>
    <style>
      html,body{
        margin: 0;
      }
      input{
        margin: 20px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">
    <script>
      // URL: http://b.jrg.com:8080/b.html

      document.querySelector('#input').addEventListener('input', function(){
        window.parent.document.querySelector('input').value = this.value;
      })
      document.domain = 'jrg.com';
    </script>
  </body>
</html>

document.domain = "jrg.com" 让当前域实现降域。
有 "http://a.jrg.com:8080/a.html" 和 "http://b.jrg.com:8080/b.html"（iframe）这两个地址，他们俩 jrg.com:8080... 这后面的部分是一样的，两个域名不一样的不能进行降域。

5. postMessage

没有主域的限制。有两个域名，域名不同。

范例:

a.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>a.html</title>
    <style>
      .ct{
        width: 910px;
        margin: auto;
      }
      .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
      }
      .main input{
        margin: 20px;
        width: 200px;
      }
      .iframe{
        float: right;
      }
      iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
      }
    </style>
  </head>
  <body>
    <div class="ct">
      <h1>使用postMessage实现跨域</h1>
      <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
      </div>

      <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

    </div>

    <script>
      //URL: http://a.jrg.com:8080/a.html
      $('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].postMessage(this.value,'*');
      })
      window.addEventListener('message',function(e) {
        $('.main input').value = e.data
        console.log(e.data);
      });
      function $(id){
        return document.querySelector(id);
      }
    </script>
  </body>
</html>

b.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>b.html</title>
    <style>
      html,body{
        margin: 0;
      }
      input{
        margin: 20px;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">
    <script>
      // URL: http://b.jrg.com:8080/b.html

      $('#input').addEventListener('input', function(){
        window.parent.postMessage(this.value, '*');
      })
      window.addEventListener('message',function(e) {
        $('#input').value = e.data
        console.log(e.data);
      });
      function $(id){
        return document.querySelector(id);
      } 
    </script>
  </body>
</html>

postMessage 原理：
当我们需要和 iframe 里的东西进行操作时，我去向当前这个 iframe 去 postMessage 一个东西。
因为我要操作里面的东西，我不能直接去操作，而是发一个消息，只要你愿意处理这个消息，那你就可以再给我一个响应，而不是像以前一样，我可以直接获取到你的 DOM，可以直接去修改你的 JS。

范例中就是：我像 window.frames[0] 直接 post 这么一个 Message(this.value, '*') （这个星号表示在任何域下都可以去接受）。

对于 b（我本身这个页面），我可以监听 message 这么一个事件。当听到 message 这一个事件时，那我就知道有人嵌套了我，给我发了一个消息。那我就可以获取到这个数据，获取到这个数据之后，我就去做对应的事情。这样的话我就可以定义出一些接口了。
我告诉你，假设你嵌套我的页面之后，如果你想去操作我的东西，那你直接操作不了。你可以去发这个消息，而我内部对这个消息有一种实现。这样的话我们之间就可以互通了。

同源策略 & 跨域

1. 同源策略（Same origin Policy）

报错范例：

2. 跨域的几种方法

1. JSONP

3. CORS

4. 降域

5. postMessage

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读