browserslist/browserslist-useragent-regexp

Safari is not detected properly

marteadrian-digando opened this issue · 14 comments

marteadrian-digando commented

Hi,

Safari is not detected properly under some circumstances.
The reason is the following patched regex:
https://github.com/browserslist/browserslist-useragent-regexp/blob/master/src/useragentRegexp/workarounds.ts#L75

Steps to reproduce:

  1. Use following .browserlistrc
Safari >= 12.1
  1. Run CLI command
echo "$(browserslist-useragent-regexp --allowHigherVersions)"

This will result in the following Regex:

/(Version\/(12\.1|12\.([2-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})\.\d+|13\.0|13\.([1-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)/

Now, Safari on an iPad gives a UserAgent similar to this: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6,2 Safari/605.1.15

  1. Test the UA with the generated regex:

What was the idea behind patching of Safari regex? For us, it only works, when we remove this code.

jerone commented

The reason for the failing regex is the , comma in the version part Version/15.6,2.
Are you sure this is a valid useragent string?

marteadrian-digando commented

The reason for the failing regex is the , comma in the version part Version/15.6,2. Are you sure this is a valid useragent string?

Not sure if it is valid, but iPads give us this userAgent. I have it from our server logs.

rclarey commented

+1 for this issue

I am able to reproduce the same useragent string using Safari 15.6 on an iPad running iOS 15.7

marteadrian-digando commented

Workaround which we are using for now when generating regexp. This will revert the workaround made by this package.
Use with caution as this will for sure cause other issue which the author of this package wanted to fix with the regex-patch linked in initial issue description:

browserslist-useragent-regexp --allowHigherVersions | sed -e 's/ Safari/.*Safari/g'
Zyxer22 commented

We're also seeing this issue from ipad 15.7 users. Seems to be a valid user agent - we have several hundred hits from it a day. You can find it on user agent aggregator sites like whatismybrowser as well. Our current workaround is to check for this specific version
navigator.userAgent.contains('Version/15.6,2 Safari')

marcospulido commented

@dangreen I have the following userAgent returning from a 7th Gen iPad with Safari 15.6 running:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6,2 Mobile/15E148 Safari/604.1
You can view the complete stats here:

The iPad adds Mobile/15E148 between browser version and term Safari.

You can see the regex here: https://regex101.com/r/AhqzFW/1

I'm using the v4.0.0-beta.0.

marcospulido commented

I manually added the optional group ( Mobile\/\w{5,6})? in the Safari part of the regex to temporarily fix detection.
This is the full part:
(Version\/(14\.1|14\.([2-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+)([.,]\d+|)( Mobile\/\w{5,6})? Safari\/)

I don't know if this can help at all.

dangreen commented

@marcospulido fixed in ua-regexes-lite@1.1.2. Reinstall browserslist-useragent-regexp to trigger ua-regexes-lite update, or just install it as dev dependency.

  • 👍1
Zyxer22 commented

Thanks, we ran both updates and it seems to be working for us

philbates35 commented

@dangreen I'm not sure if this is entirely the same issue, but I'm getting unexpected version matching with Safari, I think due to it using the iOS version instead of the Safari version (in most cases they're very similar, but not always).

To reproduce, using ^4.0.0-beta.0 and ua-regexes-lite@1.1.2:

.browserslistrc:

ios_saf 12.2-12.5 # i.e. ios_saf 12.0 and ios_saf 12.1 are not supported
ios_saf 11.0-11.2

package.json:

    "scripts": {
        "postinstall": "echo \"export const supportedBrowsers = $(browserslist-useragent-regexp --allowHigherVersions);\" > src/supportedBrowsers.ts",

src/supportedBrowsers.ts:

export const supportedBrowsers =
    /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS|CPU iPad OS)[ +]+(11[_.]0|11[_.]([1-9]|\d{2,})|11[_.]2|11[_.]([3-9]|\d{2,})|(1[2-9]|[2-9]\d|\d{3,})[_.]\d+|12[_.]5|12[_.]([6-9]|\d{2,})|(1[3-9]|[2-9]\d|\d{3,})[_.]\d+)([_.]\d+|))/;

Then when I visit my site on iOS 12.1.4, Safari 12.0 (using Browserstack), it results in this user agent:

Mozilla/5.0 (iPhone; CPU iPhone OS 12_1_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Safari/604.1

Expectation: It shouldn't match the regex because I'm using Safari 12.0 and browserslist config says i only support "12.2-12.5" in the 12.x version
Actual: It does match, as seen in the screenshot:

image

I believe it should be matching on the Version/12.0 part of the string which is the Safari version, not the iPhone OS 12_1_4 part of the string which is the OS version.

You can test here https://regex101.com/r/TXuuDj/1

dangreen commented

@philbates35 Hi. In this case you shouldn't use allowHigherVersions option.

philbates35 commented

Thanks @dangreen that did indeed fix my issue.

Although I will say that I was confused because assumed that the ios_saf query is supposed to relate to the Safari version, not the iOS version - but I'm working with ios_saf 12.2-12.5 and wiki shows that there was only ever a 12.0 and 12.1 version of the iOS Safari browser. There was however a version 12.5 of iOS... so it looks like ios_saf browser query actually refers to the iOS version. I think this means if you want to query on the actual underlying Safari version on iOS it isn't actually possible, unless there's a way I'm not aware of.

I figured I'd post this here in case it helps anyone else, and apologies for derailing the conversation.