fix(editor): Prevent Safari users from accessing the frontend over in…

…secure contexts
n8n-io · Aug 22, 2024 · 321540b · 321540b
1 parent dc7dc99
commit 321540b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
@@ -44,6 +44,7 @@
     "@vueuse/components": "^10.11.0",
     "@vueuse/core": "^10.11.0",
     "axios": "catalog:",
+    "bowser": "2.11.0",
     "chart.js": "^4.4.0",
     "codemirror-lang-html-n8n": "^1.0.0",
     "dateformat": "^3.0.3",

diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
@@ -839,14 +839,14 @@ export const ROLE = {
 export const INSECURE_CONNECTION_WARNING = `
 <body style="margin-top: 20px; font-family: 'Open Sans', sans-serif; text-align: center;">
 <h1 style="font-size: 40px">&#x1F6AB;</h1>
-<h2>Your n8n server is configured to use a secure cookie, <br/>however you are visiting this via an insecure URL
+<h2>Your n8n server is configured to use a secure cookie, <br/>however you are either visiting this via an insecure URL, or using Safari.
 </h2>
 <br/>
 <div style="font-size: 18px; max-width: 640px; text-align: left; margin: 10px auto">
 	To fix this, please consider the following options:
 	<ul>
 		<li>Setup TLS/HTTPS (<strong>recommended</strong>), or</li>
-		<li>If you are running this locally, try using <a href="http://localhost:5678">localhost</a> instead</li>
+		<li>If you are running this locally, and not using Safari, try using <a href="http://localhost:5678">localhost</a> instead</li>
 		<li>If you prefer to disable this security feature (<strong>not recommended</strong>), set the environment variable <code>N8N_SECURE_COOKIE</code> to <code>false</code></li>
 	</ul>
 </div>

diff --git a/packages/editor-ui/src/stores/settings.store.ts b/packages/editor-ui/src/stores/settings.store.ts
@@ -1,3 +1,6 @@
+import { computed, ref } from 'vue';
+import Bowser from 'bowser';
+
 import * as publicApiApi from '@/api/api-keys';
 import * as ldapApi from '@/api/ldap';
 import * as settingsApi from '@/api/settings';
@@ -21,7 +24,6 @@ import { makeRestApiRequest } from '@/utils/apiUtils';
 import { useTitleChange } from '@/composables/useTitleChange';
 import { useToast } from '@/composables/useToast';
 import { i18n } from '@/plugins/i18n';
-import { computed, ref } from 'vue';
 
 export const useSettingsStore = defineStore(STORES.SETTINGS, () => {
 	const initialized = ref(false);
@@ -189,13 +191,15 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, () => {
 			useRootStore().setVersionCli(settings.value.versionCli);
 		}
 
-		if (
-			settings.value.authCookie.secure &&
-			location.protocol === 'http:' &&
-			!['localhost', '127.0.0.1'].includes(location.hostname)
-		) {
-			document.write(INSECURE_CONNECTION_WARNING);
-			return;
+		if (settings.value.authCookie.secure) {
+			const { browser } = Bowser.parse(navigator.userAgent);
+			if (
+				location.protocol === 'http:' &&
+				(!['localhost', '127.0.0.1'].includes(location.hostname) || browser.name === 'Safari')
+			) {
+				document.write(INSECURE_CONNECTION_WARNING);
+				return;
+			}
 		}
 
 		const isV1BannerDismissedPermanently = (settings.value.banners?.dismissed || []).includes('V1');

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml