fix(nextjs,backend): Support handshake in iframes (#3555)

This change makes requests that have the `Sec-Fetch-Dest` value set to `iframe` to be eligible for handshake.

Co-authored-by: Bryce Kalow <[email protected]>

.changeset/poor-knives-laugh.md

@@ -0,0 +1,6 @@
+---
+'@clerk/backend': patch
+'@clerk/nextjs': patch
+---
+
+Fixes a bug where Clerk's Handshake mechanism would not run when an application is rendered in an iframe.

packages/backend/src/tokens/request.ts

@@ -48,7 +48,8 @@ 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') {
+  // 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;
   }
 

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)