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

anagstef · 2024-06-12T08:20:37Z

Description

Adds support for handshake inside iframes.

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

Checklist

npm test runs as expected.
npm run build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

changeset-bot · 2024-06-12T08:20:41Z

🦋 Changeset detected

Latest commit: 203414f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

Name	Type
@clerk/backend	Patch
@clerk/nextjs	Patch
@clerk/astro	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/remix	Patch
@clerk/clerk-sdk-node	Patch
@clerk/tanstack-start	Patch
@clerk/testing	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

anagstef · 2024-06-12T08:20:49Z

!snapshot

clerk-cookie · 2024-06-12T08:24:43Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/backend	1.3.0-snapshot.v1ec5424
@clerk/chrome-extension	1.0.18-snapshot.v1ec5424
@clerk/clerk-js	5.7.0-snapshot.v1ec5424
@clerk/elements	0.7.0-snapshot.v1ec5424
@clerk/clerk-expo	1.2.1-snapshot.v1ec5424
@clerk/express	0.0.12-snapshot.v1ec5424
@clerk/fastify	1.0.14-snapshot.v1ec5424
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/nextjs	5.2.0-snapshot.v1ec5424
@clerk/clerk-react	5.2.4-snapshot.v1ec5424
@clerk/remix	4.1.1-snapshot.v1ec5424
@clerk/clerk-sdk-node	5.0.11-snapshot.v1ec5424
@clerk/shared	2.3.0-snapshot.v1ec5424
@clerk/tanstack-start	0.1.1-snapshot.v1ec5424
@clerk/testing	1.1.7-snapshot.v1ec5424
@clerk/ui	0.1.1-snapshot.v1ec5424

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/elements

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

gatsby-plugin-clerk

npm i [email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/clerk-react

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/shared

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

@clerk/ui

npm i @clerk/[email protected] --save-exact

anagstef · 2024-06-13T17:19:27Z

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') {


ℹ️ When document requests happend from inside an iframe the Sec-Fetch-Dest value is set to iframe. Fetch/XHR requests do not use this value.

I propose exporting a SAFE_SEC_FETCH_DESTS array from shared and then consuming it in backend and nextjs, and just checking SAFE_SEC_FETCH_DESTS.includes(secFetchDest)

panteliselef · 2024-06-14T10:41:52Z

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') {


I propose exporting a SAFE_SEC_FETCH_DESTS array from shared and then consuming it in backend and nextjs, and just checking SAFE_SEC_FETCH_DESTS.includes(secFetchDest)

.changeset/poor-knives-laugh.md

dimkl · 2024-06-19T13:35:50Z

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' ||


❓ why do we need this as part of this PR? Is this related to the handshake mechanism?

I believe we need this in order for pages wrapped with protect work properly in the first load via an iframe

It's not a handshake particular thing, but as @panteliselef said, it will help with protect and iframes.

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

anagstef · 2024-06-20T09:16:22Z

!snapshot

anagstef · 2024-07-10T14:34:32Z

!snapshot

clerk-cookie · 2024-07-10T14:38:32Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	0.0.2-snapshot.v27f3f6b
@clerk/backend	1.3.1-snapshot.v27f3f6b
@clerk/chrome-extension	1.1.3-snapshot.v27f3f6b
@clerk/clerk-js	5.8.1-snapshot.v27f3f6b
@clerk/clerk-expo	1.2.6-snapshot.v27f3f6b
@clerk/express	0.0.16-snapshot.v27f3f6b
@clerk/fastify	1.0.18-snapshot.v27f3f6b
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/nextjs	5.2.3-snapshot.v27f3f6b
@clerk/remix	4.2.2-snapshot.v27f3f6b
@clerk/clerk-sdk-node	5.0.15-snapshot.v27f3f6b
@clerk/tanstack-start	0.1.6-snapshot.v27f3f6b
@clerk/testing	1.1.10-snapshot.v27f3f6b

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

gatsby-plugin-clerk

npm i [email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

anagstef · 2024-07-10T16:04:01Z

!snapshot

clerk-cookie · 2024-07-10T16:09:09Z

Hey @anagstef - the snapshot version command generated the following package versions:

Package	Version
@clerk/astro	0.0.2-snapshot.v88c02de
@clerk/backend	1.3.1-snapshot.v88c02de
@clerk/chrome-extension	1.1.3-snapshot.v88c02de
@clerk/clerk-js	5.8.1-snapshot.v88c02de
@clerk/clerk-expo	1.2.6-snapshot.v88c02de
@clerk/express	0.0.16-snapshot.v88c02de
@clerk/fastify	1.0.18-snapshot.v88c02de
gatsby-plugin-clerk	5.0.0-beta.45
@clerk/nextjs	5.2.3-snapshot.v88c02de
@clerk/remix	4.2.2-snapshot.v88c02de
@clerk/clerk-sdk-node	5.0.15-snapshot.v88c02de
@clerk/tanstack-start	0.1.6-snapshot.v88c02de
@clerk/testing	1.1.10-snapshot.v88c02de

Tip: Use the snippet copy button below to quickly install the required packages.
@clerk/astro

npm i @clerk/[email protected] --save-exact

@clerk/backend

npm i @clerk/[email protected] --save-exact

@clerk/chrome-extension

npm i @clerk/[email protected] --save-exact

@clerk/clerk-js

npm i @clerk/[email protected] --save-exact

@clerk/clerk-expo

npm i @clerk/[email protected] --save-exact

@clerk/express

npm i @clerk/[email protected] --save-exact

@clerk/fastify

npm i @clerk/[email protected] --save-exact

gatsby-plugin-clerk

npm i [email protected] --save-exact

@clerk/nextjs

npm i @clerk/[email protected] --save-exact

@clerk/remix

npm i @clerk/[email protected] --save-exact

@clerk/clerk-sdk-node

npm i @clerk/[email protected] --save-exact

@clerk/tanstack-start

npm i @clerk/[email protected] --save-exact

@clerk/testing

npm i @clerk/[email protected] --save-exact

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]>

fix(nextjs,backend): Support handshake in iframes

1ec5424

anagstef self-assigned this Jun 12, 2024

clerk-cookie added nextjs backend labels Jun 12, 2024

anagstef commented Jun 13, 2024

View reviewed changes

anagstef added 2 commits June 13, 2024 20:19

Update poor-knives-laugh.md

a46259f

Merge branch 'main' into stefanos/fix-iframe-handshake

e157ad8

anagstef marked this pull request as ready for review June 13, 2024 17:28

anagstef requested review from BRKalow, nikosdouvlis and dimkl June 13, 2024 17:28

panteliselef approved these changes Jun 14, 2024

View reviewed changes

Merge branch 'main' into stefanos/fix-iframe-handshake

ba8e13e

LauraBeatris approved these changes Jun 17, 2024

View reviewed changes

BRKalow approved these changes Jun 17, 2024

View reviewed changes

.changeset/poor-knives-laugh.md Outdated Show resolved Hide resolved

dimkl approved these changes Jun 19, 2024

View reviewed changes

anagstef and others added 2 commits June 20, 2024 12:15

Update .changeset/poor-knives-laugh.md

148bf15

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

Merge branch 'main' into stefanos/fix-iframe-handshake

c96e9ea

anagstef added 2 commits June 20, 2024 15:03

Merge branch 'main' into stefanos/fix-iframe-handshake

e04603b

Merge branch 'main' into stefanos/fix-iframe-handshake

27f3f6b

Merge branch 'main' into stefanos/fix-iframe-handshake

88c02de

Merge branch 'main' into stefanos/fix-iframe-handshake

a73c9b9

Add comment for sec-fetch-dest iframe value

203414f

octoper approved these changes Jul 11, 2024

View reviewed changes

anagstef enabled auto-merge (squash) July 11, 2024 16:16

anagstef merged commit 5642b26 into main Jul 11, 2024
16 checks passed

anagstef deleted the stefanos/fix-iframe-handshake branch July 11, 2024 16:28

clerk-cookie mentioned this pull request Jul 11, 2024

ci(repo): Version packages #3668

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

anagstef commented Jun 12, 2024 •

edited

Loading

changeset-bot bot commented Jun 12, 2024 •

edited

Loading

anagstef commented Jun 12, 2024

clerk-cookie commented Jun 12, 2024

anagstef Jun 13, 2024

panteliselef Jun 14, 2024

panteliselef Jun 14, 2024

dimkl Jun 19, 2024

panteliselef Jun 19, 2024

anagstef Jun 20, 2024

anagstef commented Jun 20, 2024

anagstef commented Jul 10, 2024

clerk-cookie commented Jul 10, 2024

anagstef commented Jul 10, 2024

clerk-cookie commented Jul 10, 2024

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

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

Conversation

anagstef commented Jun 12, 2024 • edited Loading

Description

Checklist

Type of change

changeset-bot bot commented Jun 12, 2024 • edited Loading

🦋 Changeset detected

anagstef commented Jun 12, 2024

clerk-cookie commented Jun 12, 2024

anagstef Jun 13, 2024

Choose a reason for hiding this comment

panteliselef Jun 14, 2024

Choose a reason for hiding this comment

panteliselef Jun 14, 2024

Choose a reason for hiding this comment

dimkl Jun 19, 2024

Choose a reason for hiding this comment

panteliselef Jun 19, 2024

Choose a reason for hiding this comment

anagstef Jun 20, 2024

Choose a reason for hiding this comment

anagstef commented Jun 20, 2024

anagstef commented Jul 10, 2024

clerk-cookie commented Jul 10, 2024

anagstef commented Jul 10, 2024

clerk-cookie commented Jul 10, 2024

anagstef commented Jun 12, 2024 •

edited

Loading

changeset-bot bot commented Jun 12, 2024 •

edited

Loading