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

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

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

最近開發(fā)的過程中遇上了一個小問題。無論訪問哪個子站點，都要通過 js 將 cookie 存放到根域名下。

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

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

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

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

PSL 是 “Public Suffix List” 的縮寫，這個“公共域名后綴列表”項目本來是供瀏覽器廠商使用的。可以訪問官網(wǎng)，另外建議看看這篇《域名小知識：Public Suffix List》。

我搜索到的這個 psl 倉庫正是基于 PSL、使用 js 來解析域名的。粗略看了下，存放域名的 json 文件有 108 KB。嚇死了。

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

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

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

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

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

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

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

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

瀏覽器會拋出DOMException：

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

IE 也會報出“參數(shù)無效”的錯誤；Firefox 下同樣會拋出錯誤：

NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value

從報錯信息可以看到， DOMException 是可以捕獲到的。那就好辦了。

將域名（或頁面當(dāng)前的 document.domain） split 成數(shù)據(jù) ["x", "example", "edu", "cn"]，從右向左逐次加上一個元素，每次將單詞使用句點連接并賦值給 document.domain。如果 catch 到錯誤，則進行下一次操作。一旦賦值成功，即可 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)過簡單測試，Chrome、IE 妥妥的。

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

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

功虧一簣。心好累啊。

最后想起前面提到的一句，“想在一個叫 edu.cn 的域下存 cookie？對不起，瀏覽器做不到。”

要不咱試試 cookie？動手！

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

換個思路，總算是解決了。

代碼被我放在了 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;
    }
  }
};