前端培訓-中級階段（10）- 同源策略（2019-08-15期）

原創

2019-07-19 11:45

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門，但也僅僅是入門，現在前端開發的定義已經遠遠不止這些。前端小課堂（HTML/CSS/JS），本着提升技術水平，打牢基礎知識的中心思想，我們開課啦（每週四）。

同源策略是什麼？

同源策略是瀏覽器的一個安全功能，不同源的數據禁止訪問。
所以 lilnong.top 下的 ajax 訪問 51vv.com 數據是會報錯。(network 可以看到 response，證明限制是瀏覽器方的限制)

當然，也有例外

表單提交、鏈接
這些項等同於切換頁面
script標籤的src、link標籤的href、img標籤的src、iframe標籤的src
上述的資源可以引用，但是不可獲取內容。
1. img 可以顯示出來，但是你無法放入canvas二次使用，會把canvas的源污染。
2. iframe 可以顯示，不可以獲取DOM
3. script 不可獲取報錯代碼位置。

端口、域名、協議都相同，定義爲同源。
針對http://www.lilnong.top/static這個地址來說。端口（80），域名（www.lilnong.top）,協議（http）

安全問題
例子1：普通的網絡用戶，不會去記域名等內容。如果我在我自己的頁面內，嵌套一個<iframe src="taobao.com">並把他放大，不就和淘寶一模一樣了？並且還會有淘寶的狀態信息。
這時候我們可以獲取用戶的密碼、給用戶創建訂單、註銷用戶的賬戶等等有危害性的操作。
例子2：領導說要一個騰訊新聞。嗯好，我們<iframe src="news.qq.com">放大自適應。
這時候，我們可以加點小廣告，截獲一些用戶操作。分分鐘不花錢。得到了一個騰訊新聞。
數據歸屬問題
1. 大家都知道爬蟲吧。想起來前幾天在思否看到的頭條（“飯友”APP 未經許可抓取微博數據，被判賠償210萬）。
  如果說沒有同源策略，飯友直接 ajax 拉取微博數據。或許你可以說 referer 驗證，在瀏覽器沒有同源策略的情況下這些都可以繞過去。
  微博方看到的就是一個正常的微博用戶，正常的ip，訪問了他們的接口。
  那麼爬蟲呢？爬蟲是主動觸發的操作，是他們使用他們的ip，僞造成一個合理的用戶，去抓取數據。

同源策略是蠻好的，防禦了大部分的攻擊。但是合理是合理，一些特殊情況下我們也是要繞過這個策略，下節我們講跨域。

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.