Cors跨域(三)：Access-Control-Allow-Origin多域名？

作者：YourBatman 2021-06-17 07:15:36

本文將實(shí)戰(zhàn)Cors解決跨域問(wèn)題中最為重要的響應(yīng)頭：Access-Control-Allow-Origin。它用于服務(wù)端告訴瀏覽器允許共享本資源的Origin，那么如何允許多個(gè)域名呢?

[[406060]]

前言

你好，我是YourBatman。

本系列前兩篇文章用文字把跨域、Cors相關(guān)概念介紹完了，從下開(kāi)始進(jìn)入實(shí)戰(zhàn)階段。畢竟學(xué)也學(xué)了，看也看了，是騾子是馬該拉出來(lái)遛一遛。

本文提綱

版本約定

JDK：8
Servlet：4.x
tomcat：9.x

正文

正如前文所述，響應(yīng)頭Access-Control-Allow-Origin 用于在跨域請(qǐng)求中告訴瀏覽器服務(wù)端允許的Origin，瀏覽器拿到這個(gè)頭的值跟自己的Origin對(duì)比決定是否正常接收響應(yīng)。

從命名上就有所察覺(jué)：Access-Control-Allow-Origin值是單數(shù)，否則就會(huì)叫Access-Control-Allow-Origins?

(瀏覽器)官方對(duì)此響應(yīng)頭的可能值有明確規(guī)定：

也就說(shuō)此響應(yīng)頭的取值只可能是上圖中的3選1。

null值的作用：讓data:和file:打開(kāi)的頁(yè)面也能夠共享跨域資源(因?yàn)檫@種協(xié)議下有Origin頭，但是值是null，比較特殊)?

那么問(wèn)題來(lái)了，倘若服務(wù)端本資源需要允許多個(gè)域來(lái)共享，又該如何指定Access-Control-Allow-Origin 的值呢?這是一個(gè)開(kāi)發(fā)中常見(jiàn)的場(chǎng)景，本文將繼續(xù)深入討論和介紹最佳實(shí)踐。

環(huán)境準(zhǔn)備

因?yàn)橐獦?gòu)造不同的Origin來(lái)發(fā)送http://localhost:8080/multiple_origins_cors這個(gè)跨域請(qǐng)求，因此需要不同的域名，所以我需要在本機(jī)模擬出來(lái)。我的實(shí)踐方案為：

用本機(jī)Tomcat作為靜態(tài)頁(yè)面服務(wù)器，托管html頁(yè)面

修改本機(jī)host文件，達(dá)到支持多域名的目的

1. Tomcat托管靜態(tài)html頁(yè)面

之前我都是用的IDEA內(nèi)建的靜態(tài)服務(wù)器來(lái)托管html頁(yè)面，但由于它不支持綁定多域名而無(wú)法模擬出本例需要的效果，因此我就不得不開(kāi)辟新的方法嘍。

做Java開(kāi)發(fā)的小伙伴對(duì)Tomcat再熟悉不過(guò)，但由于Spring Boot的普及它屏蔽了開(kāi)發(fā)者對(duì)Web Server的感知，所以可能雖然天天用但其實(shí)鮮有接觸，特別是standalone的Tomcat服務(wù)器。

所以我這里稍微介紹下我的做法(關(guān)鍵步驟)。去到Tomcat的目錄，僅需修改它的server.xml文件即可：

步驟一：修改端口為9090(因?yàn)槲襍erver端服務(wù)器也是Tomcat，端口為8080，避免沖突)

步驟二：在host里托管Context上下文，關(guān)聯(lián)到你的html文件夾(Tips：這只是托管的方式之一)

說(shuō)明：docBase表示靜態(tài)頁(yè)面所在的文件夾(絕對(duì)路徑)，path表示對(duì)應(yīng)的url訪問(wèn)路徑?

完成后，啟動(dòng)tomcat sh startup.sh后即可通過(guò)http://localhost:9090/static/xxx.html訪問(wèn)到靜態(tài)頁(yè)面啦。

2. 修改Host支持多域名

這個(gè)就比較簡(jiǎn)單了，無(wú)需多言，粘張圖就懂。

這樣通過(guò)如圖中的3個(gè)域名就都可對(duì)頁(yè)面進(jìn)行正常訪問(wèn)啦

3. 書(shū)寫(xiě)前端html頁(yè)面

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>多Origin響應(yīng)CORS跨域請(qǐng)求</title> 
    <!--導(dǎo)入Jquery--> 
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> 
</head> 
<body> 
<button id="btn">多Origin響應(yīng)CORS跨域請(qǐng)求</button> 
<div id="content"></div> 
 
<script> 
    $("#btn").click(function () { 
        // 跨域請(qǐng)求 
        $.get("http://localhost:8080/multiple_origins_cors", function (result) { 
            $("#content").append(result).append("<br/>"); 
        }); 
    }); 
</script> 
</body> 
</html>

4. 書(shū)寫(xiě)服務(wù)端代碼

/** 
 * 多Origin響應(yīng) 
 * 
 * @author YourBatman. <a href=mailto:yourbatman@aliyun.com>Send email to me</a> 
 * @site https://yourbatman.cn 
 * @date 2021/6/9 10:36 
 * @since 0.0.1 
 */ 
@Slf4j 
@WebServlet(urlPatterns = "/multiple_origins_cors") 
public class MultipleOriginsCorsServlet extends HttpServlet { 
 
    @Override 
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { 
        String requestURI = req.getRequestURI(); 
        String method = req.getMethod(); 
        String originHeader = req.getHeader("Origin"); 
        log.info("收到請(qǐng)求：{}，方法：{}， Origin頭：{}", requestURI, method, originHeader); 
 
        resp.getWriter().write("hello multiple origins cors..."); 
        setCrosHeader(resp); 
    } 
 
    /** 
     * 寫(xiě)跨域響應(yīng)頭 
     */ 
    private void setCrosHeader(HttpServletResponse resp) { 
        resp.setHeader("Access-Control-Allow-Origin", "http://localhost:9090"); 
    } 
}

至此，環(huán)境已經(jīng)準(zhǔn)備好。此頁(yè)面有三個(gè)地址/域名可以訪問(wèn)到(不包括localhost)，也就是Origin可能有這三種情況：

http://foo.baidu.com:9090
http://bar.baidu.com:9090
http://static.yourbatman.cn:9090

Access-Control-Allow-Origin支持多域名

現(xiàn)實(shí)場(chǎng)景中，服務(wù)端資源如若是完全公開(kāi)的，那么可以使用Access-Control-Allow-Origin: *。但在現(xiàn)實(shí)場(chǎng)景中大多數(shù)資源并非完全public的，因此需要指定Access-Control-Allow-Origin具體值來(lái)達(dá)到控制的目的。

那么，如何讓Access-Control-Allow-Origin支持多域名呢?下面示范一下常見(jiàn)的錯(cuò)誤方式，最后給出最佳實(shí)踐。

要實(shí)現(xiàn)Access-Control-Allow-Origin允許多個(gè)域名共享資源，按照“常規(guī)思維”，有好些個(gè)使用誤區(qū)，這里我嘗試羅列出來(lái)。

誤區(qū)一：Access-Control-Allow-Origin值使用,分隔

,分隔在程序員的世界很常見(jiàn)，很多時(shí)候可表示多值。那在這里是否好使呢?試一試

private void setCrosHeader(HttpServletResponse resp) { 
    resp.setHeader("Access-Control-Allow-Origin", "http://foo.baidu.com:9090,http://bar.baidu.com:9090"); 
}

點(diǎn)擊按鈕，發(fā)送跨域請(qǐng)求，失敗詳情：

可以看到不僅沒(méi)實(shí)現(xiàn)多值，連foo.baidu.com:9090這個(gè)域名都不能訪問(wèn)啦~

誤區(qū)二：寫(xiě)多個(gè)Access-Control-Allow-Origin響應(yīng)頭

這種方式也是“正常思維”之一。試一下：

private void setCrosHeader(HttpServletResponse resp) { 
    resp.addHeader("Access-Control-Allow-Origin", "http://foo.baidu.com:9090"); 
    resp.addHeader("Access-Control-Allow-Origin", "http://bar.baidu.com:9090"); 
}

小細(xì)節(jié)：這里將setHeader改用為addHeader(xxx)了喲，你懂的?

點(diǎn)擊按鈕，發(fā)送跨域請(qǐng)求，失敗詳情：

多說(shuō)一句：在實(shí)際開(kāi)發(fā)中這種出現(xiàn)兩個(gè)Access-Control-Allow-Origin響應(yīng)頭的case還是比較常見(jiàn)的。根據(jù)經(jīng)驗(yàn)一般原因是：Web Server設(shè)置了一個(gè)頭，而Nginx(或者Gateway網(wǎng)關(guān))又添加了一個(gè)頭(一般值為*)。

強(qiáng)調(diào)：瀏覽器只要收到兩個(gè)Access-Control-Allow-Origin響應(yīng)頭，不論值是什么(即使一模一樣)，都不會(huì)接受。

誤區(qū)三：Access-Control-Allow-Origin值使用正則

當(dāng)需要允許的多域名符合某個(gè)規(guī)律時(shí)，會(huì)想到使用簡(jiǎn)單的正則去匹配，那么是否支持呢?試一下：

private void setCrosHeader(HttpServletResponse resp) { 
    resp.addHeader("Access-Control-Allow-Origin", "http://*.baidu.com:9090"); 
}

點(diǎn)擊按鈕，發(fā)送跨域請(qǐng)求，失敗詳情：

強(qiáng)調(diào)：瀏覽器拿Access-Control-Allow-Origin的值和Origin進(jìn)行匹配的規(guī)則是完全匹配，通配符只認(rèn)*。

誤區(qū)四：Access-Control-Allow-Origin值使用*通配符

這是一個(gè)特殊的使用“誤區(qū)”：它能正常work，但并不能“很好的work”。試一下

private void setCrosHeader(HttpServletResponse resp) { 
    resp.addHeader("Access-Control-Allow-Origin", "*"); 
}

點(diǎn)擊按鈕，發(fā)送跨域請(qǐng)求，正常響應(yīng)：

既然能夠正常響應(yīng)完成跨域請(qǐng)求，為何我會(huì)認(rèn)為這么處理屬于誤區(qū)呢?

其原因主要為：使用*通配符屬于暴力配置，表示任意源都可以訪問(wèn)此資源，對(duì)大部分場(chǎng)景來(lái)講這違背了安全原則，存在安全漏洞，所以實(shí)際生產(chǎn)中并不建議這么做(除非是public資源)。

使用*通配符的漏洞

為何對(duì)使用*樂(lè)此不疲?答：因?yàn)楹?jiǎn)單，似乎能夠解決“所有”跨域問(wèn)題，且能一勞永逸。正所謂天下哪有那么多歲月靜好，黑客們?cè)谀谴来烙麆?dòng)。

在與瀏覽器“溝通”過(guò)程中，不恰當(dāng)?shù)氖褂肅ors會(huì)造成一些可能的漏洞，比如最常見(jiàn)的便是當(dāng)允許多個(gè)域名跨域請(qǐng)求時(shí)，很多同學(xué)為了方便就將Access-Control-Allow-Origin寫(xiě)為*，或者在Ng上直接賦值為$http_origin(效果完全同*)。這種暴力配置是很危險(xiǎn)的，相當(dāng)于任意網(wǎng)站都可以直接訪問(wèn)你的資源，那就失去跨域限制的意義了。

這么配置的話，在最基本的滲透測(cè)試中都是過(guò)不去的。如若你這么做且公司有安全部門(mén)，沒(méi)過(guò)多久應(yīng)該就會(huì)有人找你聊天喝茶了。

別問(wèn)我為什么會(huì)知道，因?yàn)槲揖驮话踩块T(mén)同事招呼過(guò)???

最佳實(shí)踐

來(lái)了，期待的最佳實(shí)踐它來(lái)了。允許多域名跨域是如此常見(jiàn)的場(chǎng)景，本文當(dāng)然要給出最佳實(shí)踐(供以參考)。

既然瀏覽器是精確的完整匹配這個(gè)規(guī)則我們無(wú)法修改，那只有唯一的一個(gè)辦法：在服務(wù)端給Access-Control-Allow-Origin賦值之前做邏輯：

若允許跨域，將請(qǐng)求的Origin賦值給它

若不允許跨域，不返回此頭(或者給賦值一個(gè)默認(rèn)值也是可以的)

有了理論支撐，用代碼實(shí)現(xiàn)乃分分鐘之事：

private List<String> ALLOW_ORIGINS = new ArrayList<>(); 
@Override 
public void init() throws ServletException { 
    ALLOW_ORIGINS.add("http://localhost:9090"); 
    ALLOW_ORIGINS.add("http://foo.baidu.com:9090"); 
    ALLOW_ORIGINS.add("http://bar.baidu.com:9090"); 
    ALLOW_ORIGINS.add("http://static.yourbatman.cn:9090"); 
} 
 
private void setCrosHeader(String reqOrigin, HttpServletResponse resp) { 
    if (reqOrigin == null) { 
        return; 
    } 
    // 匹配算法：equals 
    if (ALLOW_ORIGINS.contains(reqOrigin)) { 
        resp.addHeader("Access-Control-Allow-Origin", reqOrigin); 
    } 
}

如果是Ng，可以這么寫(xiě)(簡(jiǎn)單舉例而已)：

location / {   
  
 // 枚舉列出允許跨域的domian(可以使用NG支持的匹配方式) 
 set $cors_origin ""; 
    if ($http_origin ~* "^http://foo.baidu.com$") { 
            set $cors_origin $http_origin; 
    } 
    if ($http_origin ~* "^http://bar.baidu.com$") { 
            set $cors_origin $http_origin; 
    } 
    add_header Access-Control-Allow-Origin $cors_origin; 
}

既然接管了Access-Control-Allow-Origin賦值邏輯。腦洞更大一點(diǎn)，這可極具個(gè)性化和擴(kuò)展性：

ALLOW_ORIGINS：不需要再hard code，可以支持外部化配置，甚至打通配置中心
匹配算法：可以支持完全匹配、前綴匹配、正則匹配，設(shè)置更復(fù)雜的匹配邏輯都可
...

說(shuō)了這么多，這些個(gè)性化擴(kuò)展性都需要代碼去實(shí)現(xiàn)，那到底有沒(méi)有現(xiàn)成可用的最佳實(shí)踐代碼呢?

當(dāng)然，有!!!

作為Java開(kāi)發(fā)者yyds：Spring框架。怎能沒(méi)考慮到這么常見(jiàn)的Cors跨域場(chǎng)景呢?它提供的org.springframework.web.filter.CorsFilter就是真實(shí)可用的最佳實(shí)踐，可以拿來(lái)就用或者作為參考和學(xué)習(xí)。

說(shuō)明：關(guān)于Spring/Spring Boot場(chǎng)景下對(duì)Cors跨域問(wèn)題的解決方案以及原理分析，本系列已安排在下下篇詳細(xì)剖析?

補(bǔ)充：Vary: Origin解決緩存問(wèn)題

在文章最后想補(bǔ)充一個(gè)“小知識(shí)點(diǎn)”：有關(guān)于瀏覽器緩存和Vary的問(wèn)題。

關(guān)于Vary，平時(shí)比較細(xì)心的同學(xué)應(yīng)該會(huì)比較有印象。Vary中文含義：變化。它是一個(gè)HTTP響應(yīng)頭，決定了對(duì)于下一個(gè)請(qǐng)求，應(yīng)該使用緩存還是向源服務(wù)器請(qǐng)求一個(gè)新的Response，和內(nèi)容協(xié)商(你知道的，內(nèi)容協(xié)商也屬于我的一個(gè)技術(shù)專欄)有關(guān)。現(xiàn)在的瀏覽器都支持這個(gè)響應(yīng)頭~

標(biāo)準(zhǔn)語(yǔ)法是：

ary: * // 告訴瀏覽器，所有的響應(yīng)頭都是變得所以都不緩存 
Vary: <header-name>, <header-name>, ... // 告訴瀏覽器，有些頭都是變的就不要緩存了

說(shuō)了這么多，它和本文有何關(guān)系呢?

由于這和瀏覽器緩存(cache-control)背景知識(shí)強(qiáng)關(guān)聯(lián)，并非本文重點(diǎn)無(wú)需詳細(xì)展開(kāi)。因此這里只是提示你：如若出現(xiàn)同一份URL(相同的Referer)，不同的Origin(如foo.baidu.com和bar.baidu.com)請(qǐng)求時(shí)一個(gè)能行一個(gè)不能行，那很有可能就是瀏覽器緩存導(dǎo)致，這時(shí)就可以增加一個(gè)響應(yīng)頭Vary: Origin來(lái)解決。

?說(shuō)明：這里假設(shè)服務(wù)端對(duì)Access-Control-Allow-Origin的賦值邏輯一切正常，也就是說(shuō)服務(wù)端沒(méi)有問(wèn)題?

總結(jié)

本文圍繞Access-Control-Allow-Origin這個(gè)響應(yīng)頭，從幾大誤區(qū)到最佳實(shí)踐，希望能夠幫助你加深對(duì)它的理解。當(dāng)然最重要的是：盡量不要一碰到Access-Control-Allow-Origin就只會(huì)賦值*啦，多些思考多些安全性考慮，畢竟安全部門(mén)的茶水最好還是不要喝。

責(zé)任編輯：武曉燕來(lái)源： BAT的烏托邦

Cors 跨域多域名