#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.jshttp://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
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼登夫!你這毒婦竟也來了广匙?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評論 0 277
  • 序言:老撾萬榮一對情侶失蹤恼策,失蹤者是張志新(化名)和其女友劉穎鸦致,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涣楷,經(jīng)...
    沈念sama閱讀 46,522評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡分唾,尸身上長有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
  • 正文 年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