Vue进阶（幺陆玖）信创终端适配改造_vue created

一、前言

随着外部监管对国产化的要求越来越高，所在产品团队信创专项改造工作开始实施，需求如下：信创平台控件只能使用在信创终端使用，不能应用在Windows上，存量系统运行过程中需要能够识别业务人员当前使用的终端操作系统，若终端操作系统为Windows，则使用旧版本Windows控制，若信创平台为麒麟ARM64、统信UOS中的其中一个，则切换为信创平台。

二、方案实施

实施方案如下：

1. 终端识别：信创终端、传统终端；
2. 浏览器识别：奇安信信创浏览器；

传统系统及浏览器信息如下：
Windows 10 神州网信政府版 Chrome浏览器

----------------navigator.userAgent------------------ 
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 

 ----------------navigator.platform------------------ 
 Win32 
1
2
3
4
5

信创系统及浏览器信息如下：

• 操作系统：统信桌面操作系统
• 处理器：兆芯处理器
• 浏览器：奇安信可信浏览器专业版(V1.0.42048.7)

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.246 Safari/537.36 Qaxbrowser

----------------navigator.platform------------------ 
Linux x86_64
1
2
3
4
5

由上述信息可知，可通过判断navigator.userAgent中的Qaxbrowser奇安信浏览器标识识别。

function isQAX(){
	if (navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}
1
2
3
4
5
6

注⚠️：麒麟桌面操作系统自带麒麟安全浏览器标识为Kylinbrowser。

• 统信UOS自带浏览器：版本 6.0.7（正式版本） （64 位）| 93.0.4577.63（此浏览器基于Chromium开源项目及其他开源软件。）

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS

----------------navigator.platform------------------ 
Linux x86_64
1
2
3
4
5

由上述信息可知，可通过判断navigator.userAgent中的UOS统信浏桌面操作系统标识识别。

function isUOS(){
	if (navigator.userAgent.indexOf("UOS") > -1)
		return true; 
	else
		return false; 
}
1
2
3
4
5
6

• 操作系统：麒麟桌面操作系统
• 处理器：长城处理器
• 浏览器：奇安信可信浏览器专业版(V1.0.41904.7)

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Linux aarch64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.246 Safari/537.36 Qaxbrowser
----------------navigator.platform------------------ 
Linux aarch64
1
2
3
4

火狐

----------------navigator.userAgent------------------ 
Mozilla/5.0 (X11; Ubuntu; Linux aarch64; rv:78.0) Gecko/20100101 Firefox/78.0
----------------navigator.platform------------------ 
Linux aarch64
1
2
3
4

由上述信息可知，可通过判断navigator.userAgent中的Qaxbrowser奇安信浏览器标识识别。

function isQAX(){
	if (navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}
1
2
3
4
5
6

综上信息可知，判断终端为信创终端且浏览器为奇安信浏览器的识别逻辑如下：

function isXCandQAX(){
	if (navigator.userAgent.indexOf("Linux") > -1 && navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}
1
2
3
4
5
6

2.1 存在的问题

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

• 基于检测用户代理字符串agent string的浏览器识别是比较不可靠的，用户代理字符串是用户可配置的，navigator 数据可被浏览器使用者更改；

• 浏览器无法报告晚于浏览器发布的新操作系统；

• 在 Firefox 中，可以在 about:config 中更改首选项 general.useragent.override。一些火狐扩展是这样做的。但是，这只会更改发送并由navigator.userAgent返回的HTTP标头。可能还有其他方法利用 JavaScript 代码来识别浏览器。

• Opera 6+ 允许用户通过菜单设置浏览器标识字符串。

• Microsoft Internet Explorer使用Windows注册表。

• Safari 和 iCab 允许用户通过菜单将浏览器用户代理字符串更改为预定义的 Internet Explorer 或 Netscape 字符串。

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，故可以据此识别出 Opera。

例子：

if (window.opera) {...some action...}
1

另外，在 JavaScript 中，无法直接获取设备的 MAC 地址或 CPU 号等底层信息。这是因为浏览器和 Node.js 运行在操作系统提供的沙箱中，限制了对底层硬件的访问和操作。

如果需要获取设备的 MAC 地址或 CPU 号，可以通过在操作系统上运行本地程序或插件来获取，然后将信息传递给 JavaScript 应用。但是这种做法会引入安全风险，不建议在 web 应用中使用。

在一些特定场景下，可以使用浏览器提供的 WebRTC API，通过获取网络接口列表来获取设备的 MAC 地址。但是这种方法不是通用的，而且可能会受到一些限制。

2.2 方案优化

以上方案存在以下问题：

1. 在终端识别时，只可区分Windows与Linux操作系统类型，并不能识别CPU处理器（例如：Intel CORE i7）等硬件信息。故存在Linux非信创操作系统上运行奇安信信创浏览器无法识别的问题。

要解决以上问题，可借助平台类型+浏览器名称的方式进行确认，例如

function isXCandQAX(){
	if (navigator.userAgent.indexOf("Linux") > -1 && navigator.userAgent.indexOf("Qaxbrowser") > -1) 
		return true; 
	else
		return false; 
}
1
2
3
4
5
6

2.3 User-Agent 详解

User-Agent 是 Http 协议中的一部分，属于头域的组成部分，User Agent也简称UA。用较为简单来说，UA 是一种向目标访问网站提供你所使用的浏览器类型、操作系统及版本、CPU 类型、浏览器渲染引擎、浏览器语言、浏览器插件等信息的标识。UA 字符串在每次浏览器 HTTP 请求时都会发送到服务器。

浏览器 UA 字串的标准格式为：
浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识 版本信息

例如，信创终端奇安信浏览器的User-Agent：

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36 UOS
1

• Mozilla/5.0 ：以前用于Netscape浏览器，目前大多数浏览器UA都会带有。
• X11; Linux x86_64：代表Linux系统。
• AppleWebKit/537.36：浏览器内核。
• KHTML：HTML排版引擎。
• like Gecko：这不是Geckeo 浏览器，但是运行起来像Geckeo浏览器。
• Chrome/93.0.4577.63：Chrome版本号。
• Safari/537.36：宣称自己是Safari。
• UOS: 统信桌面操作系统。

有关各字段的明细信息如下：
操作系统标识

FreeBSD

• X11; FreeBSD (version no.) i386

• X11; FreeBSD (version no.) AMD64

Linux

• X11; Linux ppc

• X11; Linux ppc64

• X11; Linux i686

• X11; Linux x86_64

Mac

• Macintosh; PPC Mac OS X

• Macintosh; Intel Mac OS X

Solaris

• X11; SunOS i86pc

• X11; SunOS sun4u

Windows

• Windows NT 6.1： 对应操作系统 windows 7

• Windows NT 6.0： 对应操作系统 windows vista

• Windows NT 5.2： 对应操作系统 windows 2003

• Windows NT 5.1： 对应操作系统 windows xp

• Windows NT 5.0 ： 对应操作系统 windows 2000

加密等级标识

• N: 表示无安全加密

• I: 表示弱安全加密

• U: 表示强安全加密

浏览器语言

在首选项 > 常规 > 语言中指定的语言

渲染引擎

浏览器 使用 Presto 渲染引擎，格式为： Presto/版本号

版本信息

显示 浏览器 真实版本信息，格式为： Version/版本号

首先，需要能够识别到当前系统用户所用操作系统类型。可应用如下方法实现：

// 浏览器名称
console.log(navigator.appCodeName);

// 次版本信息
console.log(navigator.appMinorVersion);

// 完整的浏览器名称
console.log(navigator.appName);

// 浏览器版本
console.log(navigator.appVersion);

// 浏览器编译版本
console.log(navigator.buildID);

// 是否启用cookie
console.log(navigator.cookieEnabled);

// 客户端计算机CPU类型
console.log(navigator.cpuClass);

// 浏览器是否启用java
console.log(navigator.javaEnabled());

// 浏览器主语言
console.log(navigator.language);

// 浏览器中注册的MIME类型数组
console.log(navigator.mimeTypes);

// 是否连接到网络
console.log(navigator.onLine);

// 客户端计算机操作系统或者CPU
console.log(navigator.oscpu);

// 浏览器所在的系统平台
console.log(navigator.platform);

// 浏览器中插件信息数组
console.log(navigator.plugins);

// 产品名称
console.log(navigator.product);

// 产品的次要信息
console.log(navigator.productSub);

// 操作系统的语言
console.log(navigator.systemLanguage);

// 浏览器的用户代理字符串
console.log(navigator. userAgent);

// 操作系统默认语言
console.log(navigator.userLanguage);

// 用户个人信息对象
console.log(navigator.userProfile);

// 浏览器品牌
console.log(navigator.vendor);

// 浏览器供应商次要信息
console.log(navigator.vendorSub);
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

三、拓展阅读

• 《Vue进阶（幺柒贰）：信创浏览器兼容性探讨》
• 《Vue进阶（幺柒零）项目部署后IE报 SCRIPT1002:语法错误 解决方案探讨》
• 《Vue进阶（六十八）：JS 判断当前浏览器是否为 IE》
• 《MDN Navigator - Web API 接口参考 | MDN》