笔记：如何获取网站根域名

首先声明，这里所说的“根域名”，并非指“全球共有13台根逻辑域名服务器”这句话中的“根域名”。而是指某一个站点的“根域名”。

百度搜索是“www.baidu.com”，百度翻译的域名是“fanyi.baidu.com”，百度地图的域名则是“map.baidu.com”。这些域名有共同的部分“baidu.com”。在本文中，咱们将“baidu.com”这样的域名称为“根域名”。前端同窗应该都知道，在“.baidu.com”这一域下的 cookie 能够在其余子站点下拿到（固然，前提是端口号和协议都保持一致）。

最近开发的过程当中赶上了一个小问题。不管访问哪一个子站点，都要经过 js 将 cookie 存放到根域名下。

一开始比较大意，直接拿正则匹配。问题是忽略了这世界上还存在“www.xxx.edu.cn”这样的站点。在这种状况下，显然咱们不能认为”edu.cn“是根域名。想在一个叫“edu.cn”的域下存 cookie？对不起，浏览器作不到。（这句话很重要。）

正则匹配是作不到了。搜索了一下，网上也没有什么特别好的解决方案。无非是枚举出国内常见的一些顶级域名，而后再进行处理，以下面这个 PHP 的例子：

但如何确保咱们枚举出的例子必定是彻底的无遗漏的呢？不完美，放弃。

PSL

接着上 github 上去找例子。却是发现了一些解决域名的工具。好比一个名为 psl 的仓库。

PSL 是 “Public Suffix List” 的缩写，这个“公共域名后缀列表”项目原本是供浏览器厂商使用的。能够访问官网，另外建议看看这篇《域名小知识：Public Suffix List》。

我搜索到的这个 psl 仓库正是基于 PSL、使用 js 来解析域名的。粗略看了下，存放域名的 json 文件有 108 KB。吓死了。

另外一款叫作 parse-domain 的，光是生成的正则表达式文件就有 203 KB。

没办法，一个跑到浏览器上的前端脚本，自己不到 1500 行，为了一个判断引入上百 KB 的外部依赖，实在不划算。

因而只能本身另起炉灶，想一想别的办法。

document.domain

首先想到的是 document.domain。在一些须要跨域的场景中，可能会见到这货的身影。好比这篇文章 所描述的，“相同主域名不一样子域名下的页面，能够设置 document.domain 让它们同域”。

通过测试发现，对于域名c.example.edu.cn下的页面，能够执行下面这句：

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

而在 Chrome 下，下面这句则没法执行：

// 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 也会报出“参数无效”的错误；Firefox 下一样会抛出错误：

NS_ERROR_DOM_BAD_DOCUMENT_DOMAIN: Illegal document.domain value

从报错信息能够看到， DOMException 是能够捕获到的。那就好办了。

将域名（或页面当前的 document.domain） split 成数据 ['x', 'example', 'edu', 'cn']，从右向左逐次加上一个元素，每次将单词使用句点链接并赋值给 document.domain。若是 catch 到错误，则进行下一次操做。一旦赋值成功，便可 break 循环。

上代码：

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) {}
}

// 还得恢复原值，避免产生反作用
document.domain = domain;

console.log(rootDomain);

很好，通过简单测试，Chrome、IE 妥妥的。

然而 Firefox 挂了。挂在最后的还原阶段。也就是说，Firefox 容许修改 document.domain，但不容许修改为上一级以后，再回退到下一级。

此外（感谢老大），在 Safari 上测试发现，document.domain = 'cn' 不会报错！什么鬼？请移步《Webkit下最无敌的跨大域方案》。

功亏一篑。心好累啊。

Cookie 救火

最后想起前面提到的一句，“想在一个叫 edu.cn 的域下存 cookie？对不起，浏览器作不到。”

要不咱试试 cookie？动手！

道理同上，每次尝试在手动拼接的 domain 下面存 cookie，而后检查 cookie 是否保存成功。一旦成功，则 break 循环，并清除该 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;
    }
  }
};