#hello，JS：15 同源策略 & 跨域(JSONP)

作者: 饥人谷_远方 | 来源:发表于2018-09-01 14:12 被阅读0次

跨域有几种常见的方式？你有没有跨域使用的经验？

方式： 使用jsonp实现跨域？使用cors实现跨域？浏览器另类的跨域机制（除了ajax发请求产生跨域，还有几种场景会涉及跨域）？

一、浏览器的安全策略：同源策略

1、什么是同源

（1）同源（或本域）指：

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

（2）实例：

同源 VS 不同源

A、同源，如：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php

B、不同源，即会产生跨域

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

2、同源策略

即浏览器出于安全方面的考虑，有时候只允许脚本与本域下的接口交互。

（1）页面发请求时，当前的url必须与接口的url对应起来（三同原则）

（2）浏览器所需的安全策略场景：

不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

A、发请求：如发送一个ajax请求去获取天气，所发请求与当前页面所在域是属于同域，请求响应，浏览器则会接受该请求。这属于浏览器接受请求的安全策略。（如禁止浏览器的安全策略，则不存在任何跨域）

B、嵌入iframe的内联页面：涉及到用户登录的安全性，假如进入一个含有内联页面的主页面中，JS若能操作内页交互，获取了内页中含有的用户重要的信息，如支付信息等

总结： 安全策略则遵循同源策略。对于当前页面来说页面引入 JS 文件的域不重要，重要的是加载该JS文件所在的域或url（执行环境）。假如写了一个页面，引入了百度页面的js或css等，并不存在什么跨域问题。同源所指的是js执行环境的当前页面url，并不是js文件的地址

二、跨域

1、跨域

跨域，是一种现象。绕过浏览器的同源策略获取数据。怎么绕过呢？即直接没有任何“三同”限制就能获取数据。

2、产生跨域

跨域的实例演示：修改host文件：给host文件添加两条记录，这里使用a.com和b.com构造一本机下的两个不同域名平台，方便跨域操作

//同本机 不同域名
127.0.0.1  a.com  //浏览器url
127.0.0.1  b.com  //接口url

3、出现疑问：

跨域是由谁产生？请求是否发出去？响应是否产生？

A、现象：出现报错，数据未返回看不到的三种情况：
第1种情况：请求未发出去，浏览器拦截掉
第2种情况：请求发出去，服务器发现不一样，无响应
第3种情况：请求发出去，服务器有响应，数据返回时，浏览器发现数据未匹配

B、实例演示第3种情况：
index.html:

//index.html
<h1>hello world</h1>
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET','http://b.com:8080/getWeather', true)
  xhr.send()
  xhr.onload = function(){
    console.log(xhr.responseText)
  }
</script>

server.js

//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)
//console.log(pathObj)

  switch (pathObj.pathname) {
    case '/getWeather':
      console.log('get Weather')/*执行*/
      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)

而浏览器则打开：http://a.com:8080/index.html 出现报错

即验证第3种情况，请求发出去，终端上也获得响应，

image

但浏览器不接收该请求，也就无任何响应

image

三、跨域主要操作

如何设置数据，将数据“版权化”，从而告诉浏览器怎么是安全的，操作上保证安全。

1、JSONP操作跨域

（1）产生需求：

两个网站，第一个网站要获取第二个网站上的接口数据？如何实现这个需求

（2）定义：

jsonp，全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。

（3）如何使用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，在发送数据做如下处理：

第1步：获得后端数据支持：与后端先协商好数据，之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} ——现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"})

第2步：前端script标签在加载数据后会把「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为js来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。

第3步：用户只需要在加载提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

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

以上就是JSONP的方式。

（4）实例演示：

后端要做的：（实质上前端也可以模拟一些简单数据）

server.js:

//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')/*防止乱码*/
      
      /*支持跨域中的JSONP方法*/
      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)

前端要做的：shownews这个前端交互是url：localhost:8080/index.html或127.0.0.1：8080/index.html

//index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

/*使用script标签来定义一个jsonp的数据*/
<script>

  $('.show').addEventListener('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 $(id){
    return document.querySelector(id);
  }
</script>

</html>

启动终端

$ node server.js

打开浏览器：localhost:8080/index.html或127.0.0.1:8080/index.html 看结果

总结： 页面所在的url为localhost:8080或者127.0.0.1:8080，而所请求数据接口为http://127.0.0.1:8080/getNews?callback=appendHtml，如果直接作为独立的数据接口请求（同源策略）会被浏览器拒绝。JSONP方式就是通过 script 标签加载数据的方式去获取数据，然后将这个数据接口当做 JS 代码来执行（实际是绕过了浏览器的同源策略，把数据直接通过script标签去执行）。提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端，即JSONP 需要对应接口的后端的配合才能实现。

2、CORS操作跨域

（1）cors是什么

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

（2）假如同源同域下，Ajax数据的获取

前端：设置一个Ajax请求

//index.html
<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">

    </ul>
    <button class="show">show news</button>
  </div>

<script>
    /*设置一个Ajax请求*/
  $('.show').addEventListener('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>

</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 '/getNews':
      var news = [
        "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
        "正直播柴飚/洪炜出战 男双力争会师决赛",
        "女排将死磕巴西！郎平安排男陪练模仿对方核心"
        ]
   
  /*设置cors的数据参数,以及同源同域*/
      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)

（3）如果不同域， Ajax本身也支持跨域？浏览器又如何识别，看看CORS如何进行跨域操作：

image
实现方式很简单，当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理。如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin（用来判断origin的请求地址）。此时，浏览器通过Access-Control-Allow-Origin的标准来判别 Origin的值，如果二者符合浏览器则会处理响应，我们就可以拿到响应数据；如果Access-Control-Allow-Origin不包含Origin 的值，浏览器则直接驳回，这时我们无法拿到响应数据。

CORS 的表象操作让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

（4）假如，我们将setHeader改为以下：

res.setHeader('Access-Control-Allow-Origin','*')

相当于在Access-Control-Allow-Origin这个标准下允许任何接口url域名获取本域下的数据，如图：

image

四、跨域其他操作

1、降域

http://b.jrg.com:8080/b.html）内嵌于主页面（http://a.com:8080/a.html）里，两个页面希望不报错，如何跨域？
报错：

（2）降域，即将主页面降级，跨域操作。

（3）方法：在代码中添加
document.domain = "jrg.com
降域后解决：无论调哪个文件，只要是同jrg.com便能跨域

image
注：与文件名无关，和域名有关。只要主页面域名和内嵌iframe中的域名一样，a.html和b.html都能获取

（4）实例演示：

2、postMessage

（1）需求：主页面中内嵌一个页面，内嵌页面需可交互使用且不报错（除非主域相同），如何跨域操作？浏览器需要提供一种机制允许此操作

（2）postMessage，即手动添加postMessage的参数，允许主页面传递该数据

（3）方法：在全局中添加一个

window.frames[0].postMessage(this.value,'*');

（4）实例演示：

a.html

//a.html
<html>
<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>

<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>
</html>

b.html

//b.html
<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <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>
</html>

#hello，JS：15 同源策略 & 跨域(JSONP)

一、浏览器的安全策略：同源策略

1、什么是同源

2、同源策略

二、跨域

1、跨域

2、产生跨域

3、出现疑问：

三、跨域主要操作

1、JSONP操作跨域

2、CORS操作跨域

四、跨域其他操作

1、降域

2、postMessage

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

#hello，JS：15 同源策略 & 跨域(JSONP)

一、浏览器的安全策略：同源策略

1、什么是同源

2、同源策略

二、 跨域

1、跨域

2、产生跨域

3、出现疑问：

三、跨域主要操作

1、JSONP操作跨域

2、CORS操作跨域

四、跨域其他操作

1、降域

2、postMessage

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

二、跨域