From 1ec5424b3b9d26da070bcac6cf65523b4caddba8 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Wed, 12 Jun 2024 11:19:26 +0300 Subject: [PATCH 1/4] fix(nextjs,backend): Support handshake in iframes --- .changeset/poor-knives-laugh.md | 6 ++++++ packages/backend/src/tokens/request.ts | 2 +- packages/nextjs/src/server/protect.ts | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/poor-knives-laugh.md diff --git a/.changeset/poor-knives-laugh.md b/.changeset/poor-knives-laugh.md new file mode 100644 index 00000000000..455b4d33026 --- /dev/null +++ b/.changeset/poor-knives-laugh.md @@ -0,0 +1,6 @@ +--- +'@clerk/backend': minor +'@clerk/nextjs': minor +--- + +Support handshake in iframes diff --git a/packages/backend/src/tokens/request.ts b/packages/backend/src/tokens/request.ts index 9248e2c887f..b44f5eb7a48 100644 --- a/packages/backend/src/tokens/request.ts +++ b/packages/backend/src/tokens/request.ts @@ -48,7 +48,7 @@ function isRequestEligibleForHandshake(authenticateContext: { secFetchDest?: str const { accept, secFetchDest } = authenticateContext; // NOTE: we could also check sec-fetch-mode === navigate here, but according to the spec, sec-fetch-dest: document should indicate that the request is the data of a user navigation. - if (secFetchDest === 'document') { + if (secFetchDest === 'document' || secFetchDest === 'iframe') { return true; } diff --git a/packages/nextjs/src/server/protect.ts b/packages/nextjs/src/server/protect.ts index f2d957e7463..9499cca42da 100644 --- a/packages/nextjs/src/server/protect.ts +++ b/packages/nextjs/src/server/protect.ts @@ -121,6 +121,7 @@ const isServerActionRequest = (req: Request) => { const isPageRequest = (req: Request): boolean => { return ( req.headers.get(constants.Headers.SecFetchDest) === 'document' || + req.headers.get(constants.Headers.SecFetchDest) === 'iframe' || req.headers.get(constants.Headers.Accept)?.includes('text/html') || isAppRouterInternalNavigation(req) || isPagesRouterInternalNavigation(req) From a46259fb0c47a6c2ebed8c0372bd2800c5be3c8b Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Thu, 13 Jun 2024 20:19:45 +0300 Subject: [PATCH 2/4] Update poor-knives-laugh.md --- .changeset/poor-knives-laugh.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/poor-knives-laugh.md b/.changeset/poor-knives-laugh.md index 455b4d33026..6839b3fca98 100644 --- a/.changeset/poor-knives-laugh.md +++ b/.changeset/poor-knives-laugh.md @@ -1,6 +1,6 @@ --- -'@clerk/backend': minor -'@clerk/nextjs': minor +'@clerk/backend': patch +'@clerk/nextjs': patch --- Support handshake in iframes From 148bf15393a927e8a90b25b903f00f271ff9a898 Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Thu, 20 Jun 2024 12:15:53 +0300 Subject: [PATCH 3/4] Update .changeset/poor-knives-laugh.md Co-authored-by: Bryce Kalow --- .changeset/poor-knives-laugh.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/poor-knives-laugh.md b/.changeset/poor-knives-laugh.md index 6839b3fca98..14f5344b761 100644 --- a/.changeset/poor-knives-laugh.md +++ b/.changeset/poor-knives-laugh.md @@ -3,4 +3,4 @@ '@clerk/nextjs': patch --- -Support handshake in iframes +Fixes a bug where Clerk's Handshake mechanism would not run when an application is rendered in an iframe. From 203414f02276b68076c5e4bab41ba31192195ddb Mon Sep 17 00:00:00 2001 From: Stefanos Anagnostou Date: Thu, 11 Jul 2024 19:13:05 +0300 Subject: [PATCH 4/4] Add comment for sec-fetch-dest iframe value --- packages/backend/src/tokens/request.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/backend/src/tokens/request.ts b/packages/backend/src/tokens/request.ts index b44f5eb7a48..d9f91531b31 100644 --- a/packages/backend/src/tokens/request.ts +++ b/packages/backend/src/tokens/request.ts @@ -48,6 +48,7 @@ function isRequestEligibleForHandshake(authenticateContext: { secFetchDest?: str const { accept, secFetchDest } = authenticateContext; // NOTE: we could also check sec-fetch-mode === navigate here, but according to the spec, sec-fetch-dest: document should indicate that the request is the data of a user navigation. + // Also, we check for 'iframe' because it's the value set when a doc request is made by an iframe. if (secFetchDest === 'document' || secFetchDest === 'iframe') { return true; }