首先給出瀏覽器“同源策略”的一種經典定義,同源策略限制了來自不同源(相對於當前頁面而言)的document或script,對當前document的某些屬性進行讀取或是設置,舉例來說,A網站(www.aaa.com)上有某個腳本,在B網站(www.bbb.com)未曾加載該腳本時,該腳本不能讀取或是修改B網站的DOM節點數據。
同源策略是瀏覽器最核心、最基本的安全策略,現行的web安全策略很多以同源策略為基礎。
在瀏覽器中,<script>、<img>、<ifram>、<link>等標簽都可以跨域加載資源,而不受同源策略的限制。這些帶“src”的標簽每次加載時,實際上是由瀏覽器發起了一次GET請求。不同於XMLHttpRequest的是,通過src屬性加載的資源,瀏覽器限制了JavaScript的權限,使其不能讀寫返回的內容。
這是吳瀚清所著《白帽子講web安全》中有關瀏覽器安全的一段話,對其中“不同於XMLHttpRequest的是,通過src屬性加載的資源,瀏覽器限制了JavaScript的權限,使其不能讀寫返回的內容”這一段話有些不太理解。因為,既然通過src屬性成功加載了跨域資源,那么瀏覽器限制JavaScript的權限,使其不能讀寫返回的內容,這前后不是矛盾的嗎?“加載資源”更直白的理解不就是“讀寫資源”嗎?瀏覽一些資料后,經過幾天的思考,有了一些個人的理解。
(1)首先需要深刻理解同源策略限制了“什么資源”的跨域訪問?
1.同源策略對網頁的HTML文檔做了限制,但加載靜態資源如javascript、css、圖片等是不受限制的。
2.頁面中的鏈接,重定向以及表單提交是不會受到同源策略限制的,比如在網站www.foo.com
下提交一個表單到www.bar.com
是完全可以的。
3.跨域資源嵌入是允許的。
我們需要重點理解第三項,跨域資源嵌入既是通過src屬性來實現的。舉例來說,假如A網站(www.aaa.com)需要展示一份豆瓣圖書銷量前一百的名單,由於同源策略的存在,A網站上的一個腳本(我們把這個腳本記作a)不能通過XHR請求來獲取豆瓣上的數據,但是可以通過部分標簽的src屬性來跨域獲取該書單數據。具體過程是,A網站上的a運行,“調用”豆瓣的某個腳本(記作b),豆瓣通過“腳本”b(應該說是一個接口,但接口的功能也是通過腳本實現的,所以在這里我用“腳本”來表示。)將書單數據傳給A網站。我們可以把書單數據當做是b運行的結果,此過程中瀏覽器會限制a對豆瓣“腳本”b內容的讀寫,僅僅是只能“調用”,而不是限制對書單數據的讀寫。腳本b就是運行腳本a的返回內容,所以這樣就解釋了為什么通過src屬性加載的資源,瀏覽器限制了JavaScript的權限,使其不能讀寫返回的內容,這段話並不是前后矛盾的。
再來說說瀏覽器同源策略主要的限制范圍。
(1) Cookie、LocalStorage、sessionStorage和 IndexDB 無法讀取。
(2) DOM 節點無法讀取和設置。
(3) AJAX 請求不能發送。
將同源策略的限制范圍和非限制范圍對比可以更深刻的理解同源策略存在的意義和繞過同源策略的方法總結。
PS:本人菜鳥一個,記錄這個博客僅為理清自己的思路,有不對的地方歡迎指正。謝謝~~~