Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit a12c187

Browse files
t3chguyt3chguy
authored
Warn users on unsupported browsers before they lack features (#12830)
* Warn users on unsupported browsers before they lack features Signed-off-by: Michael Telatynski <[email protected]> * Update Learn more link Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Iterate Signed-off-by: Michael Telatynski <[email protected]> * Add comments Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]>
1 parent 96777f8 commit a12c187

File tree

10 files changed

+299
-19
lines changed

10 files changed

+299
-19
lines changed

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,9 @@
6969
"oidc-client-ts": "3.0.1",
7070
"jwt-decode": "4.0.0",
7171
"@floating-ui/react": "0.26.11",
72-
"@radix-ui/react-id": "1.1.0"
72+
"@radix-ui/react-id": "1.1.0",
73+
"caniuse-lite": "1.0.30001643",
74+
"electron-to-chromium": "1.5.2"
7375
},
7476
"dependencies": {
7577
"@babel/runtime": "^7.12.5",
@@ -88,12 +90,14 @@
8890
"await-lock": "^2.1.0",
8991
"bloom-filters": "^3.0.1",
9092
"blurhash": "^2.0.3",
93+
"browserslist": "^4.23.2",
9194
"classnames": "^2.2.6",
9295
"commonmark": "^0.31.0",
9396
"counterpart": "^0.18.6",
9497
"css-tree": "^2.3.1",
9598
"diff-dom": "^5.0.0",
9699
"diff-match-patch": "^1.0.5",
100+
"electron-to-chromium": "^1.5.2",
97101
"emojibase-regex": "15.3.2",
98102
"escape-html": "^1.0.3",
99103
"file-saver": "^2.0.5",

‎src/@types/electron-to-chromium.d.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
Copyright 2024 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
declare module "electron-to-chromium/versions" {
18+
const versionMap: {
19+
[electronVersion: string]: string;
20+
};
21+
export default versionMap;
22+
}

‎src/Lifecycle.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ import {
8383
tryDecryptToken,
8484
} from "./utils/tokens/tokens";
8585
import { TokenRefresher } from "./utils/oidc/TokenRefresher";
86+
import { checkBrowserSupport } from "./SupportedBrowser";
8687

8788
const HOMESERVER_URL_KEY = "mx_hs_url";
8889
const ID_SERVER_URL_KEY = "mx_is_url";
@@ -1001,6 +1002,7 @@ async function startMatrixClient(
10011002
IntegrationManagers.sharedInstance().startWatching();
10021003
ActiveWidgetStore.instance.start();
10031004
LegacyCallHandler.instance.start();
1005+
checkBrowserSupport();
10041006

10051007
// Start Mjolnir even though we haven't checked the feature flag yet. Starting
10061008
// the thing just wastes CPU cycles, but should result in no actual functionality

‎src/SupportedBrowser.ts‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
Copyright 2024 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { logger } from "matrix-js-sdk/src/logger";
18+
import browserlist from "browserslist";
19+
import electronToChromium from "electron-to-chromium/versions";
20+
21+
import { DeviceType, parseUserAgent } from "./utils/device/parseUserAgent";
22+
import ToastStore from "./stores/ToastStore";
23+
import GenericToast from "./components/views/toasts/GenericToast";
24+
import { _t } from "./languageHandler";
25+
import SdkConfig from "./SdkConfig";
26+
27+
export const LOCAL_STORAGE_KEY = "mx_accepts_unsupported_browser";
28+
const TOAST_KEY = "unsupportedbrowser";
29+
30+
const SUPPORTED_DEVICE_TYPES = [DeviceType.Web, DeviceType.Desktop];
31+
const SUPPORTED_BROWSER_QUERY =
32+
"last 2 Chrome versions, last 2 Firefox versions, last 2 Safari versions, last 2 Edge versions";
33+
const LEARN_MORE_URL = "https://github.com/element-hq/element-web#supported-environments";
34+
35+
function onLearnMoreClick(): void {
36+
onDismissClick();
37+
window.open(LEARN_MORE_URL, "_blank", "noopener,noreferrer");
38+
}
39+
40+
function onDismissClick(): void {
41+
localStorage.setItem(LOCAL_STORAGE_KEY, String(true));
42+
ToastStore.sharedInstance().dismissToast(TOAST_KEY);
43+
}
44+
45+
function getBrowserNameVersion(browser: string): [name: string, version: number] {
46+
const [browserName, browserVersion] = browser.split(" ");
47+
const browserNameLc = browserName.toLowerCase();
48+
if (browserNameLc === "electron") {
49+
// The electron-to-chromium map is keyed by the major and minor version of Electron
50+
const chromiumVersion = electronToChromium[browserVersion.split(".").slice(0, 2).join(".")];
51+
if (chromiumVersion) {
52+
return ["chrome", parseInt(chromiumVersion, 10)];
53+
}
54+
}
55+
56+
return [browserNameLc, parseInt(browserVersion, 10)];
57+
}
58+
59+
/**
60+
* Function to check if the current browser is considered supported by our support policy.
61+
* Based on user agent parsing so may be inaccurate if the user has fingerprint prevention turned up to 11.
62+
*/
63+
export function getBrowserSupport(): boolean {
64+
const browsers = browserlist(SUPPORTED_BROWSER_QUERY).sort();
65+
const minimumBrowserVersions = new Map<string, number>();
66+
for (const browser of browsers) {
67+
const [browserName, browserVersion] = getBrowserNameVersion(browser);
68+
// We sorted the browsers so will encounter the minimum version first
69+
if (minimumBrowserVersions.has(browserName)) continue;
70+
minimumBrowserVersions.set(browserName, browserVersion);
71+
}
72+
73+
const details = parseUserAgent(navigator.userAgent);
74+
75+
let supported = true;
76+
if (!SUPPORTED_DEVICE_TYPES.includes(details.deviceType)) {
77+
logger.warn("Browser unsupported, unsupported device type", details.deviceType);
78+
supported = false;
79+
}
80+
81+
if (details.client) {
82+
const [browserName, browserVersion] = getBrowserNameVersion(details.client);
83+
const minimumVersion = minimumBrowserVersions.get(browserName);
84+
// Check both with the sub-version cut off and without as some browsers have less granular versioning e.g. Safari
85+
if (!minimumVersion || browserVersion < minimumVersion) {
86+
logger.warn("Browser unsupported, unsupported user agent", details.client);
87+
supported = false;
88+
}
89+
} else {
90+
logger.warn("Browser unsupported, unknown client", navigator.userAgent);
91+
supported = false;
92+
}
93+
94+
return supported;
95+
}
96+
97+
/**
98+
* Shows a user warning toast if the user's browser is not supported.
99+
*/
100+
export function checkBrowserSupport(): void {
101+
const supported = getBrowserSupport();
102+
if (supported) return;
103+
104+
if (localStorage.getItem(LOCAL_STORAGE_KEY)) {
105+
logger.warn("Browser unsupported, but user has previously accepted");
106+
return;
107+
}
108+
109+
const brand = SdkConfig.get().brand;
110+
ToastStore.sharedInstance().addOrReplaceToast({
111+
key: TOAST_KEY,
112+
title: _t("unsupported_browser|title", { brand }),
113+
props: {
114+
description: _t("unsupported_browser|description", { brand }),
115+
acceptLabel: _t("action|learn_more"),
116+
onAccept: onLearnMoreClick,
117+
rejectLabel: _t("action|dismiss"),
118+
onReject: onDismissClick,
119+
},
120+
component: GenericToast,
121+
priority: 40,
122+
});
123+
}

‎src/components/views/dialogs/BugReportDialog.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import DialogButtons from "../elements/DialogButtons";
3232
import { sendSentryReport } from "../../../sentry";
3333
import defaultDispatcher from "../../../dispatcher/dispatcher";
3434
import { Action } from "../../../dispatcher/actions";
35+
import { getBrowserSupport } from "../../../SupportedBrowser";
3536

3637
interface IProps {
3738
onFinished: (success: boolean) => void;
@@ -206,7 +207,10 @@ export default class BugReportDialog extends React.Component<IProps, IState> {
206207
}
207208

208209
let warning: JSX.Element | undefined;
209-
if (window.Modernizr && Object.values(window.Modernizr).some((support) => support === false)) {
210+
if (
211+
(window.Modernizr && Object.values(window.Modernizr).some((support) => support === false)) ||
212+
!getBrowserSupport()
213+
) {
210214
warning = (
211215
<p>
212216
<b>{_t("bug_reporting|unsupported_browser")}</b>

‎src/i18n/strings/en_EN.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3694,6 +3694,10 @@
36943694
"truncated_list_n_more": {
36953695
"other": "And %(count)s more..."
36963696
},
3697+
"unsupported_browser": {
3698+
"description": "If you continue, some features may stop working and there is a risk that you may lose data in the future. Update your browser to continue using %(brand)s.",
3699+
"title": "%(brand)s does not support this browser"
3700+
},
36973701
"unsupported_server_description": "This server is using an older version of Matrix. Upgrade to Matrix %(version)s to use %(brand)s without errors.",
36983702
"unsupported_server_title": "Your server is unsupported",
36993703
"update": {

‎src/utils/device/parseUserAgent.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,15 @@ const getDeviceType = (
4242
browser: UAParser.IBrowser,
4343
operatingSystem: UAParser.IOS,
4444
): DeviceType => {
45+
if (device.type === "mobile" || operatingSystem.name?.includes("Android") || userAgent.indexOf(IOS_KEYWORD) > -1) {
46+
return DeviceType.Mobile;
47+
}
4548
if (browser.name === "Electron") {
4649
return DeviceType.Desktop;
4750
}
4851
if (!!browser.name) {
4952
return DeviceType.Web;
5053
}
51-
if (device.type === "mobile" || operatingSystem.name?.includes("Android") || userAgent.indexOf(IOS_KEYWORD) > -1) {
52-
return DeviceType.Mobile;
53-
}
5454
return DeviceType.Unknown;
5555
};
5656

‎test/SupportedBrowser-test.ts‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/*
2+
Copyright 2024 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import { logger } from "matrix-js-sdk/src/logger";
18+
19+
import { checkBrowserSupport, LOCAL_STORAGE_KEY } from "../src/SupportedBrowser";
20+
import ToastStore from "../src/stores/ToastStore";
21+
import GenericToast from "../src/components/views/toasts/GenericToast";
22+
23+
jest.mock("matrix-js-sdk/src/logger");
24+
25+
describe("SupportedBrowser", () => {
26+
beforeEach(() => {
27+
jest.resetAllMocks();
28+
localStorage.clear();
29+
});
30+
31+
const testUserAgentFactory =
32+
(expectedWarning?: string) =>
33+
async (userAgent: string): Promise<void> => {
34+
const toastSpy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
35+
const warnLogSpy = jest.spyOn(logger, "warn");
36+
Object.defineProperty(window, "navigator", { value: { userAgent: userAgent }, writable: true });
37+
checkBrowserSupport();
38+
if (expectedWarning) {
39+
expect(warnLogSpy).toHaveBeenCalledWith(expectedWarning, expect.any(String));
40+
expect(toastSpy).toHaveBeenCalled();
41+
} else {
42+
expect(warnLogSpy).not.toHaveBeenCalled();
43+
expect(toastSpy).not.toHaveBeenCalled();
44+
}
45+
};
46+
47+
it.each([
48+
// Safari on iOS
49+
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1",
50+
// Firefox on iOS
51+
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/128.0 Mobile/15E148 Safari/605.1.15",
52+
// Opera on Samsung
53+
"Mozilla/5.0 (Linux; Android 10; SM-G970F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.6533.64 Mobile Safari/537.36 OPR/76.2.4027.73374",
54+
])("should warn for mobile browsers", testUserAgentFactory("Browser unsupported, unsupported device type"));
55+
56+
it.each([
57+
// Chrome on Chrome OS
58+
"Mozilla/5.0 (X11; CrOS x86_64 15633.69.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.212 Safari/537.36",
59+
// Opera on Windows
60+
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 OPR/113.0.0.0",
61+
// Vivaldi on Linux
62+
"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Vivaldi/6.8.3381.48",
63+
// IE11 on Windows 10
64+
"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko",
65+
// Firefox 115 on macOS
66+
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_4_5; rv:115.0) Gecko/20000101 Firefox/115.0",
67+
])(
68+
"should warn for unsupported desktop browsers",
69+
testUserAgentFactory("Browser unsupported, unsupported user agent"),
70+
);
71+
72+
it.each([
73+
// Safari 17.5 on macOS Sonoma
74+
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15",
75+
// Firefox 127 on macOS Sonoma
76+
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:127.0) Gecko/20100101 Firefox/127.0",
77+
// Edge 126 on Windows
78+
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/126.0.2592.113",
79+
// Edge 126 on macOS
80+
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/126.0.2592.113",
81+
// Firefox 128 on Windows
82+
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:128.0) Gecko/20100101 Firefox/128.0",
83+
// Firefox 128 on Linux
84+
"Mozilla/5.0 (X11; Fedora; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0",
85+
// Chrome 127 on Windows
86+
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36",
87+
])("should not warn for supported browsers", testUserAgentFactory());
88+
89+
it.each([
90+
// Element Nightly on macOS
91+
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) ElementNightly/2024072501 Chrome/126.0.6478.127 Electron/31.2.1 Safari/537.36",
92+
])("should not warn for Element Desktop", testUserAgentFactory());
93+
94+
it.each(["AppleTV11,1/11.1"])(
95+
"should handle unknown user agent sanely",
96+
testUserAgentFactory("Browser unsupported, unknown client"),
97+
);
98+
99+
it("should not warn for unsupported browser if user accepted already", async () => {
100+
const toastSpy = jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
101+
const warnLogSpy = jest.spyOn(logger, "warn");
102+
const userAgent =
103+
"Mozilla/5.0 (X11; CrOS x86_64 15633.69.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.6045.212 Safari/537.36";
104+
Object.defineProperty(window, "navigator", { value: { userAgent: userAgent }, writable: true });
105+
106+
checkBrowserSupport();
107+
expect(warnLogSpy).toHaveBeenCalledWith("Browser unsupported, unsupported user agent", expect.any(String));
108+
expect(toastSpy).toHaveBeenCalledWith(
109+
expect.objectContaining({
110+
component: GenericToast,
111+
title: "Element does not support this browser",
112+
}),
113+
);
114+
115+
localStorage.setItem(LOCAL_STORAGE_KEY, String(true));
116+
toastSpy.mockClear();
117+
warnLogSpy.mockClear();
118+
119+
checkBrowserSupport();
120+
expect(warnLogSpy).toHaveBeenCalledWith("Browser unsupported, but user has previously accepted");
121+
expect(toastSpy).not.toHaveBeenCalled();
122+
});
123+
});

0 commit comments

Comments
 (0)