同源策略 同源策略 同源策略限制從一個源載入的文檔或者腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。 具體定義是:一段腳本向後臺請求數據,只能讀取屬於同一協議名、同一主機名、同一埠號下的數據。因此,請求不同協議名、不同主機名、不同埠號下的文件,違背同源策略, ...
同源策略
同源策略
同源策略限制從一個源載入的文檔或者腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
具體定義是:一段腳本向後臺請求數據,只能讀取屬於同一協議名、同一主機名、同一埠號下的數據。因此,請求不同協議名、不同主機名、不同埠號下的文件,違背同源策略,無法請求成果,需要進行跨域處理。
同源策略限制的具體行為:
(1)Cookie、LocalStorage、IndexDB無法讀取;
(2)DOM無法獲得;
(3)AJAX請求不能發送。
什麼是跨域?
兩個頁面之間的請求,協議、功能變數名稱、埠都必須相同,才算在同一個域,否則就是跨域。
直接通過FORM表單提交的post/get請求不受同源策略限制,因此需要設置csrf_token防範CSRF攻擊。
跨域處理方法
CORS——服務端放開跨域限制(即XHR2)
CORS,Cross-Origin Resource Sharing,跨域資源共用
CORS定義了一種瀏覽器和伺服器交互的方式來確定是否允許跨域請求。CORS是一種網路瀏覽器的技術規範,它為Web伺服器定義了一種方式,允許網頁從不同的域訪問其資源。 CORS允許一個域上的網路應用向另一個域提交跨域AJAX請求。只需伺服器發送一個響應header即可。
由於有同源策略,跨域請求預設是禁止的。
CORS通過設置HTTP Header Access-Control-Allow-Origin實現:
Access-Control-Allow-Origin:* //允許所有功能變數名稱的腳本訪問該資源
Access-Control-Allow-Origin:http://a.b.com //允許特定功能變數名稱訪問該資源
Access-Control-Allow-Methods:GET, PUT, DELETE, POST //允許的跨域請求
Access-Control-Allow-Headers:content-type //允許跨域請求保護header
Access-Control-Max-Age:xxx //跨域有效期內不需要重新發送預校驗(OPTIONS)請求
CORS流程:JS先發出跨域請求,再檢查響應中的“Access-Control-Allow-Origin”頭。如果這個頭允許當前頁面跨域訪問,則可以讀取響應,否則被禁止訪問。如果不是簡單的CORS,則先發送OPTIONS進行預校驗,允許訪問再發送跨域請求。
代理
方法一:通過後端(ASP、ASP.NET、JAVA、PHP)獲取其他功能變數名稱下內容,再將結果返回前端。
方法二:NGINX反向代理轉發
NGINX代理,轉換為同功能變數名稱。CORS的致命缺點:AJAX不會把cookie中的session id也發送過去。
方法三:NGINX方向代理,通過NGINX進行CORS控制。
JSONP
jsonp只支持get請求,不支持post。
原理:動態引入script標簽,而script標簽的src是可以跨域的。
iframe
通過修改document.domain來跨域:只能把document.main設置成自身或者更高一級的父域,且主域必須相同。——實現不同字域的框架間的交互。
可以用隱藏的iframe做代理,讓iframe載入一個與AJAX目標頁面處在相同域的頁面,因此,該iframe可以正常使用AJAX獲取數據,再通過修改document.domain,讓主頁面的js可以完全控制iframe。