fix(nextjs,backend): Support handshake in iframes by anagstef · Pull Request #3555 · clerk/javascript

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/backend@1.3.0-snapshot.v1ec5424 --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.0.18-snapshot.v1ec5424 --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.7.0-snapshot.v1ec5424 --save-exact

@clerk/elements

npm i @clerk/elements@0.7.0-snapshot.v1ec5424 --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.1-snapshot.v1ec5424 --save-exact

@clerk/express

npm i @clerk/express@0.0.12-snapshot.v1ec5424 --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.14-snapshot.v1ec5424 --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.2.0-snapshot.v1ec5424 --save-exact

@clerk/clerk-react

npm i @clerk/clerk-react@5.2.4-snapshot.v1ec5424 --save-exact

@clerk/remix

npm i @clerk/remix@4.1.1-snapshot.v1ec5424 --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.11-snapshot.v1ec5424 --save-exact

@clerk/shared

npm i @clerk/shared@2.3.0-snapshot.v1ec5424 --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.1.1-snapshot.v1ec5424 --save-exact

@clerk/testing

npm i @clerk/testing@1.1.7-snapshot.v1ec5424 --save-exact

@clerk/ui

npm i @clerk/ui@0.1.1-snapshot.v1ec5424 --save-exact

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


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


  // 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)

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

 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 <bryce@clerk.dev>

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/astro@0.0.2-snapshot.v27f3f6b --save-exact

@clerk/backend

npm i @clerk/backend@1.3.1-snapshot.v27f3f6b --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.3-snapshot.v27f3f6b --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.8.1-snapshot.v27f3f6b --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.6-snapshot.v27f3f6b --save-exact

@clerk/express

npm i @clerk/express@0.0.16-snapshot.v27f3f6b --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.18-snapshot.v27f3f6b --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.2.3-snapshot.v27f3f6b --save-exact

@clerk/remix

npm i @clerk/remix@4.2.2-snapshot.v27f3f6b --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.15-snapshot.v27f3f6b --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.1.6-snapshot.v27f3f6b --save-exact

@clerk/testing

npm i @clerk/testing@1.1.10-snapshot.v27f3f6b --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/astro@0.0.2-snapshot.v88c02de --save-exact

@clerk/backend

npm i @clerk/backend@1.3.1-snapshot.v88c02de --save-exact

@clerk/chrome-extension

npm i @clerk/chrome-extension@1.1.3-snapshot.v88c02de --save-exact

@clerk/clerk-js

npm i @clerk/clerk-js@5.8.1-snapshot.v88c02de --save-exact

@clerk/clerk-expo

npm i @clerk/clerk-expo@1.2.6-snapshot.v88c02de --save-exact

@clerk/express

npm i @clerk/express@0.0.16-snapshot.v88c02de --save-exact

@clerk/fastify

npm i @clerk/fastify@1.0.18-snapshot.v88c02de --save-exact

gatsby-plugin-clerk

npm i gatsby-plugin-clerk@5.0.0-beta.45 --save-exact

@clerk/nextjs

npm i @clerk/nextjs@5.2.3-snapshot.v88c02de --save-exact

@clerk/remix

npm i @clerk/remix@4.2.2-snapshot.v88c02de --save-exact

@clerk/clerk-sdk-node

npm i @clerk/clerk-sdk-node@5.0.15-snapshot.v88c02de --save-exact

@clerk/tanstack-start

npm i @clerk/tanstack-start@0.1.6-snapshot.v88c02de --save-exact

@clerk/testing

npm i @clerk/testing@1.1.10-snapshot.v88c02de --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 <bryce@clerk.dev>

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, dimkl and nikosdouvlis 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

Comment thread .changeset/poor-knives-laugh.md Outdated

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 <bryce@clerk.dev>

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

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

Uh oh!

Conversation

anagstef commented Jun 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Jun 12, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

anagstef commented Jun 12, 2024

Uh oh!

clerk-cookie commented Jun 12, 2024

Uh oh!

anagstef Jun 13, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Jun 14, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Jun 14, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

dimkl Jun 19, 2024

Choose a reason for hiding this comment

Uh oh!

panteliselef Jun 19, 2024

Choose a reason for hiding this comment

Uh oh!

anagstef Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

anagstef commented Jun 20, 2024

Uh oh!

anagstef commented Jul 10, 2024

Uh oh!

clerk-cookie commented Jul 10, 2024

Uh oh!

anagstef commented Jul 10, 2024

Uh oh!

clerk-cookie commented Jul 10, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

anagstef commented Jun 12, 2024 •

edited

Loading

changeset-bot Bot commented Jun 12, 2024 •

edited

Loading