前端JS如何获取主域名(根域名)

本文涉及的产品
.cn 域名,1个 12个月
简介: ## 背景 最近项目中需要获取url的主域名,比如`www.baidu.com`那么就需要获取`baidu.com`,看似简单,`.`号分隔,取到最后两位就行,但是坑爹的是有`xxx.com.cn`这类域名,还有很多日本的域名,类似`toei.aichi.jp`等,这些都无法通过这种简单的取最后两位的方式来获取,看来只能枚举了。 ## Public Suffix List 这问题

背景

最近项目中需要获取url的主域名,比如www.baidu.com那么就需要获取baidu.com,看似简单,.号分隔,取到最后两位就行,但是坑爹的是有xxx.com.cn这类域名,还有很多日本的域名,类似toei.aichi.jp等,这些都无法通过这种简单的取最后两位的方式来获取,看来只能枚举了。

Public Suffix List

这问题肯定是早有人就遇到了,于是各路有识之士已经帮你完整得准备好了一个列表,里面全部都是那些奇葩域名,一些jp域名也是让我长见识了,不知道各位老司机在秋名山飙车的时候有没有见过这些个域名:

秋田.jp
群馬.jp
香川.jp
高知.jp
鳥取.jp
鹿児島.jp
// jp geographic type names
// http://jprs.jp/doc/rule/saisoku-1.html
*.kawasaki.jp
*.kitakyushu.jp
*.kobe.jp
*.nagoya.jp
*.sapporo.jp
*.sendai.jp
*.yokohama.jp
!city.kawasaki.jp
!city.kitakyushu.jp
!city.kobe.jp
!city.nagoya.jp
!city.sapporo.jp
!city.sendai.jp
!city.yokohama.jp
// 4th level registration
aisai.aichi.jp

感兴趣的朋友可以看看这个github项目:https://github.com/wrangr/psl

这里有各种主域名的列表:https://publicsuffix.org/list/public_suffix_list.dat.

浏览器其实也有内置类似的东西,用来做域名判断,cookie存储之类的事宜。

pls的问题

问题看似好像解决了,已经有现成的脚本去获取,但是仔细一看这脚本竟然有将近200K,而我自己的脚本才10K,既然浏览器已经内置了pls,那浏览器有没有暴露内置接口呢?很遗憾,搜索了一下并没有,而且浏览器那么多,即使chrome暴露了,IE肯定没有,等等,刚刚好像我们说到浏览器用来做域名判断,cookie存储,那我们能不能用这类方式间接地去调用内置pls呢?

最终解决方案

目前想到有两种方式可以间接去调,document.doamindocument.cookie,测试一下就会发现,如果你尝试把当前域名设置为com.cn或者把cookie设置到com.cn上面,浏览器并不会生效,document.domain在第二次设置的时候,firefox会抛错,看来并不是很合适,而且可能多多少少会影响到业务,cookie设置方便,而且清除也方便,上代码:

function getMainHost() {
  let key  = `mh_${Math.random()}`;
  let keyR = new RegExp( `(^|;)\\s*${key}=12345` );
  let expiredTime = new Date( 0 );
  let domain = document.domain;
  let domainList = domain.split( '.' );

  let urlItems   = [];
  // 主域名一定会有两部分组成
  urlItems.unshift( domainList.pop() );
  // 慢慢从后往前测试
  while( domainList.length ) {
    urlItems.unshift( domainList.pop() );
    let mainHost = urlItems.join( '.' );
    let cookie   = `${key}=${12345};domain=.${mainHost}`;

    document.cookie = cookie;

    //如果cookie存在,则说明域名合法
    if ( keyR.test( document.cookie ) ) {
      document.cookie = `${cookie};expires=${expiredTime}`;
      return mainHost;
    }
  }
}

拉了差不多几十个pls里面的域名,跑了一下单元测试,没有问题。

目录
相关文章
|
6天前
|
数据可视化 前端开发 JavaScript
前端框架与库-D3.js数据可视化基础
【7月更文挑战第21天】D3.js是Web开发中创建动态、交互图表的利器,适用于从基础条形图到复杂地理热力图的广泛需求。核心概念涉及数据绑定至DOM,支持动态更新。初学者常遇难题包括不当数据绑定、选择器误用、过渡动画过量及坐标轴配置失误。避免策略需善用`.data()`, `.enter().append()`, `.exit().remove()`管理数据,熟知选择器差异,适度应用`.transition()`, 并精准设定坐标轴。示例条形图代码展示了数据绑定至`<rect>`元素的过程,奠定基础,助你进阶复杂项目。
|
9天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
20 4
|
13天前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
12天前
|
JavaScript 前端开发 API
前端框架与库 - Vue.js 组件与路由
【7月更文挑战第15天】Vue.js 框架以简洁API和高效DOM更新著名,组件和路由是构建应用的关键。组件是自包含的实例,常见问题包括命名冲突、作用域混淆和状态管理。要避免这些问题,可使用命名空间、明确数据绑定和事件,以及采用Vuex管理状态。Vue Router提供声明式路由,常见挑战包括路由守卫、动态路由参数和懒加载配置。正确使用路由守卫、处理动态参数和实现代码分割能优化路由管理。提供的代码示例展示了基本组件和路由配置。
|
21天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
21天前
|
前端开发 NoSQL JavaScript
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
若依修改---重新部署项目注意事项,新文件初始化需要修改的地方,打包后的文件很难进行修改,如果想要不断修改项目,注意保存原项目,才可以不断修改,前端:在Vue.config.js文件中修改target
|
21天前
|
前端开发 JavaScript Linux
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
若依修改之后,无法访问前端项目如何解决,只能访问后端的接口,我的接口8083,端不显示咋解决?在vue.config.js文件中的映射路径要跟后端匹配,到软件商店里找到Ngnix配置代理,设80不用加
|
22天前
|
前端开发 JavaScript
js 打开资源管理器(经典范例:纯前端选择并预览图片)
js 打开资源管理器(经典范例:纯前端选择并预览图片)
30 0
|
23天前
|
前端开发
若依修改,前端部署最初的样子,Ngnix部署最初的模样,配置域名/,就能够访问,最初的Ngnix的配置是怎样写的
若依修改,前端部署最初的样子,Ngnix部署最初的模样,配置域名/,就能够访问,最初的Ngnix的配置是怎样写的
|
24天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
18 0