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

跨域有幾種常見的方式？你有沒有跨域使用的經(jīng)驗症革？

方式： 使用jsonp實現(xiàn)跨域？使用cors實現(xiàn)跨域？瀏覽器另類的跨域機(jī)制（除了ajax發(fā)請求產(chǎn)生跨域春叫，還有幾種場景會涉及跨域）？

一泣港、瀏覽器的安全策略：同源策略

1暂殖、什么是同源

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

（2）實例：

同源 VS 不同源

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

B呛每、不同源，即會產(chǎn)生跨域

2莉给、同源策略

即 瀏覽器出于安全方面的考慮毙石，有時候只允許腳本與本域下的接口交互。

（1）頁面發(fā)請求時颓遏，當(dāng)前的url必須與接口的url對應(yīng)起來（三同原則）

（2）瀏覽器所需的安全策略場景：

不同源的客戶端腳本在沒有明確授權(quán)的情況下徐矩，不能讀寫對方的資源。

A叁幢、發(fā)請求：如發(fā)送一個ajax請求去獲取天氣滤灯，所發(fā)請求與當(dāng)前頁面所在域是屬于同域，請求響應(yīng)曼玩，瀏覽器則會接受該請求鳞骤。這屬于瀏覽器接受請求的安全策略。（如禁止瀏覽器的安全策略黍判，則不存在任何跨域）

B豫尽、嵌入iframe的內(nèi)聯(lián)頁面：涉及到用戶登錄的安全性，假如進(jìn)入一個含有內(nèi)聯(lián)頁面的主頁面中顷帖，JS若能操作內(nèi)頁交互美旧，獲取了內(nèi)頁中含有的用戶重要的信息，如支付信息等

總結(jié)： 安全策略則遵循同源策略贬墩。對于當(dāng)前頁面來說頁面引入 JS 文件的域不重要榴嗅，重要的是加載該JS文件所在的域或url（執(zhí)行環(huán)境）。假如寫了一個頁面陶舞，引入了百度頁面的js或css等嗽测，并不存在什么跨域問題。同源所指的是js執(zhí)行環(huán)境的當(dāng)前頁面url肿孵，并不是js文件的地址

二唠粥、 跨域

1、跨域

跨域停做，是一種現(xiàn)象晤愧。繞過瀏覽器的同源策略獲取數(shù)據(jù)。怎么繞過呢雅宾？即直接沒有任何“三同”限制就能獲取數(shù)據(jù)养涮。

2、產(chǎn)生跨域

跨域的實例演示：修改host文件：給host文件 添加兩條記錄眉抬，這里使用a.com和b.com構(gòu)造一本機(jī)下的兩個不同域名平臺贯吓，方便跨域操作

//同本機(jī) 不同域名
127.0.0.1  a.com  //瀏覽器url
127.0.0.1  b.com  //接口url

3、出現(xiàn)疑問：

跨域是由誰產(chǎn)生蜀变？請求是否發(fā)出去悄谐？響應(yīng)是否產(chǎn)生？

A库北、現(xiàn)象：出現(xiàn)報錯爬舰，數(shù)據(jù)未返回看不到的三種情況：
第1種情況：請求未發(fā)出去们陆，瀏覽器攔截掉
第2種情況：請求發(fā)出去，服務(wù)器發(fā)現(xiàn)不一樣情屹，無響應(yīng)
第3種情況：請求發(fā)出去坪仇，服務(wù)器有響應(yīng)，數(shù)據(jù)返回時垃你，瀏覽器發(fā)現(xiàn)數(shù)據(jù)未匹配

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')/*執(zhí)行*/
      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 出現(xiàn)報錯

即驗證第3種情況，請求發(fā)出去惜颇，終端上也獲得響應(yīng)皆刺，


image

但瀏覽器不接收該請求，也就無任何響應(yīng)


image

三凌摄、跨域主要操作

如何設(shè)置數(shù)據(jù)羡蛾，將數(shù)據(jù)“版權(quán)化”，從而告訴瀏覽器怎么是安全的锨亏，操作上保證安全痴怨。

1、JSONP操作跨域

（1）產(chǎn)生需求：

兩個網(wǎng)站屯伞，第一個網(wǎng)站要獲取第二個網(wǎng)站上的接口數(shù)據(jù)腿箩？如何實現(xiàn)這個需求

（2）定義：

jsonp豪直， 全稱是JSON with Padding劣摇，是為了解決跨域請求資源而產(chǎn)生的解決方案。

（3）如何使用jsonp：

HTML 中 script 標(biāo)簽可以加載其他域下的js弓乙，比如我們經(jīng)常引入一個其他域下線上cdn的jQuery末融。那如何利用這個特性實現(xiàn)從其他域下獲取數(shù)據(jù)呢？
可以先這樣試試：
<script src="http://api.jirengu.com/weather.php"></script>
這時候會向天氣接口發(fā)送請求獲取數(shù)據(jù)暇韧，獲取數(shù)據(jù)后做為js來執(zhí)行勾习。但這里有個問題， 數(shù)據(jù)是 JSON格式的數(shù)據(jù)懈玻，直接作為JS運(yùn)行的話應(yīng)該如何去得到這個數(shù)據(jù)來操作呢巧婶？

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

這個請求到達(dá)后端后，后端會去解析callback這個參數(shù)獲取到字符串showData涂乌，在發(fā)送數(shù)據(jù)做如下處理：

第1步：獲得后端數(shù)據(jù)支持：與后端先協(xié)商好數(shù)據(jù)艺栈，之前后端返回數(shù)據(jù)： {"city": "hangzhou", "weather": "晴天"} ——現(xiàn)在后端返回數(shù)據(jù)： showData({"city": "hangzhou", "weather": "晴天"})

第2步：前端script標(biāo)簽在加載數(shù)據(jù)后會把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做為js來執(zhí)行，這實際上就是調(diào)用showData這個函數(shù)湾盒，同時參數(shù)是 {“city”: “hangzhou”, “weather”: “晴天”}湿右。

第3步：用戶只需要在加載提前在頁面定義好showData這個全局函數(shù)，在函數(shù)內(nèi)部處理參數(shù)即可罚勾。

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

以上就是JSONP的方式毅人。

（4）實例演示：

后端要做的：（實質(zhì)上前端也可以模擬一些簡單數(shù)據(jù)）

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)
/* 后端數(shù)據(jù)*/
  switch (pathObj.pathname) {
    case '/getNews':
      var news = [
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西吭狡！郎平安排男陪練模仿對方核心"
        ]
      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標(biāo)簽來定義一個jsonp的數(shù)據(jù)*/
<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 看結(jié)果

總結(jié)： 頁面所在的url為localhost:8080或者127.0.0.1:8080，而所請求數(shù)據(jù)接口為http://127.0.0.1:8080/getNews?callback=appendHtml丈莺，如果直接作為獨立的數(shù)據(jù)接口請求（同源策略）會被瀏覽器拒絕划煮。JSONP方式就是通過 script 標(biāo)簽加載數(shù)據(jù)的方式去獲取數(shù)據(jù)，然后將這個數(shù)據(jù)接口當(dāng)做 JS 代碼來執(zhí)行（實際是繞過了瀏覽器的同源策略缔俄，把數(shù)據(jù)直接通過script標(biāo)簽去執(zhí)行）般此。提前在頁面上聲明一個函數(shù)，函數(shù)名通過接口傳參的方式傳給后臺牵现，后臺解析到函數(shù)名后在原始數(shù)據(jù)上「包裹」這個函數(shù)名铐懊，發(fā)送給前端，即JSONP 需要對應(yīng)接口的后端的配合才能實現(xiàn)瞎疼。

2科乎、CORS操作跨域

（1）cors是什么

CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式贼急，支持現(xiàn)代瀏覽器茅茂，IE支持10以上。

（2）假如同源同域下太抓，Ajax數(shù)據(jù)的獲取

前端：設(shè)置一個Ajax請求

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

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

<script>
    /*設(shè)置一個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>

后端：設(shè)置所需數(shù)據(jù)參數(shù)和同源策略：

//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金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西空闲！郎平安排男陪練模仿對方核心"
        ]
   
  /*設(shè)置cors的數(shù)據(jù)參數(shù),以及同源同域*/
      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如何進(jìn)行跨域操作 ：

image

實現(xiàn)方式很簡單，當(dāng)你使用XMLHttpRequest發(fā)送請求時掉丽，瀏覽器發(fā)現(xiàn)該請求不符合同源策略跌榔，會給該請求加一個請求頭：Origin，后臺進(jìn)行一系列處理捶障。如果確定接受請求則在返回結(jié)果中加入一個響應(yīng)頭：Access-Control-Allow-Origin（用來判斷origin的請求地址）僧须。此時，瀏覽器通過Access-Control-Allow-Origin的標(biāo)準(zhǔn)來判別 Origin的值项炼，如果二者符合瀏覽器則會處理響應(yīng)担平，我們就可以拿到響應(yīng)數(shù)據(jù)；如果Access-Control-Allow-Origin不包含Origin 的值锭部，瀏覽器則直接駁回暂论，這時我們無法拿到響應(yīng)數(shù)據(jù)。

CORS 的表象操作讓你覺得它與同源的 ajax 請求沒啥區(qū)別空免，代碼完全一樣空另。

（4）假如，我們將setHeader改為以下：

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

相當(dāng)于在Access-Control-Allow-Origin這個標(biāo)準(zhǔn)下允許任何接口url域名獲取本域下的數(shù)據(jù)蹋砚，如圖：

image

四扼菠、跨域其他操作

1摄杂、降域

http://b.jrg.com:8080/b.html）內(nèi)嵌于主頁面（http://a.com:8080/a.html）里，兩個頁面希望不報錯循榆，如何跨域析恢？
報錯：

（2）降域，即將主頁面降級秧饮，跨域操作映挂。

（3）方法：在代碼中添加
document.domain = "jrg.com
降域后解決：無論調(diào)哪個文件，只要是同jrg.com便能跨域

image

注：與文件名無關(guān)盗尸，和域名有關(guān)柑船。只要主頁面域名和內(nèi)嵌iframe中的域名一樣，a.html和b.html都能獲取

（4）實例演示：

2泼各、postMessage

（1）需求：主頁面中內(nèi)嵌一個頁面鞍时，內(nèi)嵌頁面需可交互使用且不報錯（除非主域相同），如何跨域操作扣蜻？瀏覽器需要提供一種機(jī)制允許此操作

（2）postMessage逆巍，即手動添加postMessage的參數(shù)，允許主頁面?zhèn)鬟f該數(shù)據(jù)

（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實現(xiàn)跨域</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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末莽使，一起剝皮案震驚了整個濱河市锐极，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌芳肌，老刑警劉巖灵再，帶你破解...
    沈念sama閱讀 222,378評論 6贊 516
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異庇勃，居然都是意外死亡檬嘀，警方通過查閱死者的電腦和手機(jī)槽驶，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門责嚷，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人掂铐，你說我怎么就攤上這事罕拂。” “怎么了全陨？”我有些...
    開封第一講書人閱讀 168,983評論 0贊 362
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵爆班，是天一觀的道長。 經(jīng)常有香客問我辱姨，道長柿菩，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 59,938評論 1贊 299
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任雨涛，我火速辦了婚禮枢舶，結(jié)果婚禮上懦胞，老公的妹妹穿的比我還像新娘。我一直安慰自己凉泄，他們只是感情好躏尉，可當(dāng)我...
    茶點故事閱讀 68,955評論 6贊 398
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著后众，像睡著了一般胀糜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蒂誉，一...
    開封第一講書人閱讀 52,549評論 1贊 312
  • 城市分裂傳說
    那天教藻，我揣著相機(jī)與錄音，去河邊找鬼右锨。 笑死怖竭，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的陡蝇。 我是一名探鬼主播痊臭，決...
    沈念sama閱讀 41,063評論 3贊 422
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼登夫！你這毒婦竟也來了广匙？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,991評論 0贊 277
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤恼策，失蹤者是張志新（化名）和其女友劉穎鸦致，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涣楷，經(jīng)...
    沈念sama閱讀 46,522評論 1贊 319
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡分唾，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,604評論 3贊 342
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了狮斗。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绽乔。...
    茶點故事閱讀 40,742評論 1贊 353
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖碳褒，靈堂內(nèi)的尸體忽然破棺而出折砸，到底是詐尸還是另有隱情，我是刑警寧澤沙峻，帶...
    沈念sama閱讀 36,413評論 5贊 351
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布睦授，位于F島的核電站，受9級特大地震影響摔寨，放射性物質(zhì)發(fā)生泄漏去枷。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 42,094評論 3贊 335
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望删顶。 院中可真熱鬧疗隶，春花似錦、人聲如沸翼闹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽猎荠。三九已至坚弱，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間关摇，已是汗流浹背荒叶。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評論 1贊 274
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留输虱，地道東北人些楣。 一個月前我還...
    沈念sama閱讀 49,159評論 3贊 378
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像宪睹，于是被迫代替她去往敵國和親愁茁。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,747評論 2贊 361