同源策略的定義
同源策略(Same Origin Policy)是一種約定,它是瀏覽器最核心最基本的安全功能。所謂的同源是指域名、協議、端口相同。不一樣源的客戶端腳本在沒有明確受權的狀況下是不容許讀寫其餘網站的資源前端
爲何要設置同源策略呢?
若是沒有同源策略,那麼a.com加載過的js,可以在未加載過這個腳本的b.com上的頁面隨意執行並被讀取(cookie等敏感信息),是十分危險的。ajax
就好像A網站是一家銀行,用戶登陸之後,又去瀏覽其餘的網站,若是其餘網站能夠讀取A網站的Cookie,會發生什麼?很顯然,若是Cookie包含隱私(好比存款總額),這些信息就會泄漏。更可怕的是Cookie每每用來保存用於的登陸狀態,若是用戶沒有退出登陸,其餘網站就能夠冒充用戶隨心所欲,由於瀏覽器同時還規定,提交表單不受同源策略的限制。json
因而可知,同源策略是必須的。若是非同源,那麼在請求數據時,瀏覽器會在控制檯中報一個異常,提示拒絕訪問。後端
什麼是cookie?跨域
Cookies是由網絡服務器發送出來以存儲在網絡瀏覽器上,便於下次同一訪客又訪問該網絡服務器所使用的信息。 Cookies最典型的應用是斷定註冊用戶是否已經登陸網站,用戶可能會獲得提示,是否在下一次進入此網站時保留用戶信息以便簡化登陸手續,這些都是Cookies的功用。 另外一個重要應用場合是「購物車」之類的應用。用戶可能會在一段時間內在同一家網站的不一樣頁面中選擇不一樣的商品,這些信息都會寫入Cookies,以便在最後付款時提取信息。 Cookies能夠保持登陸信息到用戶下次與服務器的會話,還有一些Cookie在用戶退出會話的時候就被刪除了,這樣能夠有效保護我的隱私。
同源策略會限制如下幾種行爲瀏覽器
1.cookie、LocalStorage和IndexDB沒法讀取 2.DOM和js對象沒法獲取 3.AJAX請求不能發送
如何繞過同源策略叫作跨域安全
1. 資源跳轉: A連接、重定向、表單提交 2. 資源嵌入: <link>、<script>、<img>、<frame>等dom標籤,還有樣式中background:url()、@font-face()等文件外鏈 3. 腳本請求: js發起的ajax請求、dom和js對象的跨域操做等
跨域解決方案
JSONP(JSON with padding)
HTML 中 script,img標籤這樣獲取資源的標籤是沒有跨域限制的,好比咱們常常引入一個其餘域下線上cdn的jQuery。
實現:JSONP是經過 script 標籤加載數據的方式去獲取數據當作 JS 代碼來執行。提早在頁面上聲明一個函數,函數名經過接口傳參的方式傳給後臺,後臺解析到函數名後在原始數據上「包裹」這個函數名,發送給前端。換句話說,JSONP 須要對應接口的後端的配合才能實現。
缺點:JSONP只能發GET請求,由於本質上script加載資源就是GET服務器
CORS
CORS 全稱是跨域資源共享(Cross-Origin Resource Sharing),是一種 ajax 跨域請求資源的方式,支持現代瀏覽器,IE支持10以上。
實現:當你使用 XMLHttpRequest 發送請求時,瀏覽器發現該請求不符合同源策略,會給該請求加一個請求頭:Origin,後臺進行一系列處理,若是肯定接受請求則在返回結果中加入一個響應頭:Access-Control-Allow-Origin; 瀏覽器判斷該響應頭中是否包含 Origin 的值,若是有則瀏覽器會處理響應,咱們就能夠拿到響應數據,若是不包含瀏覽器直接駁回,這時咱們沒法拿到響應數據。因此 CORS 的表象是讓你以爲它與同源的 ajax 請求沒啥區別,代碼徹底同樣。
普通跨域請求只須要服務端設置Access-Control-Allow-Origin便可,前端無須設置;若要帶cookie請求:先後端都須要設置。cookie
可是這兩項技術也引發了CSRF漏洞。jsonp利用script標籤的src屬性不受同源策略影響的特性。網絡
暫時總結到這,有點亂看法一下。