摘要:同源策略做了很嚴(yán)格的限制,但是在實(shí)際的場景中,又確實(shí)有很多地方需要突破同源策略的限制,也就是我們常說的跨域。使用跨域由于同源策略,一般來說位于的網(wǎng)頁無法與不是的服務(wù)器溝通,而的元素是一個(gè)例外。
本菜雞最近在寫某個(gè)頁面請(qǐng)求數(shù)據(jù)時(shí),報(bào)了如下的錯(cuò)誤。
Failed to load https://...:
No "Access-Control-Allow-Origin" header is present on the requested resource.
Origin "http://127.0.0.1:7070" is therefore not allowed access.
了解原因后,得知是由于跨域請(qǐng)求導(dǎo)致的,學(xué)習(xí)了一下跨域及同源策略相關(guān)知識(shí)后,寫了個(gè)demo玩玩
簡單聊聊跨域要了解跨域,必須先了解瀏覽器同源策略,接下來搬運(yùn)了一些大神的總結(jié)
什么是同源策略?同源策略/SOP(Same origin policy)是一種約定,由Netscape公司1995年引入瀏覽器,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同,即便兩個(gè)不同的域名指向同一個(gè)ip地址,也非同源。
同源策略限制以下幾種行為:
1.Cookie、LocalStorage 和 IndexDB 無法讀取 2.DOM 和 Js對(duì)象無法獲得 3.AJAX 請(qǐng)求不能發(fā)送
假設(shè)沒有同源策略,那么我在A網(wǎng)站下的cookie就可以被任何一個(gè)網(wǎng)站拿到;那么這個(gè)網(wǎng)站的所有者,就可以使用我的cookie(也就是我的身份)在A網(wǎng)站下進(jìn)行操作。同源策略可以算是 web 前端安全的基石,如果缺少同源策略,瀏覽器也就沒有了安全性可言。
同源策略做了很嚴(yán)格的限制,但是在實(shí)際的場景中,又確實(shí)有很多地方需要突破同源策略的限制,也就是我們常說的跨域。
跨域的方法有很多(如接下來要玩的jsonp跨域,還有cors跨域資源共享,反向代理等等)。
由于同源策略,一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通,而HTML的 元素是一個(gè)例外。利用元素的這個(gè)開放策略,網(wǎng)頁可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON,而是任意的JavaScript,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。
示例代碼
function handleResponse(response) { alert(`You get the data : ${response}`) } const script = document.createElement("script") script.src = "http://somesite.com/json/?callback=handleResponse" document.body.insertBefore(script, document.body.firstChild)
這里的callback回調(diào)函數(shù)很重要,動(dòng)態(tài)添加在body中的script標(biāo)簽可以使用被加載的文件與HTML文件下的其他JS文件共享一個(gè)全局作用域。也就是說,
百度有一個(gè)對(duì)外暴露的數(shù)據(jù)接口:https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=1
在chrome瀏覽器中打開百度主頁,在開發(fā)者工具在 netkwork 可以找到
我們可以直接拿來使用,配合jsonp就能實(shí)現(xiàn)跨域獲取輸入框內(nèi)容相關(guān)熱點(diǎn)數(shù)據(jù)并點(diǎn)擊跳轉(zhuǎn)了,具體實(shí)現(xiàn)請(qǐng)看Github項(xiàng)目源碼
實(shí)現(xiàn)效果:
頁面結(jié)構(gòu)非常簡單,如圖:
jsonp跨域?qū)崿F(xiàn)代碼
document.onkeyup = function () { var val = text.value var script = document.createElement("script") script.src = `https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${val}&cb=dosomething`; document.body.appendChild(script) } function dosomething (data) { var oUl = document.querySelector("#lists ul") oUl.innerHTML = "" data.s.map(function (html) { var oLi = document.createElement("li") oLi.innerHTML = html oLi.onclick = function () { window.location.href = `http://www.baidu.com/s?wd=${html}` } oUl.appendChild(oLi) }) }
僅僅是一個(gè)利用jsonp實(shí)現(xiàn)跨域的簡單小demo,便于和我一樣的新手學(xué)習(xí),其它結(jié)構(gòu)和樣式文件就不一一列出來了,可以到我下載我的完整項(xiàng)目查看
完整項(xiàng)目地址:Github:baidu_demo
參考文章:
前端常見跨域解決方案(全)
JSONP和CORS實(shí)現(xiàn)跨源請(qǐng)求
再也不學(xué)AJAX了!(三)跨域獲取資源 ② - JSONP & CORS
jsonp跨域請(qǐng)求詳解——從繁至簡
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/116758.html
摘要:同源策略做了很嚴(yán)格的限制,但是在實(shí)際的場景中,又確實(shí)有很多地方需要突破同源策略的限制,也就是我們常說的跨域。使用跨域由于同源策略,一般來說位于的網(wǎng)頁無法與不是的服務(wù)器溝通,而的元素是一個(gè)例外。 本菜雞最近在寫某個(gè)頁面請(qǐng)求數(shù)據(jù)時(shí),報(bào)了如下的錯(cuò)誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要:同源策略做了很嚴(yán)格的限制,但是在實(shí)際的場景中,又確實(shí)有很多地方需要突破同源策略的限制,也就是我們常說的跨域。使用跨域由于同源策略,一般來說位于的網(wǎng)頁無法與不是的服務(wù)器溝通,而的元素是一個(gè)例外。 本菜雞最近在寫某個(gè)頁面請(qǐng)求數(shù)據(jù)時(shí),報(bào)了如下的錯(cuò)誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
摘要:四跨域攻擊跨域攻擊可以理解為誘導(dǎo)受害者訪問非法網(wǎng)站,黑客利用受害者的會(huì)話信息模擬請(qǐng)求,以達(dá)到篡改數(shù)據(jù)的目的。我們?cè)诎俣壬纤阉饕恍╆P(guān)鍵字之后,訪問其他網(wǎng)站時(shí)例如會(huì)發(fā)現(xiàn),為何我剛剛搜索的關(guān)鍵字圖片會(huì)在網(wǎng)頁上顯示那很有可能放置了百度的腳本代碼。 本人工作中偶爾會(huì)和瀏覽器打交道,也遇到過一些坑,在此分享一下網(wǎng)頁跨域訪問的相關(guān)場景和知識(shí),希望對(duì)讀者有幫助。本文來自于我的博客網(wǎng)站:www.51th...
摘要:四跨域攻擊跨域攻擊可以理解為誘導(dǎo)受害者訪問非法網(wǎng)站,黑客利用受害者的會(huì)話信息模擬請(qǐng)求,以達(dá)到篡改數(shù)據(jù)的目的。我們?cè)诎俣壬纤阉饕恍╆P(guān)鍵字之后,訪問其他網(wǎng)站時(shí)例如會(huì)發(fā)現(xiàn),為何我剛剛搜索的關(guān)鍵字圖片會(huì)在網(wǎng)頁上顯示那很有可能放置了百度的腳本代碼。 本人工作中偶爾會(huì)和瀏覽器打交道,也遇到過一些坑,在此分享一下網(wǎng)頁跨域訪問的相關(guān)場景和知識(shí),希望對(duì)讀者有幫助。本文來自于我的博客網(wǎng)站:www.51th...
閱讀 2310·2021-11-22 12:01
閱讀 1983·2021-11-12 10:34
閱讀 4508·2021-09-22 15:47
閱讀 2827·2019-08-30 15:56
閱讀 2861·2019-08-30 15:53
閱讀 2397·2019-08-30 13:53
閱讀 3370·2019-08-29 15:35
閱讀 3119·2019-08-29 12:27