fix(clerk-js): Only set the __session cookie as none for secure ifr…

…ames (clerk#1403)

* fix(clerk-js): Only set the __session cookie as `none` for secure iframes

This change allows e2e suites running on cypress to work without additional setup.

* Create metal-dolphins-act.md

.changeset/metal-dolphins-act.md

@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Set the `__session` cookie with `samesite:none` for secure iframes only

packages/clerk-js/src/utils/cookies/handler.ts

@@ -1,7 +1,7 @@
 import { addYears } from '@clerk/shared';
 import type { ClientResource } from '@clerk/types';
 
-import { inCrossOriginIframe } from '../../utils';
+import { inSecureCrossOriginIframe } from '../../utils';
 import { getAllETLDs } from '../url';
 import { clientCookie } from './client';
 import { clientUatCookie } from './client_uat';
@@ -22,16 +22,17 @@ export const createCookieHandler = () => {
   const setDevBrowserInittedCookie = () =>
     inittedCookie.set('1', {
       expires: addYears(Date.now(), 1),
-      sameSite: inCrossOriginIframe() ? IFRAME_SAME_SITE : DEFAULT_SAME_SITE,
+      sameSite: inSecureCrossOriginIframe() ? IFRAME_SAME_SITE : DEFAULT_SAME_SITE,
+      secure: inSecureCrossOriginIframe() ? true : undefined,
       path: COOKIE_PATH,
     });
 
   const removeSessionCookie = () => sessionCookie.remove();
 
   const setSessionCookie = (token: string) => {
     const expires = addYears(Date.now(), 1);
-    const sameSite = inCrossOriginIframe() ? IFRAME_SAME_SITE : DEFAULT_SAME_SITE;
-    const secure = window.location.protocol === 'https:';
+    const sameSite = inSecureCrossOriginIframe() ? IFRAME_SAME_SITE : DEFAULT_SAME_SITE;
+    const secure = inSecureCrossOriginIframe() || window.location.protocol === 'https:';
 
     return sessionCookie.set(token, {
       expires,

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

@@ -6,6 +6,10 @@ export function inActiveBrowserTab() {
   return inBrowser() && globalThis.document.hasFocus();
 }
 
+export function usesHttps() {
+  return inBrowser() && window.location.protocol === 'https:';
+}
+
 export function inIframe() {
   return inBrowser() && window.self !== window.top;
 }
@@ -15,3 +19,7 @@ export function inCrossOriginIframe() {
   // frameElement: if the document into which it's embedded has a different origin, the value is null instead.
   return inIframe() && !window.frameElement;
 }
+
+export function inSecureCrossOriginIframe() {
+  return inCrossOriginIframe() && usesHttps();
+}