以同源策略爲引子

提示：本文僅做爲我的平時記錄總結使用，筆法粗糙，邏輯思路還不是很清晰，如能幫到您是榮幸之至；如能指正其中錯誤和不合理，則萬分感謝！

同源策略：同源策略限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。老生常談了，所謂同源就是origin、protocol、port都相同，是web安全的基礎。本文主要記錄以前不注意的點。

分類

我理解分爲DOM同源策略和存儲同源策略

DOM同源策略

分爲三類

1. 容許跨域寫操做。如連接、重定向、提交訂單（非ajax）
2. 容許跨域資源嵌入。如script、img、video、css樣式表引入、iframe等等。
3. 不容許跨域讀操做。如ajax或者Fetch api。

或者能夠總結說是：

同源策略容許HTML tag產生的跨域讀取、寫入、嵌入；可是不支持JavaScript腳本中產生的跨域讀取、寫入或嵌入

咱們平時說到的跨域問題大可能是指在第三種。說下跨域的解決方案

ajax跨域解決方案

1. jsonp（古老）。利用同源策略支持跨域嵌入的特性（question爲啥不用img），如今腳本中定義callback而後在遠程服務端返回callback(數據）;
2. CORS（最經常使用）.跨域資源共享屬於官方提供的用來跨域的方法，詳見下次CORS。
3. node中轉。將外域接口在node層作中轉。
4. Nginx反向代理。理解不深 TODO

存儲同源策略

存儲包括localstorage（or sessionStorage）、indexDB、cookie等。其中localstorage和indexDB都嚴格執行同源策略，非同源不能讀寫。但cookie有不一樣的策略。

對於cookie是子域名 讀寫 父域名下的cookie的，可是父域名不能讀子域名cookie，子域名之間也不能相互讀取cookie。

後續

這樣看來其實同源策略對於並非對全部請求都有作限制，主要仍是限制在XMLHttpRequest、Fetch Api以及web字體的引用（是的你沒看錯，@font-face使用字體時要考慮跨域問題)、canvas中drawImage還有WebGL貼圖上。其餘的都沒什麼限制，可是當獲取的腳本或者其餘資源是惡意的也是會帶來很大問題的，好比script腳本引入了一個未知域名下的惡意腳本，可是同源策略對script資源的請求時不限制的，因此惡意腳本能夠輕鬆加載，通常這種狀況涉及到web安全問題了（XSS、CSRF等），針對這種狀況的對策是CSP即內容安全策略，相似一種加白名單的形式來完成這些事。

TODO

1. CORS詳細
2. Nginx反向代理實現跨域
3. csp內容安全策略
4. 安全（XSS、CSRF)

參考文獻

同源政策-一切安全的基礎

mdn w3