摘要:于是,不法分子們就抓住這個(gè)漏洞,開(kāi)始了與瀏覽器的同源策略做斗爭(zhēng),打了場(chǎng)勝仗。于是呢,所謂的就相當(dāng)于是利用到的這一段代碼的方式。使用方法就是前后端相互溝通好,前端定義好一個(gè)函數(shù),用來(lái)解析異步請(qǐng)求的數(shù)據(jù)。
為什么要寫(xiě)這個(gè)短文?我在復(fù)習(xí) JSONP 知識(shí)的時(shí)候,隨便搜了幾篇文章看,額......后來(lái)就有了寫(xiě)它的想法。
首先,頁(yè)面中的標(biāo)簽里面放的是 js 代碼,而加上 src 屬性后標(biāo)簽就有了加載和運(yùn)行外部 js 代碼的能力。
于是,不法分子們就抓住這個(gè)漏洞,開(kāi)始了與瀏覽器的同源策略做斗爭(zhēng),打了場(chǎng)勝仗。
加上 src 屬性的 script 標(biāo)簽,是利用 HTTP 的 GET 方法去訪問(wèn)你指定的 url 的,
它預(yù)期會(huì) GET 到一個(gè) js 文件或者是一段 js 代碼,然后瀏覽器會(huì)去執(zhí)行它。
于是呢,所謂的 JSONP 就相當(dāng)于是利用 GET 到的這一段 js 代碼的方式。
使用方法就是:
1、前后端相互溝通好,前端定義好一個(gè)函數(shù),用來(lái)解析異步請(qǐng)求的數(shù)據(jù)。
例子:
function ajax(result) { // 處理 result }
2、后端寫(xiě)一個(gè)接口,告訴前端你請(qǐng)求我接口的時(shí)候要加上 function 這個(gè)參數(shù),然后返回這個(gè)函數(shù)的執(zhí)行方式。
例子:
// 接口:http://www.abc.com/api?function=ajax // 后端得到 function 參數(shù)的這個(gè)前端定義的函數(shù)名,示例是 ajax,然后像下面這樣組合好后返回: // return "ajax(1)";
3、前端在 script 標(biāo)簽里的 src 屬性設(shè)置為這個(gè)接口。
例子:
這個(gè)時(shí)候,瀏覽器就會(huì)去 GET 請(qǐng)求接口,然后 script 標(biāo)簽得到 ajax(1) 這個(gè) js 代碼,然后瀏覽器開(kāi)始執(zhí)行它,因?yàn)槟闶孪纫呀?jīng)定義過(guò) ajax 函數(shù)了,所以 ajax(1) 會(huì)正常運(yùn)行。
但是,第三步需要是異步請(qǐng)求,那么就在需要做請(qǐng)求操作的地方,利用 js 生成這段 script 標(biāo)簽放到
里面就行了(或者是把 src 用js動(dòng)態(tài)改一下,這個(gè)我倒是沒(méi)有試過(guò))。這就是 JSONP 啦。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/101396.html
摘要:前言之前投遞了騰訊的實(shí)習(xí)生前端崗,一直沒(méi)有電話,查了下?tīng)顟B(tài)說(shuō)不合適,以為涼涼了,今天卻收到了電話,出乎意料然后就開(kāi)始了一面,一開(kāi)始面試官說(shuō)時(shí)間不會(huì)太久,大概分鐘吧,結(jié)果整個(gè)過(guò)程也就持續(xù)了分鐘吧。 前言 之前投遞了騰訊的實(shí)習(xí)生前端崗,一直沒(méi)有電話,查了下?tīng)顟B(tài)說(shuō)不合適,以為涼涼了,今天卻收到了電話,出乎意料...然后就開(kāi)始了一面,一開(kāi)始面試官說(shuō)時(shí)間不會(huì)太久,大概30分鐘吧,結(jié)果整個(gè)過(guò)程也就...
摘要:應(yīng)用常見(jiàn)安全漏洞一覽注入注入就是通過(guò)給應(yīng)用接口傳入一些特殊字符,達(dá)到欺騙服務(wù)器執(zhí)行惡意的命令。此外,適當(dāng)?shù)臋?quán)限控制不曝露必要的安全信息和日志也有助于預(yù)防注入漏洞。 web 應(yīng)用常見(jiàn)安全漏洞一覽 1. SQL 注入 SQL 注入就是通過(guò)給 web 應(yīng)用接口傳入一些特殊字符,達(dá)到欺騙服務(wù)器執(zhí)行惡意的 SQL 命令。 SQL 注入漏洞屬于后端的范疇,但前端也可做體驗(yàn)上的優(yōu)化。 原因 當(dāng)使用外...
摘要:應(yīng)用常見(jiàn)安全漏洞一覽注入注入就是通過(guò)給應(yīng)用接口傳入一些特殊字符,達(dá)到欺騙服務(wù)器執(zhí)行惡意的命令。此外,適當(dāng)?shù)臋?quán)限控制不曝露必要的安全信息和日志也有助于預(yù)防注入漏洞。 web 應(yīng)用常見(jiàn)安全漏洞一覽 1. SQL 注入 SQL 注入就是通過(guò)給 web 應(yīng)用接口傳入一些特殊字符,達(dá)到欺騙服務(wù)器執(zhí)行惡意的 SQL 命令。 SQL 注入漏洞屬于后端的范疇,但前端也可做體驗(yàn)上的優(yōu)化。 原因 當(dāng)使用外...
現(xiàn)在流行的axios庫(kù)不支持jsonp,因此這里推薦一個(gè)jsonp庫(kù),簡(jiǎn)單易用。以下是介紹: Easy JSONP A minimal and lightweight JSONP implementation which is used to be a kind of cross domain solutions. Features Implement JSONP request from th...
摘要:同源策略做了很嚴(yán)格的限制,但是在實(shí)際的場(chǎng)景中,又確實(shí)有很多地方需要突破同源策略的限制,也就是我們常說(shuō)的跨域。使用跨域由于同源策略,一般來(lái)說(shuō)位于的網(wǎng)頁(yè)無(wú)法與不是的服務(wù)器溝通,而的元素是一個(gè)例外。 本菜雞最近在寫(xiě)某個(gè)頁(yè)面請(qǐng)求數(shù)據(jù)時(shí),報(bào)了如下的錯(cuò)誤。 Failed to load https://...:No Access-Control-Allow-Origin header is pre...
閱讀 3091·2021-10-27 14:16
閱讀 776·2021-10-13 09:39
閱讀 3917·2021-09-29 09:46
閱讀 2177·2019-08-30 15:54
閱讀 2672·2019-08-30 15:52
閱讀 3089·2019-08-30 15:44
閱讀 1192·2019-08-30 15:44
閱讀 570·2019-08-30 10:51