摘要：首先聲明，這里所說(shuō)的根域名，并不是指全球共有臺(tái)根邏輯域名服務(wù)器這句話中的根域名。在本文中，我們將這樣的域名稱為根域名。無(wú)論訪問(wèn)哪個(gè)子站點(diǎn)，都要通過(guò)將存放到根域名下。在這種情況下，顯然我們不能認(rèn)為是根域名。比如一個(gè)名為的倉(cāng)庫(kù)。

首先聲明，這里所說(shuō)的“根域名”，并不是指“全球共有13臺(tái)根邏輯域名服務(wù)器”這句話中的“根域名”。而是指某一個(gè)站點(diǎn)的“根域名”。

百度搜索是“www.baidu.com”，百度翻譯的域名是“fanyi.baidu.com”，百度地圖的域名則是“map.baidu.com”。這些域名有共同的部分“baidu.com”。在本文中，我們將“baidu.com”這樣的域名稱為“根域名”。前端同學(xué)應(yīng)該都知道，在“.baidu.com”這一域下的 cookie 可以在其他子站點(diǎn)下拿到（當(dāng)然，前提是端口號(hào)和協(xié)議都保持一致）。

最近開(kāi)發(fā)的過(guò)程中遇上了一個(gè)小問(wèn)題。無(wú)論訪問(wèn)哪個(gè)子站點(diǎn)，都要通過(guò) js 將 cookie 存放到根域名下。

一開(kāi)始比較大意，直接拿正則匹配。問(wèn)題是忽略了這世界上還存在“www.xxx.edu.cn”這樣的站點(diǎn)。在這種情況下，顯然我們不能認(rèn)為”edu.cn“是根域名。想在一個(gè)叫“edu.cn”的域下存 cookie？對(duì)不起，瀏覽器做不到。（這句話很重要。）

正則匹配是做不到了。搜索了一下，網(wǎng)上也沒(méi)有什么特別好的解決方案。無(wú)非是枚舉出國(guó)內(nèi)常見(jiàn)的一些頂級(jí)域名，然后再進(jìn)行處理，如下面這個(gè) PHP 的例子：

但如何確保我們枚舉出的例子一定是完全的無(wú)遺漏的呢？不完美，放棄。

接著上 github 上去找例子。倒是發(fā)現(xiàn)了一些解決域名的工具。比如一個(gè)名為 psl 的倉(cāng)庫(kù)。

PSL 是 “Public Suffix List” 的縮寫(xiě)，這個(gè)“公共域名后綴列表”項(xiàng)目本來(lái)是供瀏覽器廠商使用的?？梢栽L問(wèn)官網(wǎng)，另外建議看看這篇《域名小知識(shí)：Public Suffix List》。

我搜索到的這個(gè) psl 倉(cāng)庫(kù)正是基于 PSL、使用 js 來(lái)解析域名的。粗略看了下，存放域名的 json 文件有 108 KB。嚇?biāo)懒恕?/p>

另一款叫做 parse-domain 的，光是生成的正則表達(dá)式文件就有 203 KB。

沒(méi)辦法，一個(gè)跑到瀏覽器上的前端腳本，本身不到 1500 行，為了一個(gè)判斷引入上百 KB 的外部依賴，實(shí)在不劃算。

于是只能自己另起爐灶，想想別的辦法。

首先想到的是 document.domain。在一些需要跨域的場(chǎng)景中，可能會(huì)見(jiàn)到這貨的身影。比如這篇文章 所描述的，“相同主域名不同子域名下的頁(yè)面，可以設(shè)置 document.domain 讓它們同域”。

經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，對(duì)于域名c.example.edu.cn下的頁(yè)面，可以執(zhí)行下面這句：

document.domain = "example.edu.cn";

而在 Chrome 下，下面這句則無(wú)法執(zhí)行：

// DOMException
document.domain = "edu.cn";

瀏覽器會(huì)拋出DOMException：

1 Uncaught DOMException: Failed to set the "domain" property on "Document": "edu.cn" is not a suffix of "c.example.edu.cn".

IE 也會(huì)報(bào)出“參數(shù)無(wú)效”的錯(cuò)誤；Firefox 下同樣會(huì)拋出錯(cuò)誤：

NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value

從報(bào)錯(cuò)信息可以看到， DOMException 是可以捕獲到的。那就好辦了。

將域名（或頁(yè)面當(dāng)前的 document.domain） split 成數(shù)據(jù) ["x", "example", "edu", "cn"]，從右向左逐次加上一個(gè)元素，每次將單詞使用句點(diǎn)連接并賦值給 document.domain。如果 catch 到錯(cuò)誤，則進(jìn)行下一次操作。一旦賦值成功，即可 break 循環(huán)。

上代碼：

const domain = document.domain;
const list = domain.split(".");

let len = list.length;
let rootDomain = domain;

while (len--) {
  try {
    document.domain = list.slice(len).join(".");
    rootDomain = document.domain;
    break;
  } catch (e) {}
}

// 還得恢復(fù)原值，避免產(chǎn)生副作用
document.domain = domain;

console.log(rootDomain);

很好，經(jīng)過(guò)簡(jiǎn)單測(cè)試，Chrome、IE 妥妥的。

然而 Firefox 掛了。掛在最后的還原階段。也就是說(shuō)，F(xiàn)irefox 允許修改 document.domain，但不允許修改成上一級(jí)之后，再回退到下一級(jí)。

此外（感謝老大），在 Safari 上測(cè)試發(fā)現(xiàn)，document.domain = "cn" 不會(huì)報(bào)錯(cuò)！什么鬼？請(qǐng)移步《Webkit下最無(wú)敵的跨大域方案》。

功虧一簣。心好累啊。

最后想起前面提到的一句，“想在一個(gè)叫 edu.cn 的域下存 cookie？對(duì)不起，瀏覽器做不到?！?/p>

要不咱試試 cookie？動(dòng)手！

道理同上，每次嘗試在手動(dòng)拼接的 domain 下面存 cookie，然后檢查 cookie 是否保存成功。一旦成功，則 break 循環(huán)，并清除該 cookie。沒(méi)有副作用，只是多操作幾次 cookie。

換個(gè)思路，總算是解決了。

代碼被我放在了 Github 上。順手貼在這里：

var KEY = "__rT_dM__" + (+new Date());
var R = new RegExp("(^|;)s*" + KEY + "=1");
var Y1970 = (new Date(0)).toUTCString();

module.exports = function getRootDomain() {
  var domain = document.domain || location.hostname;
  var list = domain.split(".");
  var len = list.length;
  var temp = "";
  var temp2 = "";

  while (len--) {
    temp = list.slice(len).join(".");
    temp2 = KEY + "=1;domain=." + temp;

    // try to set cookie
    document.cookie = temp2;
  
    if (R.test(document.cookie)) {
      // clear
      document.cookie = temp2 + ";expires=" + Y1970;
      return temp;
    }
  }
};