JavaScript之跨域

同源策略(Same origin Policy)

是什么？

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

同源是什么?

如果协议，端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源。

image.png

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 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 '/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(8011)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>饥人谷</h1>
<script>
  var xhr = new XMLHttpRequest()
  xhr.open('GET','http://localhost:8011/getWeather', true)
  xhr.send()
  xhr.onload = function(){
    console.log(xhr.responseText)
  }
</script>
</body>
</html>
image.png

当我们修改index.html 中

     xhr.open('GET','http://localhost:8011/getWeather', true)
#   xhr.open('GET','http://127.0.0.1:8011/getWeather', true)
image.png

因为不是同源，所以会报错。
那我们的请求有没有发出去？答案是有的，看我们上面的代码，我们写了console.log("get weather")说明请求发出去了，所以终端会打印get weather


image.png

那我们请求发出去，有没有响应呢？别急继续往下看

image.png

也响应了，但是浏览器不接收，因为浏览器认为这个是不安全的，所以同源策略是浏览器的安全机制。
总之，同源策略就是当页面向接口发请求的时候，页面的URL和接口的URL是同源的。

JSONP

如果我们的页面向接口请求的话，假设是不同源的，我们该怎么做？
举个例子，我们手下有两个网站，A网站和B网站，A网站想使用B网站的某个接口获取数据，即使这两个网站在同一个服务器上，浏览器也是会阻止掉的，所以我们引用了JSONP。

是什么？

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

JSONP举例

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(8088)

index,html

<!DOCTYPE html>
<html>
<body>
<div class="container">
  <ul class="news">
  </ul>
  <button class="show">show news</button>
</div>

<script>

  $('.show').addEventListener('click', function(){
    var script = document.createElement('script');
    script.src = 'http://127.0.0.1:8088/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>
</body>
</html>

注意上面的代码index.html的script.src要和server,js监听端口号一致，否则会出现下面问题

image.png

正常应该是这样显示

image.png

注意当前页面是localhost:8088/index.html,而我们请求的是127.0.0.1:8088/index.html
JSONP是比较HACK的跨域方法，现在不常使用

CORS(Cross-Origin Resource Sharing)

是什么？

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

CORS举例

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:8081')
     //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(8081)

index.html

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

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

<script>

  $('.show').addEventListener('click', function(){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://127.0.0.1:8081/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>

第一种是正常情况


image.png

第二种就是跨域


image.png

加了一个声明，Access-Control-Allow-Origin，允许哪些域使用我的数据。

JSONP和CORS本质是从不同域的接口获取数据，下面我们要说一下如何iframe跨域。

降域

比如当前页面下，我们埋了一个iframe，iframe对应的地址是taobao.com,假设你刚刚用电脑访问过淘宝，买了一些东西，然后又访问这个页面，而这个iframe会自动加载，并且是登录状态。假设浏览器没有做一些安全限制，那在当前页面下，我们是可以使用JavaScript来操控iframe上的内容，我们就可以知道淘宝用户是谁，当前金额是多少，我们甚至可以操作模拟用户的点击，所以浏览器不会让你这么做，所以浏览器想到一个办法，只有是当前域名的iframe，你才可以访问里面的东西。换句话说，我们的页面埋下的iframe页面，如果是不同域，虽然可以加载，但是外部的JavaScript是无法操作里的内容。

举例

a.html

<html>

<head>

<meta charset="utf-8">

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

<div class="ct">

<h1>使用降域实现跨域</h1>

<div class="main">

<input type="text" placeholder="http://a.com:8080/a.html">

</div>

<iframe src="http://b.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>

</html>

b.html


<html>
<head>
  <meta charset="utf-8">
<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>
image.png

上图分为左右框，右框为iframe页面，我们这时操作iframe，出现报错
因为当前页面和ifame页面是不同域的。
当我们修改使其为同一域

image.png

假使当前页面a.jrg.com ,而iframe为b.jrg.com ,这时我们使用document.domain='jrg.com' 这样就可以操作iframe了，这就是通过降域实现操作iframe

postMessage

假设现在我们有一个页面，我写的页面是在我的域名下。我希望我这个页面可以供其他人使用。其他人可以把我的页面作为iframe页面嵌入到自己的页面当中去。我还希望他们可以在他们的页面上操作我的页面，因为我愿意提供自己的页面，可是按照同源机制，只要域名不一样，他们就不可以操作我的页面，除非我们的主域是相同的，这时该怎么办呢？需要用到postmessage

是什么？

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

比如说我们的网站嵌入一个官网叫mychat,我希望我的页面和它里面的内容进行交互，mychat就可以支持postmessage,我就可以向他post我的消息，它收到之后，做对应的事情，它给我一个文档告诉我怎么做。

举例

a.html

<html>

<head>

<meta charset="utf-8">

<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);

}

</body>

</script>

</html>

b.html


<html>
<head>
    <meta charset="utf-8">
    <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

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 215,012评论 6赞 497
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,628评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,653评论 0赞 350
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,485评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,574评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,590评论 1赞 293
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,596评论 3赞 414
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,340评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,794评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2赞 330
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1赞 344
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,940评论 5赞 339
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,583评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2赞 366
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2赞 352

推荐阅读更多精彩内容

  • 进阶13:同源策略及跨域
    题目1.什么是同源策略? 同源策略(Same origin Policy): 浏览器出于安全方面的考虑，只允许与本...
    FLYSASA阅读 1,719评论 0赞 6
  • 跨域
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    w_zhuan阅读 513评论 0赞 0
  • 跨域问题
    1. 什么是跨域？ 跨域一词从字面意思看，就是跨域名嘛，但实际上跨域的范围绝对不止那么狭隘。具体概念如下：只要协议...
    他在发呆阅读 822评论 0赞 0
  • 前端常见跨域解决方案（全）
    什么是跨域？ 2.) 资源嵌入：、、、等dom标签，还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,369评论 0赞 5
  • 晨读感悟 换个方式读书
    最近几年读书风气盛行，好多人都在为知识付费，这是好现象，但是又存在另一个情况，屯了好多书，却没有看，占用了很多空间...
    翔子52双鱼阅读 346评论 0赞 2