说说 JavaScript 对用户代理的检测技术（附完整源代码）

最新推荐文章于 2024-08-12 16:23:29 发布
最新推荐文章于 2024-08-12 16:23:29 发布
阅读量2.8k 收藏 3
点赞数 2
分类专栏： JavaScript 文章标签： javascript 源代码 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deniro_li/article/details/70228708
版权

用户代理检测指的是，检测用户代理字符串来确定用户实际使用的浏览器。在服务端，用户代理检测是一种常见且广为让人接受的方式；但是，在客户端，用户代理检测是一种万不得已才使用的方法，它经常被放在能力检测和怪癖检测之后。可以通过 navigator.userAgent 得到用户代理字符串。

用户代理经常跟电子欺骗联系在一起，因为浏览器会在自己的用户代理字符串中加入一些错误或者误导性的信息，来欺骗服务器。

1 用户代理字符串检测技术

一般情况下，直到呈现引擎和最低限度的版本就可以决定是否可以使用某些操作方法了。

if (isIE6 || isIE7){
    //不推荐
}

上面的代码很脆弱，因为如果 IE 有了新版本，就必须更新代码。建议使用相对版本号作为条件判断：

if (isVer >=6){
    //代码
}

1.1 识别呈现引擎

目前有这五种主要的呈现引擎：IE、Gecko、Webkit、KHTML、Opera。

为了不在全局作用域中添加多余的变量，我们使用模块增强模式来封装检测脚本，基础结构如下：

var client = function () {
        var engine = {
            //呈现引擎
            ie: 0,
            gecko: 0,
            webkit: 0,
            khtml: 0,
            opera: 0,
            //具体版本号
            ver: null
        };

         return {
            engine: engine
        };
    }

匿名函数内部定义了一个局部变量 engine，它是一个包含默认设置的对象字面量。如果检测到当前的浏览器的呈现引擎类型，就以浮点数值的格式将引擎的版本号写入相应的属性（大于 0）。引擎的完整版本号（字符串）写入 ver 属性。这样设计后，可以像这样写条件判断语句：

if (client.engine.ie){
    //针对 IE
} else if (client.engine.gecko > 1.5){
    if (client.engine.gecko.ver == "1.8.1"){
        //针对这一版本执行某些操作
    }
}

检测顺序很重要，因此第一步是识别 Opera，因为它可能完全模仿其他浏览器：

if (window.opera) {//opera 引擎
    engine.ver = window.opera.version();//opera 7.6 及更高
    engine.opera = parseFloat(engine.ver);
}

第二步检测 WebKit，它有一个独一无二的 “AppleWebKit”：

else if (/AppleWebKit\/(\S+)/.test(ua)) {//webkit 引擎
    engine.ver = RegExp["$1"];//使用捕获组获得版本号
    engine.webkit = parseFloat(engine.ver);
}

第三步检测 KHTML，，它也有一个独一无二的 “Gecko”，早期的版本有一个 “Konqueror”：

else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {//khtml 引擎
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

派出了 Webkit 和 KHTML 之后，就可以准确地检测出 Gecko，它的版本号出现在字符串“rv:”的后面：

else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {//gecko 引擎
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

最后是检测 IE：

else if (/MSIE ([^;]+)/.test(ua)) {//ie 引擎
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}

这里正则表达式中的取反符号，是为了取得不是分号的所有字符。

1.2 识别浏览器

为 client 对象添加了新属性：

var client = function () {
...

var browser = {
            //浏览器
            ie: 0,
            firefox: 0,
            safari: 0,
            konq: 0,
            opera: 0,
            chrome: 0,

            //具体版本号
            ver: null
        };
...

 return {
        engine: engine,
        browser:browser
    };
}

由于大多数浏览器与其呈现引擎密切相关，所以下面的检测浏览器的代码与检测呈现引擎的代码是混合在一起的：

//检测呈现引擎、平台和设备
var ua = navigator.userAgent;//用户代理字符串

if (window.opera) {//opera 引擎
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
} else if (/AppleWebKit\/(\S+)/.test(ua)) {//webkit 引擎
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);

    //先区分 Chrome 与 Safari
    if (/Chrome\/(\S+)/.test(ua)) {
        browser.ver = RegExp["$1"];
        browser.chrome = parseFloat(browser.ver);
    } else if (/Version\/(\S+)/.test(ua)) {
        browser.ver = RegExp["$1"];
        browser.safari = parseFloat(browser.ver);
    } else {
        //近似地确定版本号
        var safariVersion = 1;
        if (engine.webkit < 100) {
            safariVersion = 1;
        } else if (engine.webkit < 312) {
            safariVersion = 1.2;
        } else if (engine.webkit < 412) {
            safariVersion = 1.3;
        } else {
            safariVersion = 2;
        }
        browser.safari = browser.ver = safariVersion;
    }
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {//khtml 引擎
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);

} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {//gecko 引擎
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);

    if (/Firefox\/(\S+)/.test(ua)) {//是 Firefox
        browser.ver = RegExp["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
} else if (/MSIE ([^;]+)/.test(ua)) {//ie 引擎
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
}

可以这样使用上面设计的代码：

if (client.engine.webkit){//WebKit 引擎
    if (client.browser.chrome){
        //Chrome
    } else if (client.browser.safari){
        //Safari
    }
} else if (client.engine.gecko){
    if (client.browser.firefox){
        //Firefox
    }else {
        //其他以 gecko 为呈现引擎的浏览器
    }
}

1.3 识别平台

为 client 对象添加了新属性：

var client = function () {
...

    //平台
    var system = {
        win: false,
        mac: false,
        x11: false,

    };
...

 return {
        engine: engine,
        browser:browser,
        system: system
    };
}

这样检测平台：

//识别平台
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p.indexOf("X11") == 0) || (p.indexOf("Linux") == 0);

1.4 识别 Windows 操作系统

由于不同的浏览器在不同的 Windows 操作系统中返回的字符串不一样，所以需要复杂一些的正则表达式：

if (system.win) {
    if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
        if (RegExp["$1"] == "NT") {
            switch (RegExp["$2"]) {
                case "5.0":
                    system.win = "2000";
                    break;
                case "5.1":
                    system.win = "XP";
                    break;
                case "6.0":
                    system.win = "Vista";
                    break;
                case "6.1":
                    system.win = "7";
                    break;
                default :
                    system.win = "NT";
                    break;
            }
        }
    } else if (RegExp["$1"] == "9x") {
        system.win = "ME";
    } else {
        system.win = RegExp["$1"];
    }
}

这样使用：

if (client.system.win){
    if (client.system.win == "XP"){
        //XP
    }else if (client.system.win == "7"){
        //win7
    }
}

1.5 识别移动设备

为 system 对象添加新属性：

var client = function () {
...

    //平台
    var system = {
        ...

        //移动设备
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false
    };
...

 return {
        engine: engine,
        browser:browser,
        system: system
    };
}

这样检测：

//识别移动设备
system.iphone = ua.indexOf("iPhone") > -1;
system.ipod = ua.indexOf("iPod") > -1;
system.ipad = ua.indexOf("iPad") > -1;

iOS 复杂些：

//检测 iOS 版本
if (system.mac && ua.indexOf("Mobile") > -1) {
    if (/CPU(?:iPhone)?OS (\d+_\d+)/.test(ua)) {
        system.ios = parseFloat(RegExp.$1.replace("_", "."));
    } else {
        system.ios = 2;//检测不出，所以猜测是更早的版本，比较稳妥
    }
}

检测 Android 版本：

//检测 Android 版本
if (/Android (\d+\.\d+)/.test(ua)) {
    system.android = parseFloat(RegExp.$1);
}

检测诺基亚 N 系列手机：

//检测诺基亚 N 系列手机
system.nokiaN = ua.indexOf("NokiaN") > -1;

然后这样使用：

if (client.engine.webkit){
    if (client.system, iOS){
        //iOS
    }else if (client.system.android){
        //Android
    }
}

最后是 Windows Mobile（Windows CE），：

if (system.win == "CE") {//Windows Mobile 5.0 以及之前版本
    system.winMobile = system.win;
} else if (system.win == "Ph") {//Windows Mobile 5.0 以后版本
    if (/Windows Phone OS (\d+.\d+)/.test(ua)) {
        system.win = "Phone";
        system.winMobile = parseFloat(RegExp["$1"]);
    }
}

1.6 识别游戏系统

为 system 对象添加新属性：

var client = function () {
...

    //平台
    var system = {
        ...

        //游戏系统
        wii: false,
        ps: false
    };
...

 return {
        engine: engine,
        browser:browser,
        system: system
    };
}

这样检测：

//识别游戏系统
system.wii = ua.indexOf("Wii") > -1;
system.ps = /playstation/i.test(ua);

2 完整代码

var client = function () {
    //呈现引擎
    var engine = {
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
        //具体版本号
        ver: null
    };

    //浏览器
    var browser = {
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,

        //具体版本号
        ver: null
    };

    //平台
    var system = {
        win: false,
        mac: false,
        x11: false,

        //移动设备
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,

        //游戏系统
        wii: false,
        ps: false
    };


    //检测呈现引擎、平台和设备
    var ua = navigator.userAgent;//用户代理字符串

    if (window.opera) {//opera 引擎
        engine.ver = browser.ver = window.opera.version();
        engine.opera = browser.opera = parseFloat(engine.ver);
    } else if (/AppleWebKit\/(\S+)/.test(ua)) {//webkit 引擎
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);

        //先区分 Chrome 与 Safari
        if (/Chrome\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)) {
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //近似地确定版本号
            var safariVersion = 1;
            if (engine.webkit < 100) {
                safariVersion = 1;
            } else if (engine.webkit < 312) {
                safariVersion = 1.2;
            } else if (engine.webkit < 412) {
                safariVersion = 1.3;
            } else {
                safariVersion = 2;
            }
            browser.safari = browser.ver = safariVersion;
        }
    } else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {//khtml 引擎
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);

    } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {//gecko 引擎
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);

        if (/Firefox\/(\S+)/.test(ua)) {//是 Firefox
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }
    } else if (/MSIE ([^;]+)/.test(ua)) {//ie 引擎
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
    }

    //识别平台
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p.indexOf("X11") == 0) || (p.indexOf("Linux") == 0);

    //识别 Windows 操作系统
    console.log("ua:" + ua);
    if (system.win) {
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
            if (RegExp["$1"] == "NT") {
                switch (RegExp["$2"]) {
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default :
                        system.win = "NT";
                        break;
                }
            }
        } else if (RegExp["$1"] == "9x") {
            system.win = "ME";
        } else {
            system.win = RegExp["$1"];
        }
    }

    //识别移动设备
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;

    //检测 iOS 版本
    if (system.mac && ua.indexOf("Mobile") > -1) {
        if (/CPU(?:iPhone)?OS (\d+_\d+)/.test(ua)) {
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;//检测不出，所以猜测是更早的版本，比较稳妥
        }
    }

    //检测 Android 版本
    if (/Android (\d+\.\d+)/.test(ua)) {
        system.android = parseFloat(RegExp.$1);
    }

    //检测诺基亚 N 系列手机
    system.nokiaN = ua.indexOf("NokiaN") > -1;

    //windows mobile
    if (system.win == "CE") {
        system.winMobile = system.win;
    } else if (system.win == "Ph") {
        if (/Windows Phone OS (\d+.\d+)/.test(ua)) {
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }

    //识别游戏系统
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);

    return {
        engine: engine,
        browser: browser,
        system: system
    };
}();

3 使用方法

应该优先使用能力检测和怪癖检测，用户代理检测方法尽量只用作最后检测的手段。它一般适用于以下情形：

  • 不能直接准确地使用能力检测和怪癖检测。
  • 同一种浏览器在不同平台下具有不同的能力。
  • 为了跟踪分析等目的需要知道确切的浏览器类型。
Deniro Lee
关注
专栏目录
BAT 大厂Java 面试题集锦之核心篇附参考答案
程序员光剑
11-05 1万+
核心篇数据结构与算法网路:TCP/IP,HTTP操作系统, 文件, shell, CPU, IO, epoll, 非阻塞IO,进程/线程/协程,锁HashMap, Co...
JavaScript:用户代理检测源代码
yivisir的博客
07-18 262
原生JavaScript用户代理检测 代码直接po上，方便有需要者使用 var client = function(){ var engine = { ie : 0, gecko : 0, webkit : 0, khtml : 0, opera : 0, ver : null }; // 平台检测 /* 按顺序检测：opera,webkit,khtml,gec
javascript 的 代理检测（源自js高级程序设计）
低调的冲击波
01-18 291
var client = function(){ //呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, ...
如何在线检测代理IP存活，让你的爬虫畅行无阻
最新发布
IPIPGO的博客
08-12 1047
通过在线检测代理IP的存活状态，你可以确保代理IP池的高效性和稳定性，从而提高网络爬虫的成功率。希望这篇文章能对你有所帮助，让你在爬虫的世界里游刃有余。如果你有任何问题或建议，欢迎在评论区留言，我们一起交流学习！t=N7T8。
js 获取是否网络代理
记事本
07-01 2403
如何禁止代理IP访问网站，当时第一个想到的就是使用PHP呗（个人比较喜欢的语言之一） 但是他的站点是HTML的，哎呀！HTML的那怎么运行PHP呢，不过他的服务器有PHP环境哦。 好吧，既然是HTML的吧，那JS应该可以的吧，但是JS获取用户IP的接口没有一个是靠谱的；那就用PHP了，下面就不罗嗦了，直接代码走起来！ 利用AJAX功能来实现目的吧！直接代码上起来 isIp.JS window....
JavaScript 用户代理检测（浏览器类型检测，运行平台检测等） 规范代码
Delay_coder的博客
11-03 638
客户端检测 客户端检测很直观地分为： 能力检测，怪癖检测和用户代理检测 能力检测是检验所运行的平台是否支持指定的函数，代码或者功能。建议需要才检测的原则，可将所需要的功能进行统一检测到初始化中，这样可以实现能力检测的统一管理。 怪癖检测是检验所运行的平台或者引擎是否有指定的bug，该方法主要是为了避免浏览器的某些知名的BUG，但是一般开发者不会遇到。 用户代理检测是检验JavaScript的运行代码的呈现引擎，浏览器等等而实现的方法，主要用于实现多平台多功能。 用户代理检测规范代码 本规范代码参考自Ni
js判断客户端是否启用了代理_为何要对生产环境的 Node.js 使用反向代理？
weixin_39607240的博客
12-23 430
推荐阅读：玩转JAVA筑基之Netty、并发编程与设计模式，打好基础备战春招秋招面试总结：Java+并发+Spring+MySQL+分布式+Redis+算法+JVM等阿里技术官总结这20 多个高并发编程必备的知识点，你都会吗？都是“Redis惹的祸”，害我差点挂在美团三面，真是“虚惊一场”早在 2012 年，PHP 和 Ruby on Rails 仍是统治渲染 web 应用的服务器端技术。但是，一...
javascript面试题大全_Js基础面试题（附答案）
m0_64460287的博客
02-21 2243
因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
JavaScript最全面试题
qq_60976312的博客
06-10 1492
JavaScript最全面试题
大佬告诉你JavaScript面试题大全之基础面试题（附答案）
weixin_54556126的博客
08-03 2616
介绍JavaScript的数据类型 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二的值）。 引用数据类型：对象(Object)、数组(Array)、函数(Function)。 注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。 基本数据类型与引用类型在存储上有什么区别? 1.存储位置不同: 基本数据类型：以栈的形式存储, 保存与赋值指向数据本身, 用typ.
说说那些经典的web前端面试题-JavaScript部分
web前端学习
05-17 450
JavaScript中如何检测一个变量是一个String类型？请写出函数实现 typeof(obj) === "string" typeof obj === "string" obj.constructor === String 请用js去除字符串空格？ 方法一：使用replace正则匹配的方法 去除所有空格: str = str.replace(/\s*/g,""); 去除两头...
min-ua:迷你Javascript用户代理检测库
04-27
最小ua 迷你Javascript用户代理检测库 安装 npm i min-ua 受到启发 从获取原始用户代理字符串 支持IE6 + 浏览器名称 IE 边缘 Chrome合金 火狐浏览器 苹果浏览器 例子 var UA = require ( 'min-ua' ) var userAgent = UA . detect ( navigator . userAgent ) console . log ( userAgent ) // => {browserName: 'IE', browserVersion: 8} 执照
javascript 恶意代码检测
05-06
一篇关于网页中恶意JavaScript代码的检测，供恶意网页检测 恶意代码检测的研究，论文名是“Detecting Malicious JavaScript Code in Mozilla”
JavaScript安全的类型检测
海阔山遥，未知何处是潇湘。
05-14 1368
在JavaScript中，内置的类型检测机制并非是完全可靠的。这里分别指的typeof和instanceof关键字。         由于typeof有一些无法预知的行为，经常会导致检测数据类型时得到不靠谱的结果，Safari在对正则表达式应用typeof时会返回“function”，在chrome下回返回“object”。         instanceof存在过个全局作用域的情况下（指的
JS逆向之补环境的代理
weixin_40055163的博客
05-20 567
【代码】JS逆向之补环境的代理。
抓取代理IP遇到的javascript解析问题
cncomkyle
03-23 1382
1. 问题描述： 利用脚本去自动从下面的这个网站抓取一些proxy ip： [http://www.samair.ru/proxy/ip-address-01.htm] [http://www.samair.ru/proxy/ip-address-02.htm] [http://www.samair.ru/proxy/ip-address-03.htm] ... [http://w...
js判断客户端是否启用了代理_nginScript 系列：使用 nginScript 将客户端重定向到新服务器...
weixin_39819327的博客
12-23 432
nginScript 的一个关键优势在于它提供了读取和设置 NGINX 配置变量的能力。变量可以用于自定义路由规则。也就是说，我们可以使用 JavaScript 来实现复杂的功能，这些功能可以直接对请求的处理产生影响。将客户端重定向到新的应用服务器在这篇文章里，我们将介绍如何使用 nginScript 来实现优雅的服务器间切换。我们不打算进行“一次性”的切换，而是定义了一个时间窗口，客户端在事件窗...
深入理解JS逆向代理与环境监测
朴拙科技的博客
07-07 826
通过本文的探讨，我们了解到了JS代理的强大功能以及如何使用它来监测和增强JS运行环境。同时，我们也学习了如何通过原型链检测来提高代码的安全性。这些技术不仅能够帮助开发者更好地理解和控制JS代码的行为，还能够在开发过程中提供更多的灵活性和安全性。
检测ip代理有效性
weixin_30384031的博客
07-08 1713
转载及总结 转载：https://xw.qq.com/amphtml/20190428A05ZS200 转载： 1.telnet 方法 经过测试，会看到存在以下问题： 即使一些代理商能够用telnet测试过关，可以现实还是不能用的。 2.通过访问http://icanhazip.com/返回的ip来实现测试 注：假如返回的是代理池的ip，表明代理有效，否则实际代理是无...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值