摘要:瀏覽器同源策略我們為何要研究跨域問題因為瀏覽器的同源策略規定某域下的客戶端在沒明確授權的情況下,不能讀寫另一個域的資源。
跨域,老生常談的問題 簡述
作為一只前端菜鳥,跨域方面只懂得JSONP和CORS,并未曾深入了解。但隨著春招越來越近,就算是菜鳥也要猛振翅膀。近幾日仔細研究了跨域問題,寫下這篇文章,希望對開發者們有所幫助。在讀本文前,希望您對以下知識略有了解。
瀏覽器同源策略
nodejs
iframe
docker, nginx
我們為何要研究跨域問題因為瀏覽器的同源策略規定某域下的客戶端在沒明確授權的情況下,不能讀寫另一個域的資源。而在實際開發中,前后端常常是相互分離的,并且前后端的項目部署也常常不在一個服務器內或者在一個服務器的不同端口下。前端想要獲取后端的數據,就必須發起請求,如果不做一些處理,就會受到瀏覽器同源策略的約束。后端可以收到請求并返回數據,但是前端無法收到數據。
為何瀏覽器會制定同源策略之所以有同源策略,其中一個重要原因就是對cookie的保護。cookie 中存著sessionID 。黑客一旦獲取了sessionID,并且在有效期內,就可以登錄。當我們訪問了一個惡意網站 如果沒有同源策略 那么這個網站就能通過js 訪問document.cookie 得到用戶關于的各個網站的sessionID 其中可能有銀行網站 等等。通過已經建立好的session連接進行攻擊,比如CSRF攻擊。
這里需要服務端配合再舉個例子,現在我扮演壞人 我通過一個iframe 加載某寶的登錄頁面 等傻傻的用戶登錄我的網站的時候 我就把這個頁面彈出 用戶一看 阿里唉大公司 肯定安全 就屁顛屁顛的輸入了密碼 注意 如果沒有同源策略 我這個惡意網站就能通過dom操作獲取到用戶輸入的值 從而控制該賬戶所以同源策略是絕對必要的.
還有需要注意的是同源策略無法完全防御CSRF。
跨域可以大概分為兩種目的
前后端分離時,前端為了獲取后端數據而跨域
為不同域下的前端頁面通信而跨域
為前后端分離而跨域 Cross Origin Resource Share (CORS)CORS是一個跨域資源共享方案,為了解決跨域問題,通過增加一系列請求頭和響應頭,規范安全地進行跨站數據傳輸
請求頭主要包括請求頭 | 解釋 |
---|---|
Origin | Origin頭在跨域請求或預先請求中,標明發起跨域請求的源域名。 |
Access-Control-Request-Method | Access-Control-Request-Method頭用于表明跨域請求使用的實際HTTP方法 |
Access-Control-Request-Headers | Access-Control-Request-Headers用于在預先請求時,告知服務器要發起的跨域請求中會攜帶的請求頭信息 |
with-credentials | 跨域請求攜帶cookie |
響應頭 | 解釋 |
---|---|
Access-Control-Allow-Origin | Access-Control-Allow-Origin頭中攜帶了服務器端驗證后的允許的跨域請求域名,可以是一個具體的域名或是一個*(表示任意域名)。 |
Access-Control-Expose-Headers | Access-Control-Expose-Headers頭用于允許返回給跨域請求的響應頭列表,在列表中的響應頭的內容,才可以被瀏覽器訪問。 |
Access-Control-Max-Age | Access-Control-Max-Age用于告知瀏覽器可以將預先檢查請求返回結果緩存的時間,在緩存有效期內,瀏覽器會使用緩存的預先檢查結果判斷是否發送跨域請求。 |
Access-Control-Allow-Methods | Access-Control-Allow-Methods用于告知瀏覽器可以在實際發送跨域請求時,可以支持的請求方法,可以是一個具體的方法列表或是一個*(表示任意方法)。 |
客戶端只需按規范設置請求頭。
服務端按規范識別并返回對應響應頭,或者安裝相應插件,修改相應框架配置文件等。具體視服務端所用的語言和框架而定
SpringBoot 設置CORS例子一個spring boot項目中關于CORS配置的一段代碼
HttpServletResponse httpServletResponse = (HttpServletResponse) response; String temp = request.getHeader("Origin"); httpServletResponse.setHeader("Access-Control-Allow-Origin", temp); // 允許的訪問方法 httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE, PATCH"); // Access-Control-Max-Age 用于 CORS 相關配置的緩存 httpServletResponse.setHeader("Access-Control-Max-Age", "3600"); httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,token"); httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");JSONP 跨域
jsonp的原理就是借助HTML中的