Vue进阶（幺陆玖）信创终端适配改造_组件和插件怎么适应信创改造，双非本科字节跳动前端面试题分享

用户57923016702
140 阅读6分钟 

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

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


* 操作系统：**麒麟桌面操作系统**
* 处理器：**长城处理器**
* 浏览器：**奇安信可信浏览器专业版(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


**火狐**

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


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

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


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

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


#### 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...}


另外，在 `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; }


#### 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


* `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);

// 操作系统默认语言

TCP协议

  • TCP 和 UDP 的区别？
  • TCP 三次握手的过程？
  • 为什么是三次而不是两次、四次？
  • 三次握手过程中可以携带数据么？
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次？
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击？
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用？
  • TCP 的超时重传时间是如何计算的？
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认？
  • 如何理解 TCP 的 keep-alive？

浏览器篇

  • 浏览器缓存?
  • 说一说浏览器的本地存储？各自优劣如何？
  • 说一说从输入URL到页面呈现发生了什么？
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全？
  • 实现事件的防抖和节流？
  • 实现图片懒加载？

开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝