摘要:可以說同源策略在安全中扮演著及其重要的角色。我把這個(gè)領(lǐng)域的東西寫成了一個(gè)系列,以后還會(huì)繼續(xù)完善下去安全一同源策略與跨域安全二攻擊安全三攻擊
之所以要將同源策略與跨域?qū)懺谝黄穑且驗(yàn)榇嬖跒g覽器的同源策略,才會(huì)存在跨域問題何為同源策略
同源策略是瀏覽器實(shí)現(xiàn)的一種安全策略,它限制了不同源之間的文檔和腳本交互的權(quán)限。只有同一個(gè)源的腳本才會(huì)具有操作dom、讀寫cookie、session 、ajax等敏感操作的權(quán)限。可以說同源策略在web安全中扮演著及其重要的角色。所謂同源簡(jiǎn)單來說即是兩個(gè)頁面必須具有相同的協(xié)議、端口還有域名。
以http://www.site.com/index.html為例,舉個(gè)小栗子:
url | 是否跨域 | 原因 |
http://www.site.com/other/ind... | 否 | |
http://child.site.com/index.html | 是 | origin 不一樣(www與child) |
http://www.site.com:8090/index.html | 是 | 端口 不一樣(80與8090) |
https://www.site.com/index.html | 是 | 協(xié)議 不一樣(http與https) |
不得不調(diào)侃一下,在兼容性方面IE似乎永遠(yuǎn)都難以跟上別的瀏覽器發(fā)展的步伐,永遠(yuǎn)都是一個(gè)例外。
授信范圍(Trust Zones):兩個(gè)相互之間高度互信的域名,如公司域名(corporate domains),不遵守同源策略的限制。
端口:IE未將端口號(hào)加入到同源策略的組成部分之中,因此 http://www.size.com:81/index.html 和http://www.size.com:8090/index.html 屬于同源并且不受任何限制。
雖然同源策略限制了跨域文檔腳本的操作能力,但明確允許部分資源性的標(biāo)簽是可以加載跨域資源的,如,。部分具有跨域能力的標(biāo)簽如下,來源于MDN:
標(biāo)簽嵌入跨域腳本。語法錯(cuò)誤信息只能在同源腳本中捕捉到。
標(biāo)簽嵌入CSS。由于CSS的松散的語法規(guī)則,CSS的跨域需要一個(gè)設(shè)置正確的Content-Type消息頭。
嵌入圖片。
@font-face引入的字體。
和
跨域的方法在瀏覽器同源策略的安全限制下,跨域的需求仍然是有的。這種需求可以分為正當(dāng)?shù)暮筒徽?dāng)?shù)摹>唧w來說不正當(dāng)?shù)木褪牵谌綈阂饩W(wǎng)站利用同源策略的一些漏洞,對(duì)目標(biāo)網(wǎng)站進(jìn)行一些不允許的操作,這種操作我們稱之為跨域攻擊。具體可以參照我的另外幾篇博客:
CSRF攻擊(跨域偽請(qǐng)求)
XSS攻擊(跨域腳本攻擊)
正當(dāng)?shù)目缬蛘?qǐng)求可以是: 一些大集團(tuán)下面的幾個(gè)子域名之間的跨域交互,也可以是合作網(wǎng)站之間的跨域交互等等,總之就是被允許的。下面來具體說說實(shí)現(xiàn)這種正當(dāng)跨域的幾種方法:
寫在前面: 所有的跨域方法都會(huì)帶來安全性的問題,一旦惡意網(wǎng)站能夠成功在目標(biāo)網(wǎng)站運(yùn)行腳本或者具有操作的能力,他們也就具有了目標(biāo)網(wǎng)站的跨域能力。document.domain
腳本可以將 document.domain 的值設(shè)置為其當(dāng)前域或其當(dāng)前域的超級(jí)域。
這種方法的優(yōu)點(diǎn)就是:簡(jiǎn)單,只要在前端js中設(shè)置就好了
弊端:只適合用于子域與父域之間還有子域之間的跨域
實(shí)現(xiàn)起來異常簡(jiǎn)單,主要是通過在服務(wù)器設(shè)置HttpHeader,客戶端檢查自己的域是否在允許列表中,決定是否處理響應(yīng)。詳情請(qǐng)參考CORS MDN, 利用CORS實(shí)現(xiàn)跨域請(qǐng)求
服務(wù)器端可以在HTTP的響應(yīng)頭中加入(頁面層次的控制模式):
Access-Control-Allow-Origin: example.com
Access-Control-Request-Method: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization, Accept, Range, Origin
Access-Control-Expose-Headers: Content-Range
Access-Control-Max-Age: 3600
多個(gè)域名之間用逗號(hào)分隔,表示對(duì)所示域名提供跨域訪問權(quán)限。"*"表示允許所有域名的跨域訪問。
此方法的優(yōu)點(diǎn):簡(jiǎn)單快捷,配置簡(jiǎn)單,基本可以解決任何域的跨域問題
弊端:僅適用與客戶端與跨域服務(wù)器的交互;另外具有瀏覽器的兼容性問題,不兼容IE7以及以下。
在IE8——IE9 中要使用xhr = new XDomainRequest();來替代xhr = new XMLHttpRequest();
在以前,當(dāng)嘗試使用 window.onerror 去記錄跨域腳本的錯(cuò)誤時(shí),只會(huì)返回 Script error, 沒法獲取到具體的報(bào)錯(cuò)信息。這種情況在html5中得到了改觀,html新加了一個(gè)crossorigin屬性,允許捕獲跨域腳本的詳細(xì)錯(cuò)誤信息,但是有兩個(gè)條件:
跨域腳本的服務(wù)器必須通過 Access-Controll-Allow-Origin 頭信息允許當(dāng)前域名可以獲取錯(cuò)誤信息
當(dāng)前域名的 script 標(biāo)簽也必須指明 src 屬性指定的地址是支持跨域的地址,也就是要添加crossorigin 屬性
crossorigin 具有兩個(gè)值:
anonymous: 請(qǐng)求不帶 credentials flag .
use-credentials: 請(qǐng)求攜帶 credentials flag .
credentials flag 也就是常說的cookies, client-side SSL certificates
window.postMessagepostMessage是HTML5新的語法特性,可以讓跨域的腳本之間進(jìn)行交互,主要分為消息的發(fā)送端和消息的接收端。
發(fā)送端:
otherWindow是其他窗口的一個(gè)引用,比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過或數(shù)值索引的window.frames。
otherWindow.postMessage( message, // 要發(fā)送到其他窗體的消息,可以傳送任何數(shù)據(jù)對(duì)象 targetOrigin, // 消息要發(fā)送到的域,由完整的協(xié)議、地址、端口組成 [transfer] // 這是一個(gè)可選的抽象接口 );
otherWindow.postMessage() 方法被調(diào)用時(shí),會(huì)在所有頁面腳本執(zhí)行完畢之后(e.g., 在該方法之后設(shè)置的事件、之前設(shè)置的timeout 事件,etc.)向目標(biāo)窗口派發(fā)一個(gè) MessageEvent 消息。
接收端:
window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { // For Chrome, the origin property is in the event.originalEvent // object. var origin = event.origin || event.originalEvent.origin; if (origin !== "http://example.org:8080") return; // ... }
message 事件,包含4個(gè)參數(shù)
message 屬性表示該message 的類型;
data 屬性為 window.postMessage 的第一個(gè)參數(shù)即message;
— origin 調(diào)用window.postMessage() URI
— source 調(diào)用window.postMessage() 的窗口對(duì)象
兼容性:在 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)之前, 參數(shù) message 必須是一個(gè)字符串。而IE10下面也有奇怪的問題
優(yōu)點(diǎn):適合同一個(gè)瀏覽器兩個(gè)跨域頁面之間的腳本交互
弊端:只能從窗口的引用(也就是window.open或者window.frames[0].contentWindow)發(fā)送消息到目標(biāo)窗口,適用的范圍有限
jsonp 是比較古老的跨域方法,也是比較常用的跨域
具體來說,它的實(shí)現(xiàn)如下:
function jsonp(url,data,callbackName) { var script = document.createElement("script"); var src = url+ "?"+ data+ "calback="+callbackName; script.src = src; document.head.appendChild(script); } function callbackName(data){ // data from server; }JSONP的坑
因?yàn)樵趈query中JSONP使用的是ajax的封裝接口,很多人它會(huì)是ajax的一種技術(shù),實(shí)際上它是利用標(biāo)簽天生具有跨域能力的一種技術(shù),所以很多人在jquery中使用JSONP時(shí)都會(huì)踩坑。
坑一:同步,很多人會(huì)想當(dāng)然地使用ajax的同步參數(shù)async來實(shí)現(xiàn)同步。實(shí)際上jsonp只有異步,因?yàn)閟cript是異步加載的
坑二:錯(cuò)誤回調(diào),在使用jquery的過程,很多人會(huì)使用ajax的error和fail接口,來捕獲跨域的異常返回。ajax的錯(cuò)誤接口只能捕獲請(qǐng)求超時(shí)、終止、json解析錯(cuò)誤等正常的錯(cuò)誤,但是對(duì)于網(wǎng)絡(luò)不通、服務(wù)器異常,jquery是選擇靜默地失敗的。
那怎么捕獲jsonp的異常呢?
實(shí)際上標(biāo)簽在遇到這些錯(cuò)誤時(shí)會(huì)觸發(fā)error事件。所以上面的代碼我們可以稍微改一下,增加一個(gè)捕獲異常的回調(diào)
function jsonp(url,data,callbackName,errorbackName) { var script = document.createElement("script"); var src = url+ "?"+ data+ "calback="+callbackName; script.src = src; script.onerror = errorbackName; document.head.appendChild(script); } function callbackName(data){ // data from server; }
另外在jquery中的處理主要有兩種方法,參考 jQuery使用JSONP時(shí)的錯(cuò)誤處理
手動(dòng)暴露jsonp 的錯(cuò)誤接口
var head = document.head || $("head")[0] || document.documentElement; // code from jquery var script = $(head).find("script")[0]; script.onerror(function(evt) { alert("error"); });
使用jsonp的拓展庫(kù)
針對(duì)jquery處理jsonp的坑,早有大神封裝好插件,直接引用就可以了,方便快捷省心。傳送門
【相關(guān)】
web安全,是一個(gè)很重要的技能,也是一個(gè)領(lǐng)域的知識(shí)。我把這個(gè)領(lǐng)域的東西寫成了一個(gè)系列,以后還會(huì)繼續(xù)完善下去:
web安全一:同源策略與跨域
web安全二:CSRF 攻擊
web安全三:XSS 攻擊
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/93005.html
摘要:由于瀏覽器的同源策略導(dǎo)致無法直接通過拿到后臺(tái)數(shù)據(jù)。目前,如果非同源,共有三種行為受到限制。此處應(yīng)有掌聲參考關(guān)于跨域資源共享和瀏覽器的同源策略限制的具體講解。 工作中,經(jīng)常會(huì)遇到需要跨域請(qǐng)求數(shù)據(jù)的情況。由于瀏覽器的同源策略,導(dǎo)致無法直接通過ajax拿到后臺(tái)數(shù)據(jù)。解決這個(gè)問題的方式之一就是JSONP。還有一種方式更高效簡(jiǎn)單——跨域資源共享(Cross-origin Resource Sha...
摘要:扯了這么多,自然不是為了吹水,而是要為了引出前端開發(fā)的一個(gè)重要的知識(shí)點(diǎn)同源策略什么是同源策略出于保護(hù)用戶信息安全的目的,現(xiàn)在的瀏覽器都會(huì)實(shí)施同源策略這個(gè)政策,所謂同源策略指的是不同源的客戶端腳本在沒有明確授權(quán)情況下,不允許讀寫對(duì)方的資源。 導(dǎo)語你家的小孩帶了他的朋友來你們的家里玩,你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會(huì)阻止,但是如果你家小孩的朋友人品不行,亂拿東西吃、...
摘要:扯了這么多,自然不是為了吹水,而是要為了引出前端開發(fā)的一個(gè)重要的知識(shí)點(diǎn)同源策略什么是同源策略出于保護(hù)用戶信息安全的目的,現(xiàn)在的瀏覽器都會(huì)實(shí)施同源策略這個(gè)政策,所謂同源策略指的是不同源的客戶端腳本在沒有明確授權(quán)情況下,不允許讀寫對(duì)方的資源。 導(dǎo)語你家的小孩帶了他的朋友來你們的家里玩,你家的小孩如果要在自家屋里拿玩具玩、拿東西吃你自然是不會(huì)阻止,但是如果你家小孩的朋友人品不行,亂拿東西吃、...
摘要:方案瀏覽器設(shè)置一級(jí)域名。場(chǎng)景完全不同源的網(wǎng)站,需要窗口通信方案父子窗口互相寫互相監(jiān)聽子窗口寫后跳回同域父窗口讀瀏覽器跨文檔通信場(chǎng)景請(qǐng)求非同源地址方案架設(shè)服務(wù)器代理參考資料瀏覽器同源政策及其規(guī)避方法阮一峰前端常見跨域解決方案全跨域幾種方式 同源 概念:協(xié)議,域名,端口 相同。目的:保證用戶信息的安全,防止惡意的網(wǎng)站竊取數(shù)據(jù)。限制的行為: Cookie、LocalStorage 和 In...
摘要:方案瀏覽器設(shè)置一級(jí)域名。場(chǎng)景完全不同源的網(wǎng)站,需要窗口通信方案父子窗口互相寫互相監(jiān)聽子窗口寫后跳回同域父窗口讀瀏覽器跨文檔通信場(chǎng)景請(qǐng)求非同源地址方案架設(shè)服務(wù)器代理參考資料瀏覽器同源政策及其規(guī)避方法阮一峰前端常見跨域解決方案全跨域幾種方式 同源 概念:協(xié)議,域名,端口 相同。目的:保證用戶信息的安全,防止惡意的網(wǎng)站竊取數(shù)據(jù)。限制的行為: Cookie、LocalStorage 和 In...
閱讀 689·2021-11-23 09:51
閱讀 3280·2019-08-30 15:54
閱讀 444·2019-08-30 15:52
閱讀 3114·2019-08-30 13:58
閱讀 2919·2019-08-30 13:53
閱讀 2688·2019-08-29 14:18
閱讀 2416·2019-08-27 10:54
閱讀 2370·2019-08-26 18:09