本篇內(nèi)容主要講解“分析CORS跨域資源共享”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“分析CORS跨域資源共享”吧!

創(chuàng)新互聯(lián)建站主打移動(dòng)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、域名與空間、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

了解下同源策略

•     源（origin）*：就是協(xié)議、域名和端口號(hào)；

•     同源： 就是源相同，即協(xié)議、域名和端口完全相同；

•     同源策略：同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對(duì)方資源；

•     同源策略的分類：

      1 . DOM 同源策略：即針對(duì)于DOM，禁止對(duì)不同源頁(yè)面的DOM進(jìn)行操作;如不同域名的 iframe 是限制互相訪問。

      2 . XMLHttpRequest 同源策略：禁止使用 XHR 對(duì)象向不同源的服務(wù)器地址發(fā)起 HTTP 請(qǐng)求。

•  不受同源策略限制：

      1.  頁(yè)面中的鏈接，重定向以及表單提交(因?yàn)楸韱翁峤?，?shù)據(jù)提交到action域后，本身頁(yè)面就和其沒有關(guān)系了，不會(huì)管請(qǐng)求結(jié)果，后面操作都交給了action里面的域)是不會(huì)受到同源策略限制的。

      2.  資源的引入不受限制，但是js不能讀寫加載的內(nèi)容：如嵌入到頁(yè)面中的<script src="..."></script>，<img>，<link>，<iframe>等

為什么要跨域限制

•  如果沒有 DOM 同源策略：那么就沒有啥xss的研究了，因?yàn)槟愕木W(wǎng)站將不是你的網(wǎng)站，而是大家的，誰都可以寫個(gè)代碼操作你的網(wǎng)站界面

•  如果沒有XMLHttpRequest 同源策略，那么就可以很輕易的進(jìn)行CSRF（跨站請(qǐng)求偽造）：

      1.  用戶登錄了自己的網(wǎng)站頁(yè)面 a.com,cookie中添加了用戶標(biāo)識(shí)。

      2.  用戶瀏覽了惡意頁(yè)面 b.com，執(zhí)行了頁(yè)面中的惡意 AJAX 請(qǐng)求代碼。

      3.  b.com 向 a.com發(fā)起 AJAX HTTP 請(qǐng)求，請(qǐng)求會(huì)默認(rèn)把 a.com對(duì)應(yīng)cookie也同時(shí)發(fā)送過去。

      4.  a.com從發(fā)送的 cookie 中提取用戶標(biāo)識(shí)，驗(yàn)證用戶無誤，response 中返回請(qǐng)求數(shù)據(jù);數(shù)據(jù)就泄露了。而且由于Ajax在后臺(tái)執(zhí)行，這一過程用戶是無法感知的。

•  （附）有了XMLHttpRequest 同源策略就可以限制CSRF？別忘了還有不受同源策略的：表單提交和資源引入，（安全問題下期在研究）

跨域決解方案

  1. JSONP 跨域：借鑒于 script 標(biāo)簽不受瀏覽器同源策略的影響，允許跨域引用資源；因此可以通過動(dòng)態(tài)創(chuàng)建 script 標(biāo)簽，然后利用 src 屬性進(jìn)行跨域；

      缺點(diǎn)：

    1.所有網(wǎng)站都可以拿到數(shù)據(jù)，存在安全性問題，需要網(wǎng)站雙方商議基礎(chǔ)token的身份驗(yàn)證。

    2.只能是GET，不能POST。

    3.可能被注入惡意代碼，篡改頁(yè)面內(nèi)容，可以采用字符串過濾來規(guī)避此問題。

  2. 服務(wù)器代理：瀏覽器有跨域限制，但是服務(wù)器不存在跨域問題，所以可以由服務(wù)器請(qǐng)求所要域的資源再返回給客戶端。

  3. document.domain、window.name 、location.hash：借助于iframe決解DOM同源策略

  4. postMessage：決解DOM同源策略，新方案

  5. CORS（跨域資源共享）：這里講的重點(diǎn)

CORS（跨域資源共享）

•  HTML5 提供的標(biāo)準(zhǔn)跨域解決方案，是一個(gè)由瀏覽器共同遵循的一套控制策略，通過HTTP的Header來進(jìn)行交互；主要通過后端來設(shè)置CORS配置項(xiàng)

CORS簡(jiǎn)單使用

•  之前說得CORS跨域，嗯嗯，后端設(shè)置Access-Control-Allow-Origin：*|[或具體的域名]就好了；

• 初次嘗試： 

app.use(async(ctx,next) => {      ctx.set({          "Access-Control-Allow-Origin": "http://localhost:8088"  })

•  發(fā)現(xiàn)有些請(qǐng)求可以成功，但是有些還是會(huì)報(bào)錯(cuò)：

•  請(qǐng)求被同源策略阻止，預(yù)請(qǐng)求的響應(yīng)沒有通過檢查：http返回的不是ok?

•  并且發(fā)現(xiàn)發(fā)送的是OPTIONS請(qǐng)求:

•  發(fā)現(xiàn)：CORS規(guī)范將請(qǐng)求分為兩種類型，一種是簡(jiǎn)單請(qǐng)求，另外一種是帶預(yù)檢的非簡(jiǎn)單請(qǐng)求 

簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求

•  瀏覽器發(fā)送跨域請(qǐng)求判斷方式：

•   瀏覽器在發(fā)送跨域請(qǐng)求的時(shí)候，會(huì)先判斷下是簡(jiǎn)單請(qǐng)求還是非簡(jiǎn)單請(qǐng)求，如果是簡(jiǎn)單請(qǐng)求，就先執(zhí)行服務(wù)端程序，然后瀏覽器才會(huì)判斷是否跨域；

•   而對(duì)于非簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)在發(fā)送實(shí)際請(qǐng)求之前先發(fā)送一個(gè)OPTIONS的HTTP請(qǐng)求來判斷服務(wù)器是否能接受該跨域請(qǐng)求；如果不能接受的話，瀏覽器會(huì)直接阻止接下來實(shí)際請(qǐng)求的發(fā)生。

•  什么是簡(jiǎn)單請(qǐng)求

     1. 請(qǐng)求方法是如下之一：

        GET

        HEAD

        POST

     2. 所有的Header都只包含如下列表中（沒有自定義header）：

        Cache-Control

        Content-Language

        Content-Type

        Expires

        Last-Modified

        Pragma

•  除此之外都是非簡(jiǎn)單請(qǐng)求

CORS非簡(jiǎn)單請(qǐng)求配置須知

•  正如上圖報(bào)錯(cuò)顯示，對(duì)于非簡(jiǎn)單請(qǐng)求，瀏覽器會(huì)先發(fā)送options預(yù)檢，預(yù)檢通過后才會(huì)發(fā)送真是的請(qǐng)求；

•  發(fā)送options預(yù)檢請(qǐng)求將關(guān)于接下來的真實(shí)請(qǐng)求的信息給服務(wù)器： 

Origin：請(qǐng)求的源域信息  Access-Control-Request-Method：接下來的請(qǐng)求類型，如POST、GET等  Access-Control-Request-Headers：接下來的請(qǐng)求中包含的用戶顯式設(shè)置的Header列表

•  服務(wù)器端收到請(qǐng)求之后，會(huì)根據(jù)附帶的信息來判斷是否允許該跨域請(qǐng)求，通過Header返回信息： 

Access-Control-Allow-Origin：允許跨域的Origin列表  Access-Control-Allow-Methods：允許跨域的方法列表  Access-Control-Allow-Headers：允許跨域的Header列表,防止遺漏Header，因此建議沒有特殊需求的情況下設(shè)置為*  Access-Control-Expose-Headers：允許暴露給JavaScript代碼的Header列表  Access-Control-Max-Age：瀏覽器預(yù)檢請(qǐng)求緩存時(shí)間，單位為s

CORS完整配置

 1. koa配置CORS跨域資源共享中間件：

const cors = (origin) => {      return async (ctx, next) => {          ctx.set({              "Access-Control-Allow-Origin": origin, //允許的源          })          // 預(yù)檢請(qǐng)求          if (ctx.request.method == "OPTIONS") {              ctx.set({                  'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST', //支持跨域的方法                  'Access-Control-Allow-Headers': '*', //允許的頭                  'Access-Control-Max-Age':10000, // 預(yù)檢請(qǐng)求緩存時(shí)間                  // 如果服務(wù)器設(shè)置Access-Control-Allow-Credentials為true，那么就不能再設(shè)置Access-Control-Allow-Origin為*,必須用具體的域名                  'Access-Control-Allow-Credentials':true // 跨域請(qǐng)求攜帶身份信息(Credential，例如Cookie或者HTTP認(rèn)證信息)              });              ctx.send(null, '預(yù)檢請(qǐng)求')          } else {              // 真實(shí)請(qǐng)求              await next()          }      }  }  export default cors

•  現(xiàn)在不管是簡(jiǎn)單請(qǐng)求還是非簡(jiǎn)單請(qǐng)求都可以跨域訪問啦～

跨域時(shí)如何處理cookie

•  cookie：

      我們知道http時(shí)無狀態(tài)的，所以在維持用戶狀態(tài)時(shí)，我們一般會(huì)使用cookie；

      cookie每次同源請(qǐng)求都會(huì)攜帶；但是跨域時(shí)cookie是不會(huì)進(jìn)行攜帶發(fā)送的；

•  問題：

      由于cookie對(duì)于不同源是不能進(jìn)行操作的；這就導(dǎo)致，服務(wù)器無法進(jìn)行cookie設(shè)置，瀏覽器也沒法攜帶給服務(wù)器（場(chǎng)景：用戶登錄進(jìn)行登錄操作后，發(fā)現(xiàn)響應(yīng)中有set-cookie但是，瀏覽器cookie并沒有相應(yīng)的cookie）

•  決解：

      瀏覽器請(qǐng)求設(shè)置withCredentials為true即可讓該跨域請(qǐng)求攜帶 Cookie；使用axios配置axios.defaults.withCredentials = true

      服務(wù)器設(shè)置Access-Control-Allow-Credentials=true允許跨域請(qǐng)求攜帶 Cookie

到此，相信大家對(duì)“分析CORS跨域資源共享”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

網(wǎng)站名稱：分析CORS跨域資源共享
網(wǎng)站路徑：http://www.rwnh.cn/article48/jdjihp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)公司、小程序開發(fā)、品牌網(wǎng)站建設(shè)、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)