JavaScript中的Navigator.prototype.userAgent

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/04/30/JavaScript%E4%B8%AD%E7%9A%84Navigator-prototype-userAgent/

摘要

本文主要讲述了：

作用
如何修改 userAgent 的值
采集 userAgent 的注意事项

正文

作用

Navigator.prototype.userAgent作为Navigator.prototype的getter属性，被所有Navigator的实例继承。返回用户代理字符串

示例：

1	Object.getOwnPropertyDescriptor(Navigator.prototype, 'userAgent');

示例：

1 2	// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36" console.log(navigator.userAgent);

如何修改 userAgent 的值

由于 userAgent 是getter属性，因此 userAgent 的值无法被赋值运算符=修改。

示例：

1
2
3

console.log(navigator.userAgent);
navigator.userAgent = 123;
console.log(navigator.userAgent);

但是这并不意味着 userAgent 的值无法被修改。

示例：

Object.defineProperty(Navigator.prototype, 'userAgent', {
  get() {
    return 'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1';
  },
});

采集 userAgent 的注意事项

User-Agent 请求头的值不一定等于navigator.userAgent
即使使用navigator.userAgent来采集 userAgent，360 旗下的浏览器只会向特定的域名（例如：https://www.360.cn）暴露自己真正的 userAgent，QIHU 360SE或QIHU 360EE，平时都会伪装成 Chrome 的 userAgent

示例：

http://localhost/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <textarea name="ua"></textarea>
      <button>Submit</button>
    </form>
    <script>
      document.querySelector('textarea').value = navigator.userAgent;
    </script>
  </body>
</html>