科普 •

User-Agent 完全指南：浏览器身份识别的秘密

深入了解 User-Agent 字符串的结构、历史演变、实际应用场景，以及如何解析和使用 User-Agent 信息。

当你访问一个网站时，浏览器会悄悄地向服务器发送一段神秘的字符串，告诉服务器”我是谁”。这段字符串就是 User-Agent（用户代理），它是 Web 世界中最重要但也最容易被忽视的技术之一。

本指南将带你深入了解 User-Agent 的方方面面，从基本概念到实际应用。

什么是 User-Agent？

User-Agent（简称 UA）是 HTTP 请求头中的一个字段，用于标识发起请求的客户端软件。它包含了关于浏览器、操作系统、设备类型等信息。

典型的 User-Agent 示例

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

这个字符串看起来很复杂，但它实际上包含了丰富的信息：

  • 操作系统：Windows 10（NT 10.0）
  • 架构：64位（Win64; x64）
  • 浏览器引擎：WebKit/Blink（AppleWebKit/537.36）
  • 浏览器：Chrome 120
  • 兼容性标识：Mozilla/5.0、Safari/537.36

User-Agent 的历史演变

User-Agent 字符串的复杂性源于浏览器战争的历史遗留问题。

1. 最初的简单时代

早期的浏览器 User-Agent 非常简单：

NCSA_Mosaic/2.0 (Windows 3.1)

2. Netscape 的崛起

Netscape Navigator 出现后，为了表明自己兼容 Mosaic，添加了 “Mozilla” 前缀：

Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)

3. 浏览器伪装

为了获得更好的网站兼容性，浏览器开始互相伪装：

  • IE 伪装成 Mozilla
  • Chrome 伪装成 Safari
  • Safari 伪装成 KHTML
  • 所有现代浏览器都声称自己是 “Mozilla/5.0”

这导致了今天我们看到的冗长而混乱的 User-Agent 字符串。

User-Agent 的结构解析

让我们详细分析一个现代浏览器的 User-Agent：

Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1

组成部分：

  1. Mozilla/5.0：历史遗留的兼容性标识
  2. (iPhone; CPU iPhone OS 16_0 like Mac OS X)：设备和操作系统信息
  3. AppleWebKit/605.1.15：渲染引擎及版本
  4. (KHTML, like Gecko)：引擎兼容性声明
  5. Version/16.0：Safari 版本号
  6. Mobile/15E148：移动版本标识
  7. Safari/604.1：浏览器标识

User-Agent 的实际应用

1. 内容适配

网站可以根据 User-Agent 提供不同的内容：

  • 移动端适配：检测移动设备，返回移动版页面
  • 浏览器兼容：为旧版浏览器提供降级方案
  • 应用下载：根据操作系统推荐对应的 App 下载

2. 统计分析

通过分析 User-Agent，可以了解：

  • 访客使用的浏览器分布
  • 操作系统占比
  • 移动端与桌面端的访问比例
  • 特定浏览器版本的使用情况

3. 安全防护

  • 爬虫识别：检测和过滤恶意爬虫
  • 异常检测：识别可疑的访问模式
  • 访问控制：限制特定客户端的访问

4. 功能检测

虽然不推荐，但有时需要根据 User-Agent 判断浏览器是否支持某些特性。

常见浏览器的 User-Agent

Chrome（Windows）

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Firefox（Windows）

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Safari（macOS）

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

Edge（Windows）

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

移动端 Chrome（Android）

Mozilla/5.0 (Linux; Android 13; Pixel 7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

移动端 Safari（iOS）

Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1

在代码中获取和解析 User-Agent

JavaScript（浏览器端）

// 获取当前浏览器的 User-Agent
const userAgent = navigator.userAgent;
console.log(userAgent);

// 简单的设备检测
const isMobile = /Mobile|Android|iPhone/i.test(userAgent);
const isChrome = /Chrome/i.test(userAgent);
const isFirefox = /Firefox/i.test(userAgent);

Node.js（服务器端）

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    const userAgent = req.headers['user-agent'];
    console.log('User-Agent:', userAgent);
    res.send('Hello!');
});

Python（Flask）

from flask import Flask, request

app = Flask(__name__)

@app.route('/')
def index():
    user_agent = request.headers.get('User-Agent')
    print(f'User-Agent: {user_agent}')
    return 'Hello!'

PHP

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
echo "User-Agent: " . $userAgent;
?>

User-Agent 解析库

手动解析 User-Agent 字符串很复杂，建议使用专业的解析库：

JavaScript

  • ua-parser-js：功能强大的 UA 解析库
  • bowser：轻量级浏览器检测库
import UAParser from 'ua-parser-js';

const parser = new UAParser();
const result = parser.getResult();

console.log(result.browser.name);    // "Chrome"
console.log(result.browser.version); // "120.0.0.0"
console.log(result.os.name);         // "Windows"
console.log(result.device.type);     // "mobile" 或 undefined

Python

  • user-agents：Python 的 UA 解析库
  • ua-parser：跨语言的 UA 解析方案
from user_agents import parse

ua_string = 'Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X)...'
user_agent = parse(ua_string)

print(user_agent.browser.family)  # "Mobile Safari"
print(user_agent.os.family)       # "iOS"
print(user_agent.is_mobile)       # True

User-Agent 的未来：Client Hints

由于 User-Agent 字符串越来越臃肿，且存在隐私问题，浏览器厂商正在推动新的标准：User-Agent Client Hints（UA-CH）。

传统方式的问题

  • 字符串过长，浪费带宽
  • 包含过多信息，可能被用于指纹追踪
  • 难以解析和维护

Client Hints 的优势

  • 按需获取：服务器只请求需要的信息
  • 隐私保护：减少默认暴露的信息
  • 结构化数据：使用独立的 HTTP 头，易于解析

Client Hints 示例

Sec-CH-UA: "Chromium";v="120", "Google Chrome";v="120"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "Windows"

服务器可以通过 Accept-CH 头请求更详细的信息：

Accept-CH: Sec-CH-UA-Full-Version, Sec-CH-UA-Platform-Version

最佳实践

1. 优先使用特性检测

不要依赖 User-Agent 来判断浏览器功能，使用特性检测：

// ❌ 不推荐
if (userAgent.includes('Chrome')) {
    // 使用某个特性
}

// ✅ 推荐
if ('serviceWorker' in navigator) {
    // 使用 Service Worker
}

2. 服务器端使用专业库

不要自己编写正则表达式解析 User-Agent，使用成熟的解析库。

3. 考虑隐私问题

不要过度收集和存储 User-Agent 信息，遵守隐私法规。

4. 准备迁移到 Client Hints

关注 User-Agent Client Hints 的发展，逐步迁移。

实用工具

想要快速分析 User-Agent 字符串？我们提供了一个方便的在线工具： 👉 User-Agent 分析工具

该工具可以帮你：

  • 解析任意 User-Agent 字符串
  • 识别浏览器、操作系统、设备类型
  • 查看详细的版本信息
  • 测试不同的 User-Agent

结语

User-Agent 虽然看起来只是一串简单的字符串，但它承载着 Web 发展的历史，也是现代 Web 应用不可或缺的一部分。理解 User-Agent 的工作原理和最佳实践，能帮助你构建更好的 Web 应用。

随着 User-Agent Client Hints 的推广，未来的 User-Agent 将变得更加简洁和注重隐私。作为开发者，我们应该拥抱这些变化，构建更加现代化的 Web 应用。

相关文章