V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
XIoYi
V2EX  ›  程序员

请教一个问题,网站是如何识别当前浏览器是 edge 而不是 chrome 的?

  •  
  •   XIoYi · 107 天前 · 4149 次点击
    这是一个创建于 107 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如题
    公司用的 OA ,绑定了 chrome 浏览器,使用其他浏览器是完全打不开的,只有 google chrome 能正常打开并使用,不然就会提示“无法访问”
    我以为是 UA 头,用浏览器插件 User-Agent Change 插件修改后还是不行,所以,请教下,这个是怎么实现的?一般有哪些实现方法?
    或者有没有什么文档文章什么的推荐下,我自己去看也行~
    34 条回复    2024-09-20 18:47:37 +08:00
    MRG0
        1
    MRG0  
       107 天前   ❤️ 2
    我猜测这个判断是前端写的,按照这个思路可以在浏览器搜索“前端如何判断浏览器”
    typedefine
        2
    typedefine  
       107 天前
    userAgent
    Mithril
        3
    Mithril  
       107 天前   ❤️ 1
    你可以搜 browser fingerprinting

    除了 UA ,也可以通过测试某些功能是否支持来区分判断浏览器。但我觉得一个 OA 可能用不到这么复杂的逻辑,很可能是找了某个开源库来做的。
    typedefine
        4
    typedefine  
       107 天前
    你要注意提交的包啊 , 不一定是在一个请求中确认的 用户画像能懂吗
    Puteulanus
        5
    Puteulanus  
       107 天前
    提示无法访问是怎么提示的,网页加载出来之后页面上提示(前端判断),一个请求返回了这个错误(后端判断),或者直接后端拒绝回复了,是浏览器的错误页面?

    如果是后端判断的,找到那个请求,复制为 curl 命令执行看看是否返回正常( TLS 指纹),如果正常的话用 edge 相同的请求,开始比较 HTTP 请求的 header 和 url 参数这些是不是一样

    前端判断的话可以用油猴提前注入它检测用到的 JS 函数来模拟 Chrome 的行为
    XIoYi
        6
    XIoYi  
    OP
       107 天前
    @typedefine 有道理,我抓个包看看
    XIoYi
        7
    XIoYi  
    OP
       107 天前
    @MRG0
    XIoYi
        8
    XIoYi  
    OP
       107 天前
    @Mithril
    XIoYi
        9
    XIoYi  
    OP
       107 天前
    @Puteulanus 我试试
    beyondstars
        10
    beyondstars  
       107 天前   ❤️ 1
    有可能是利用 Edge 和 Chrome 支持的 API 的差异来判断的,例如有一个 API 在 Edge 支持但是在 Chrome 不支持,或者在 Chrome 支持但是在 Edge 不支持,多利用几个这样的 API ,(利用贝叶斯原理)计算后验概率,可以以一个比较大的准确率判断浏览器的类型。
    cmsyh29
        11
    cmsyh29  
       107 天前
    ua
    beyondstars
        12
    beyondstars  
       107 天前   ❤️ 1
    下列举例使用贝叶斯方法,利用 API 可用性探测以及浏览器兼容性矩阵来计算用户当前使用特定浏览器的后验概率。

    例如考虑如下的浏览器兼容性矩阵:

    ```
    firefox chrome edge
    api1 y n y
    api2 y y n
    ```

    设随机变量 X 表示用户当前使用的浏览器。

    令 X=firefox, X=chrome, X=edge 的先验概率都为 1/3 。

    现假设观测到 api1 可用,则可得后验概率:

    Pr{api1 | X=firefox}
    = Pr{X=firefox | api1 } Pr{X=firefox} / Pr {api1}
    = Pr{X=firefox | api1 } Pr{X=firefox} / ( Pr{X=firefox}Pr{X=firefox|api1} + Pr{X=chrome}Pr{X=chrome|api1} + Pr{X=edge}Pr{X=edge|api1} )
    = (1 * (1/3)) / ((1/3 * 1) + (1/3 * 0) + (1/3 * 1))
    = 1/3 / 2/3
    = 1/2

    对先验概率进行更新:

    Pr{X=edge} -> 1/2

    同理可得,Pr{X=firefox} -> 1/2 ,Pr{X=chrome} -> 0 。

    现假设在这之后又观测到了 api2 不可用,那么

    Pr{^api2|X=edge}
    = Pr{X=edge|^api2}Pr{X=edge} / Pr{^api2}
    = Pr{X=edge|^api2}Pr{X=edge} / (Pr{X=firefox}Pr{X=firefox|^api2} + Pr{X=chrome}Pr{X=chrome|^api2} + Pr{X=edge}Pr{X=edge|^api2})
    = 1 * 1/2 / ( 1/2 * 0 + 0 * 0 + 1/2 * 1 )
    = 1

    由此可得,先后观测到 api1, ^api2 两个事件后,X=edge 的(后验)概率变为 1 。
    eoo
        13
    eoo  
       107 天前
    @beyondstars 这 AI 回答的真好
    beyondstars
        14
    beyondstars  
       107 天前   ❤️ 1
    @eoo 你幼儿园老师没教好你怎么礼貌说话吗?
    beyondstars
        15
    beyondstars  
       107 天前
    @eoo 看了你的主页,你这 v2 用的可真好,感觉像是工作和作业都交给 v2 网友来帮你做了,您可真聪明。
    billbob
        16
    billbob  
       107 天前
    这是什么项目,还分浏览器啊,这两个浏览器是一样的啊!当然无法区分
    DOLLOR
        17
    DOLLOR  
       107 天前
    @beyondstars
    edge 用的内核跟 chrome 一样,对 web 前端(而非 Extension 开发)来说,“Edge 支持但是在 Chrome 不支持,或者在 Chrome 支持但是在 Edge 不支持” 这样的 API 存在吗?
    Jinnrry
        18
    Jinnrry  
       107 天前   ❤️ 12
    @beyondstars #12 洋洋洒洒贴了一大堆,实则屁用没有。

    1 、但凡写过前端的,都知道可以拿 api 差异判断。
    2 、又不说那些 api 差异可以拿来判断,你写个贝叶斯公式搞毛啊。
    3 、这里不欢迎 AI 生成的评论,无脑贴 AI 评论会被 Ban
    ztc
        19
    ztc  
       107 天前   ❤️ 1
    window.navigator.userAgent, Edge 含 /Edg, Chrome 没有
    asdjgfr
        20
    asdjgfr  
       106 天前
    正规的浏览器都可以用 userAgent 来判断:

    ``` javascript
    const ua = window.navigator.userAgent.toLowerCase().replace(/\s\s+/g, ' ');
    const browserMatch = (/(edge)\/([\w.]+)/).exec(ua)
    || (/(edg)[/]([\w.]+)/).exec(ua)
    || (/(opr)[/]([\w.]+)/).exec(ua)
    || (/(opt)[/]([\w.]+)/).exec(ua)
    || (/(fxios)[/]([\w.]+)/).exec(ua)
    || (/(edgios)[/]([\w.]+)/).exec(ua)
    || (/(jsdom)[/]([\w.]+)/).exec(ua)
    || (/(samsungbrowser)[/]([\w.]+)/).exec(ua)
    || (/(electron)[/]([\w.]+)/).exec(ua)
    || (/(chrome)[/]([\w.]+)/).exec(ua)
    || (/(crios)[/]([\w.]+)/).exec(ua)
    || (/(opios)[/]([\w.]+)/).exec(ua)
    || (/(version)(applewebkit)[/]([\w.]+).*(safari)[/]([\w.]+)/).exec(ua)
    || (/(webkit)[/]([\w.]+).*(version)[/]([\w.]+).*(safari)[/]([\w.]+)/).exec(ua)
    || (/(applewebkit)[/]([\w.]+).*(safari)[/]([\w.]+)/).exec(ua)
    || (/(webkit)[/]([\w.]+)/).exec(ua)
    || (/(opera)(?:.*version|)[/]([\w.]+)/).exec(ua)
    || (/(msie) ([\w.]+)/).exec(ua)
    || (/(fennec)[/]([\w.]+)/).exec(ua)
    || (ua.indexOf('trident') >= 0 && (/(rv)(?::| )([\w.]+)/).exec(ua))
    || (ua.indexOf('compatible') < 0 && (/(mozilla)(?:.*? rv:([\w.]+)|)/).exec(ua))
    || [];
    ```

    不正规的比如某数字浏览器可以通过他们私有的 api 来判断
    GeekGao
        21
    GeekGao  
       106 天前
    给你个提示:Chrome 浏览器支持 Speech Recognition API ,Edge 不支持。
    xifangczy
        22
    xifangczy  
       106 天前
    有没有可能是插件有问题。。虽然求改了请求头。。但是没修改 js 的 window.navigator.userAgent
    kemchenj
        23
    kemchenj  
       106 天前
    通过 UA 就可以判断了 https://uaparser.dev
    Chuckle
        24
    Chuckle  
       106 天前
    window.chrome 这个对象,edge 和 chrome 的属性有差异,比如 edge 多了 edgeQuickSearch 等。前端针对性的区分还是很多的办法的,api 和对象多多少少都有差异。
    Chuckle
        25
    Chuckle  
       106 天前
    @Chuckle 还有 navigator.userAgentData.brands ,可以获取浏览器的信息
    fpk5
        26
    fpk5  
       106 天前 via iPhone
    用 API 差异有点不靠谱,哪天 edge 更新了抹平了差异了不是直接抓瞎?
    jiangzm
        27
    jiangzm  
       106 天前
    肯定是 UA 最方便,甚至包括操作系统和处理器的架构都是可以通过 UA 判断。
    用 API 差异判断功能还行,判断浏览器真的人才,不知道 API 支持是会变化的吗?
    特殊提供的 API 说不定哪个版本就没了, 不兼容的 API 说不定哪个版本就加上了。判断个屁啊!
    gentrydeng
        28
    gentrydeng  
       106 天前
    https://browserleaks.com/client-hints

    Google Chrome:

    Sec-CH-UA "Not)A;Brand";v="99", "Google Chrome";v="127", "Chromium";v="127"

    Microsoft Edge:

    Sec-CH-UA "Not)A;Brand";v="99", "Microsoft Edge";v="127", "Chromium";v="127"

    https://developer.chrome.google.cn/docs/privacy-security/user-agent-client-hints

    https://developer.mozilla.org/docs/Web/HTTP/Client_hints
    icaolei
        29
    icaolei  
       106 天前   ❤️ 1
    @beyondstars #15 人家夸你用 AI 用得好,你还在这阴阳怪气的。感觉你更像幼儿园的,心态上。
    siweipancc
        30
    siweipancc  
       106 天前 via iPhone
    ……害怕,我直接拿正则教程网站的套 useragent 没出过问题,你们玩这么花的吗
    gorvey
        31
    gorvey  
       106 天前
    @jiangzm 这个没毛病,API 如果不一致运行就有问题,所以才要判断。如果 API 变化支持了,通过了测试,那不就能正常运行了吗
    jiangzm
        32
    jiangzm  
       106 天前
    @gorvey #31 我不是说了用 API 判断功能可以,没必要用 API 判断浏览器。 你再看看标题?
    eoo
        33
    eoo  
       104 天前
    @beyondstars 你是不懂中文还是怎么滴? 我那句话不礼貌了? 我说“这 AI 回答得真好 ” 回答得真好 回答得真好 回答得真好 回幼儿园重新学中文吧你
    mumuy
        34
    mumuy  
       61 天前
    我开源过一个浏览器判断脚本,还挺好用的 https://passer-by.com/browser/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3653 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:37 · PVG 18:37 · LAX 02:37 · JFK 05:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.