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

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

同源策略是什麼？

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

固然，也有例外

1. 表單提交、連接
   這些項等同於切換頁面

2. 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）

URL	端口	域名	協議	描述
https://www.lilnong.top	80	www.lilnong.top	https	協議不一樣，不一樣源
http://lilnong.top	80	lilnong.top	http	域名不一樣，不一樣源
http://lilnong.top:8080	8080	lilnong.top	http	域名不一樣，端口不一樣，不一樣源
http://www.lilnong.top:8080	8080	www.lilnong.top	http	端口不一樣，不一樣源
http://www.lilnong.top/	80	www.lilnong.top	http	同源
http://www.51vv.com	80	www.51vv.com	http	域名不一樣，不一樣源

爲何要有同源策略

1. 安全問題
   例子1：普通的網絡用戶，不會去記域名等內容。若是我在我本身的頁面內，嵌套一個<iframe src="taobao.com">並把他放大，不就和淘寶如出一轍了？而且還會有淘寶的狀態信息。
   這時候咱們能夠獲取用戶的密碼、給用戶建立訂單、註銷用戶的帳戶等等有危害性的操做。
   例子2：領導說要一個騰訊新聞。嗯好，咱們<iframe src="news.qq.com">放大自適應。
   這時候，咱們能夠加點小廣告，截獲一些用戶操做。分分鐘不花錢。獲得了一個騰訊新聞。

2. 數據歸屬問題

   1. 你們都知道爬蟲吧。想起來前幾天在思否看到的頭條（「飯友」APP 未經許可抓取微博數據，被判賠償210萬）。
      若是說沒有同源策略，飯友直接 ajax 拉取微博數據。或許你能夠說 referer 驗證，在瀏覽器沒有同源策略的狀況下這些均可以繞過去。
      微博方看到的就是一個正常的微博用戶，正常的ip，訪問了他們的接口。
      那麼爬蟲呢？爬蟲是主動觸發的操做，是他們使用他們的ip，僞形成一個合理的用戶，去抓取數據。

總結

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

微信公衆號：前端linong

初級階段文章目錄

1. 前端培訓-初級階段（17） - 數據存儲（cookie、session、stroage）
2. 前端培訓-初級階段（13） - 正則表達式
3. 前端培訓-初級階段（13） - 類、模塊、繼承
4. 前端培訓-初級階段（13） - ECMAScript （內置對象、函數）
5. 前端培訓-初級階段（13） - ECMAScript （語法、變量、值、類型、運算符、語句）
6. 前端培訓-初級階段（1三、18）
7. 前端培訓-初級階段（9 -12）
8. 前端培訓-初級階段（5 - 8）
9. 前端培訓-初級階段（1 - 4）

中級階段文章目錄

1. 前端培訓-中級階段（2） - 事件(event) 事件冒泡、捕獲 - （2019-06-20期）
2. 前端培訓-中級階段（3） - DOM 文檔對象模型（2019-06-27期）
3. 前端培訓-中級階段（4）- BOM 瀏覽器對象模型（2019-07-04期）
4. 前端培訓-中級階段（5）- jQuery的概念與基本使用（2019-07-11期）
5. 前端培訓-中級階段（6）- jQuery元素節點操做（2019-07-18期）
6. 前端培訓-中級階段（7）- jQuery的事件綁定鏈式操做及原理（2019-07-25期）
7. 前端培訓-中級階段（8）- jQuery元素屬性樣式操做（2019-08-01期）
8. 前端培訓-中級階段（9）- 原生Ajax的運行原理與實現（2019-08-08期）

資料

1. 前端培訓目錄、前端培訓規劃、前端培訓計劃
2. 瀏覽器同源策略及跨域的解決方法