資訊專欄INFORMATION COLUMN
摘要：同源策略在這之前需要先熟悉一下這個(gè)概念，同源指請(qǐng)求協(xié)議相同，主機(jī)名相同，端口相同，涉及安全的策略。同源策略主要限制的是不同源之間的交互操作，對(duì)于跨域內(nèi)嵌的資源不受該策略限制。
問題起因是在使用weibo api的時(shí)候，發(fā)現(xiàn)有一個(gè)報(bào)錯(cuò)。weibo api是https協(xié)議，我本地是模擬的回調(diào)域名，然后進(jìn)行數(shù)據(jù)通信，本地http協(xié)議，于是乎就報(bào)錯(cuò)了。出于對(duì)postMessage的不是很熟悉，借此機(jī)會(huì)學(xué)習(xí)晚上一些自己的知識(shí)儲(chǔ)備。
api.weibo.com/2/oauth2/authorize?client_id=******&response_type=token&d…ansport=html5&referer=http://www.unofficial.cn/demo/vuejs/demo.html:1 Failed to execute "postMessage" on "DOMWindow": The target origin provided ("https://www.unofficial.cn") does not match the recipient window"s origin ("http://www.unofficial.cn").
同源策略
在這之前需要先熟悉一下這個(gè)概念，同源指請(qǐng)求協(xié)議相同，主機(jī)名相同，端口相同，涉及安全的策略。
// 例如我的博客地址
http://www.unofficial.cn/demo/postMessage/pm1.html 同
http://www.unofficial.cn/demo/vuejs/index.html 同
https://www.unofficial.cn/demo/postMessage/pm1.html 不同 協(xié)議不同
http://blog.unofficial.cn/demo/postMessage/pm1.html 不同 主機(jī)名不同
http://www.unofficial.cn:8080/demo/postMessage/pm1.html 不同 端口不同
允許跨域?qū)?/b>
表單提交，例如我模擬了一個(gè)表單提交到我的一個(gè)其它站點(diǎn)。
同源策略主要限制的是不同源之間的交互操作，對(duì)于跨域內(nèi)嵌的資源不受該策略限制。
允許跨域嵌入標(biāo)簽嵌入腳本，語(yǔ)法錯(cuò)誤信息只能在同源腳本中捕捉到（？）。
標(biāo)簽嵌入css
標(biāo)簽嵌入圖片
和 標(biāo)簽嵌入多媒體資源
@font-face
載入的任何資源?？梢允褂脁-frame-options消息頭來阻止這種形式的交互。
不允許跨域讀需要注意的是，頁(yè)面內(nèi)的引入的文件的域并不重要，重要的是加載該文件的頁(yè)面所在的域。例如說我在博客的首頁(yè)引入了 //cdn.bootcss.com/jquery/3.1.1/jquery.min.js 的jquery文件，這時(shí) jquery.min.js 的源應(yīng)該就是我的博客地址 http://www.unofficial.cn 。
iframe
同域可讀可寫，跨域可讀不可寫
// 請(qǐng)求地址：//www.unofficial.cn/demo/postmessage/pm2.html // 不同源時(shí)使用contentWindow/contentDocument報(bào)錯(cuò) // pm1.html:12 Uncaught DOMException: Failed to read the "contentDocument" property from "HTMLIFrameElement": Blocked a frame with origin "http://www.unofficial.cn" from accessing a cross-origin frame.(…)
同源
iframe外部操作，主要通過contentDocument/contentWindow，iframe內(nèi)部使用window.parent，如果只是嵌套了一層可以使用window.top，iframe多層嵌套可以使用window.frameElement
// 外部 -> 內(nèi)
var iframe = document.getElementsByTagName("iframe");
// 舉例第一個(gè)
iframe[0].contentDocument.getElementById("test").innerText = 123;
// 內(nèi)部 -> 外
window.parent.getElementById("test").innerText = 123;
跨域
如果需要在跨域的情況下傳遞參數(shù)怎么操作呢？
iframe內(nèi)部操作，主要通過 location.hash
// 外部傳遞一個(gè)123給內(nèi)部
var src = iframe[0].src;
iframe[0].src = src.indexOf("#") != -1 ? src.split("#")[0].concat("#", 123) : src.concat("#", 123);
// 然后內(nèi)部監(jiān)測(cè)hashChange，自動(dòng)獲取hash值
// 內(nèi)部更改hash
window.location.hash = 123;
// 但是如何外部如何監(jiān)控src的變化呢？
ajax
cors
同域可讀可寫，跨域請(qǐng)求不能檢查到 Access-Control-Allow-Origin 的情況下會(huì)被攔截。
// www.unofficial.cn:4000
// 跨域請(qǐng)求
var url = "http://www.unofficial.cn/demo.php";
var params = "lorem=ipsum&name=binny";
var http = new XMLHttpRequest();
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
> XMLHttpRequest cannot load http://www.unofficial.cn/demo.php. No "Access-Control-Allow-Origin" header is present on the requested resource. Origin "http://www.unofficial.cn:4000" is therefore not allowed access. 上面錯(cuò)誤提示可以設(shè)置 `Access-Control-Allow-Origin` ，于是在header中添加設(shè)置即可實(shí)現(xiàn)跨域請(qǐng)求。
參數(shù)介紹
Access-Control-Allow-Origin
origin參數(shù)指定一個(gè)允許向該服務(wù)器提交請(qǐng)求的URI.對(duì)于一個(gè)不帶有credentials的請(qǐng)求,可以指定為"*",表示允許來自所有域的請(qǐng)求.
Access-Control-Allow-Origin: http://www.unofficial.cn
Access-Control-Allow-Credentials
它的值是一個(gè)布爾值，表示是否允許發(fā)送Cookie。默認(rèn)是 true 允許的。 『實(shí)際測(cè)試沒發(fā)現(xiàn)，也許是方法還不對(duì)吧?！?/p>
Access-Control-Expose-Headers
設(shè)置瀏覽器允許訪問的服務(wù)器的頭信息的白名單。如果沒有設(shè)置白名單的，默認(rèn)情況下只能獲取 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma的值，沒設(shè)置返回 null，否則會(huì)得到以下提示：
Refused to get unsafe header "X-Powered-By"
例如：
// 服務(wù)端設(shè)置 Access-Control-Expose-Headers: X-Powered-By
前端可以這樣獲取到 X-Powered-By 的屬性值
var http = new XMLHttpRequest();
http.getResponseHeader("X-Powered-By"); //
Access-Control-Max-Age
設(shè)置預(yù)請(qǐng)求時(shí)間。即是設(shè)置 OPTION 的時(shí)間。
Access-Control-Allow-Methods
設(shè)置允許的請(qǐng)求方法。
cors的方式可以發(fā)起post請(qǐng)求，或者說其它形式的請(qǐng)求，但是jsonp只能使用get的方式獲取數(shù)據(jù)。
簡(jiǎn)單說就是定義好回調(diào)處理方法，把回調(diào)函數(shù)的名稱傳遞給后端，后端拿到數(shù)據(jù)名稱后返回會(huì)的數(shù)據(jù)就是對(duì)于回調(diào)方法的執(zhí)行。
/**
* demo.js的內(nèi)容
* abc({"abc":"123"});
*/
什么是postMessage
postMessage是window對(duì)象的一個(gè)屬性，widow.postMessage是一個(gè)安全的跨源通信協(xié)議。當(dāng)且僅當(dāng)執(zhí)行腳本的頁(yè)面使用相同的協(xié)議（通常都是 http）、相同的端口（http默認(rèn)使用80端口）和相同的 host（兩個(gè)頁(yè)面的 document.domain 的值相同）時(shí)，才允許不同頁(yè)面上的腳本互相訪問。 window.postMessage 提供了一個(gè)可控的機(jī)制來安全地繞過這一限制，當(dāng)其在正確使用的情況下。
iframe的情況下我們可以這樣使用，等待頁(yè)面加載結(jié)束時(shí)傳參數(shù)到指定源。
// localhost ① pm1.html頁(yè)面中存在一個(gè)跨域iframe引用 // www.unofficial.cn pm2.html中我們跨域監(jiān)聽 `message` 獲取 `postmessage` 傳過來的數(shù)據(jù)。
window.open的情況下就需要特殊處理一下了
// localhost ② window.open
延遲多長(zhǎng)時(shí)間執(zhí)行？頁(yè)面加載時(shí)間是多長(zhǎng)，這個(gè)不是很好判斷，setTimeout需要略估計(jì)一個(gè)時(shí)間，待open的頁(yè)面加載完成了再postMessage（應(yīng)該不比完全加載就可以postMessage了）。要不然就是定時(shí)器，定時(shí)推一次，直接觸發(fā)事件后使用window.opener取消定時(shí)器。
總結(jié)問題基本都是在過程中發(fā)現(xiàn)一個(gè)學(xué)習(xí)一個(gè)，對(duì)于沒有太多場(chǎng)景的學(xué)習(xí)，只能這樣慢慢積累。
參考資料https://developer.mozilla.org...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80815.html
摘要：存在跨域的情況網(wǎng)絡(luò)協(xié)議不同，如協(xié)議訪問協(xié)議。域名和域名對(duì)應(yīng)如訪問跨域請(qǐng)求資源的方法代理定義和用法代理用于將請(qǐng)求發(fā)送給后臺(tái)服務(wù)器，通過服務(wù)器來發(fā)送請(qǐng)求，然后將請(qǐng)求的結(jié)果傳遞給前端。定義和用法是現(xiàn)代瀏覽器支持跨域資源請(qǐng)求的一種最常用的方式。 1、什么是跨域？ 由于瀏覽器同源策略，凡是發(fā)送請(qǐng)求url的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁(yè)面地址不同即為跨域。存在跨域的情況： 網(wǎng)絡(luò)協(xié)議不同，...
閱讀 935·2021-09-22 16:01
閱讀 2201·2021-08-20 09:37
閱讀 1787·2019-08-30 15:54
閱讀 1774·2019-08-30 15:44
閱讀 1012·2019-08-28 18:23
閱讀 3087·2019-08-26 12:17
閱讀 1154·2019-08-26 11:56
閱讀 1610·2019-08-23 16:20
