fix(clerk-js): Set localhost SameSite=None cookies as Secure

.changeset/plenty-pandas-leave.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Set the localhost cookies with the Secure attribute

packages/clerk-js/src/core/auth/__tests__/getSecureAttribute.test.ts

@@ -0,0 +1,94 @@
+import { getSecureAttribute } from '../getSecureAttribute';
+
+describe('getSecureAttribute', () => {
+  let windowSpy: any;
+
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get');
+  });
+
+  afterEach(() => {
+    windowSpy.mockRestore();
+  });
+
+  it('returns true if the protocol is https', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('https://www.clerk.com'),
+      safari: undefined,
+      isSecureContext: undefined,
+    }));
+    expect(getSecureAttribute('None')).toBe(true);
+  });
+
+  it('returns false if the protocol is not https and the SameSite is not None', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://www.clerk.com'),
+      safari: undefined,
+      isSecureContext: undefined,
+    }));
+    expect(getSecureAttribute('Lax')).toBe(false);
+  });
+
+  it('returns false if the protocol is not https and the browser is Safari', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://www.clerk.com'),
+      safari: { dummyValue: true },
+      isSecureContext: undefined,
+    }));
+    expect(getSecureAttribute('None')).toBe(false);
+  });
+
+  it('returns true if isSecureContext is true', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://www.clerk.com'),
+      safari: undefined,
+      isSecureContext: true,
+    }));
+    expect(getSecureAttribute('None')).toBe(true);
+  });
+
+  it('returns false if isSecureContext is false', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://www.clerk.com'),
+      safari: undefined,
+      isSecureContext: false,
+    }));
+    expect(getSecureAttribute('None')).toBe(false);
+  });
+
+  it('returns true if the protocol is http and the hostname is localhost and sameSite is None', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://localhost'),
+      safari: undefined,
+      isSecureContext: undefined,
+    }));
+    expect(getSecureAttribute('None')).toBe(true);
+  });
+
+  it('returns false if the protocol is http and the hostname is localhost and sameSite is not None', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://localhost'),
+      safari: undefined,
+      isSecureContext: undefined,
+    }));
+    expect(getSecureAttribute('Lax')).toBe(false);
+  });
+
+  it('returns false if the protocol is http and the hostname is not localhost', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://www.clerk.com'),
+      safari: undefined,
+      isSecureContext: undefined,
+    }));
+    expect(getSecureAttribute('None')).toBe(false);
+  });
+
+  it('returns false in case window.safari is undefined and isSecureContext is true on localhost for Lax cookie', () => {
+    windowSpy.mockImplementation(() => ({
+      location: new URL('http://localhost'),
+      safari: undefined,
+      isSecureContext: true,
+    }));
+    expect(getSecureAttribute('Lax')).toBe(false);
+  });
+});

packages/clerk-js/src/core/auth/cookies/clientUat.ts

@@ -4,6 +4,7 @@ import type { ClientResource } from '@clerk/types';
 
 import { inCrossOriginIframe } from '../../../utils';
 import { getCookieDomain } from '../getCookieDomain';
+import { getSecureAttribute } from '../getSecureAttribute';
 
 const CLIENT_UAT_COOKIE_NAME = '__client_uat';
 
@@ -28,7 +29,7 @@ export const createClientUatCookie = (): ClientUatCookieHandler => {
   const set = (client: ClientResource | undefined) => {
     const expires = addYears(Date.now(), 1);
     const sameSite = inCrossOriginIframe() ? 'None' : 'Strict';
-    const secure = window.location.protocol === 'https:';
+    const secure = getSecureAttribute(sameSite);
     const domain = getCookieDomain();
 
     // '0' indicates the user is signed out

packages/clerk-js/src/core/auth/cookies/devBrowser.ts

@@ -3,6 +3,7 @@ import { addYears } from '@clerk/shared/date';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 
 import { inCrossOriginIframe } from '../../../utils';
+import { getSecureAttribute } from '../getSecureAttribute';
 
 export type DevBrowserCookieHandler = {
   set: (jwt: string) => void;
@@ -24,7 +25,7 @@ export const createDevBrowserCookie = (): DevBrowserCookieHandler => {
   const set = (jwt: string) => {
     const expires = addYears(Date.now(), 1);
     const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
-    const secure = window.location.protocol === 'https:';
+    const secure = getSecureAttribute(sameSite);
 
     return devBrowserCookie.set(jwt, {
       expires,

packages/clerk-js/src/core/auth/cookies/session.ts

@@ -2,6 +2,7 @@ import { createCookieHandler } from '@clerk/shared/cookie';
 import { addYears } from '@clerk/shared/date';
 
 import { inCrossOriginIframe } from '../../../utils';
+import { getSecureAttribute } from '../getSecureAttribute';
 
 const SESSION_COOKIE_NAME = '__session';
 
@@ -23,7 +24,7 @@ export const createSessionCookie = (): SessionCookieHandler => {
   const set = (token: string) => {
     const expires = addYears(Date.now(), 1);
     const sameSite = inCrossOriginIframe() ? 'None' : 'Lax';
-    const secure = window.location.protocol === 'https:';
+    const secure = getSecureAttribute(sameSite);
 
     return sessionCookie.set(token, {
       expires,

packages/clerk-js/src/core/auth/getSecureAttribute.ts

@@ -0,0 +1,30 @@
+type SameSiteAttributeType = 'None' | 'Lax' | 'Strict';
+
+// The Secure attribute is required for SameSite=None on Chrome and Firefox
+// Also, localhost is considered secure for testing purposes by Chrome and Firefox
+// Safari does not support the Secure attribute on localhost, although it returns true for isSecureContext
+// ref: https://bugs.webkit.org/show_bug.cgi?id=232088#c8
+export const getSecureAttribute = (sameSite: SameSiteAttributeType): boolean => {
+  if (window.location.protocol === 'https:') {
+    return true;
+  }
+
+  // If the cookie is not SameSite=None, then the Secure attribute is not required
+  if (sameSite !== 'None') {
+    return false;
+  }
+
+  // This is because Safari does not support the Secure attribute on localhost
+  if (typeof (window as any).safari !== 'undefined') {
+    return false;
+  }
+
+  // This is a useful way to check if the current context is secure
+  // This is needed for example in environments like Firefox Remote Control
+  // where the `localhost` is not considered secure
+  if (typeof window.isSecureContext !== 'undefined') {
+    return window.isSecureContext;
+  }
+
+  return window.location.hostname === 'localhost';
+};

packages/clerk-js/src/utils/runtime.ts

@@ -10,14 +10,9 @@ export function usesHttps() {
   return inBrowser() && window.location.protocol === 'https:';
 }
 
-function isCypress() {
-  return typeof window !== 'undefined' && typeof (window as any).Cypress !== 'undefined';
-}
-
 export function inIframe() {
   // checks if the current window is an iframe
-  // excludes the case where the current window runs in a Cypress test
-  return inBrowser() && window.self !== window.top && !isCypress();
+  return inBrowser() && window.self !== window.top;
 }
 
 export function inCrossOriginIframe() {