From 98f8fa4af2dd071ff70f6bac1639412e43fb9710 Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 23 Jul 2024 20:27:07 -0400 Subject: [PATCH 1/4] fix edit mode for local host --- .../editing/editing-render-middleware.test.ts | 19 +++++++++++++++-- .../src/editing/editing-render-middleware.ts | 21 +++++++++++++++++++ 2 files changed, 38 insertions(+), 2 deletions(-) diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts index a6aebc8f5d..006ded27c1 100644 --- a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts +++ b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts @@ -24,8 +24,8 @@ import sinonChai from 'sinon-chai'; use(sinonChai); const mockNextJsPreviewCookies = [ - '__prerender_bypass:1122334455', - '__next_preview_data:6677889900', + '__prerender_bypass=1122334455; Path=/; SameSite=Lax', + '__next_preview_data=6677889900; Path=/; SameSite=Lax', ]; type Query = { @@ -339,6 +339,21 @@ describe('EditingRenderMiddleware', () => { expect(isEditingMetadataPreviewData(metadataPreviewData)).to.be.true; expect(isEditingMetadataPreviewData(chromesPreviewData)).to.be.false; }); + + it('should modify the Set-Cookie header', async () => { + const req = mockRequest(EE_BODY, query, 'GET'); + const res = mockResponse(); + + const middleware = new EditingRenderMiddleware(); + const handler = middleware.getHandler(); + + await handler(req, res); + + expect(res.setHeader).to.have.been.calledWith('Set-Cookie', [ + '__prerender_bypass=1122334455; Path=/; SameSite=None; Secure', + '__next_preview_data=6677889900; Path=/; SameSite=None; Secure', + ]); + }); }); describe('chromes handler', () => { diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts index 818089bb2a..7a0075e7f9 100644 --- a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts +++ b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts @@ -363,6 +363,27 @@ export class MetadataHandler { } ); + const setCookieHeader = res.getHeader('Set-Cookie'); + + if (setCookieHeader && Array.isArray(setCookieHeader)) { + const modifiedCookies = setCookieHeader.map((cookie) => { + const cookieIdentifiers: { [key: string]: RegExp } = { + __prerender_bypass: /^__prerender_bypass=/, + __next_preview_data: /^__next_preview_data=/, + }; + + // eslint-disable-next-line @typescript-eslint/no-unused-vars + for (const [_, regex] of Object.entries(cookieIdentifiers)) { + if (cookie.match(regex)) { + return cookie.replace(/SameSite=Lax/, 'SameSite=None; Secure'); + } + } + return cookie; + }); + + res.setHeader('Set-Cookie', modifiedCookies); + } + const route = this.config.resolvePageUrl?.({ itemPath: query.route, From d0007cb820724424e34e646638f89a73bd28be3d Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 23 Jul 2024 20:48:19 -0400 Subject: [PATCH 2/4] update changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7026880cd6..5e80322dcb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,8 @@ Our versioning strategy is as follows: * `[sitecore-jss]` `[sitecore-jss-react]` DateField empty value is not treated as empty ([#1836](https://github.com/Sitecore/jss/pull/1836)) * `[templates/nextjs-sxa]` Fix styles of title component in metadata mode. ([#1839](https://github.com/Sitecore/jss/pull/1839)) * `[templates/nextjs-sxa]` Fix missing value of field property in Title component. ([#1842](https://github.com/Sitecore/jss/pull/1842)) +* `[sitecore-jss-nextjs]` Fix edit mode for localhost. ([#1849](https://github.com/Sitecore/jss/pull/1849)) + ### 🎉 New Features & Improvements From 62878600543478dc25d7b06d699c2a6d31c2251b Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Tue, 23 Jul 2024 20:55:35 -0400 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5e80322dcb..def1683596 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,7 +18,6 @@ Our versioning strategy is as follows: * `[sitecore-jss]` `[sitecore-jss-react]` DateField empty value is not treated as empty ([#1836](https://github.com/Sitecore/jss/pull/1836)) * `[templates/nextjs-sxa]` Fix styles of title component in metadata mode. ([#1839](https://github.com/Sitecore/jss/pull/1839)) * `[templates/nextjs-sxa]` Fix missing value of field property in Title component. ([#1842](https://github.com/Sitecore/jss/pull/1842)) -* `[sitecore-jss-nextjs]` Fix edit mode for localhost. ([#1849](https://github.com/Sitecore/jss/pull/1849)) ### 🎉 New Features & Improvements @@ -35,7 +34,7 @@ Our versioning strategy is as follows: ### 🛠 Breaking Change -* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835)) +* Editing Integration Support: ([#1776](https://github.com/Sitecore/jss/pull/1776))([#1792](https://github.com/Sitecore/jss/pull/1792))([#1773](https://github.com/Sitecore/jss/pull/1773))([#1797](https://github.com/Sitecore/jss/pull/1797))([#1800](https://github.com/Sitecore/jss/pull/1800))([#1803](https://github.com/Sitecore/jss/pull/1803))([#1806](https://github.com/Sitecore/jss/pull/1806))([#1809](https://github.com/Sitecore/jss/pull/1809))([#1814](https://github.com/Sitecore/jss/pull/1814))([#1816](https://github.com/Sitecore/jss/pull/1816))([#1819](https://github.com/Sitecore/jss/pull/1819))([#1828](https://github.com/Sitecore/jss/pull/1828))([#1835](https://github.com/Sitecore/jss/pull/1835)) ([#1849](https://github.com/Sitecore/jss/pull/1849)) * `[sitecore-jss-react]` Introduces `PlaceholderMetadata` component which supports the hydration of chromes on Pages by rendering the components and placeholders with required metadata. * `[sitecore-jss]` Chromes are hydrated based on the basis of new `editMode` property derived from LayoutData, which is defined as an enum consisting of `metadata` and `chromes`. * `ComponentConsumerProps` is removed. You might need to reuse `WithSitecoreContextProps` type. From a69c4cea656e1781f4e5e84521bceb135902f27e Mon Sep 17 00:00:00 2001 From: Addy Pathania Date: Wed, 24 Jul 2024 11:01:07 -0400 Subject: [PATCH 4/4] add explanation to the change --- .../src/editing/editing-render-middleware.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts index 7a0075e7f9..7cb9aedccb 100644 --- a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts +++ b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts @@ -363,6 +363,11 @@ export class MetadataHandler { } ); + // Cookies with the SameSite=Lax policy set by Next.js setPreviewData function causes CORS issue + // when Next.js preview mode is activated, resulting the page to render in normal mode instead. + // By replacing it with "SameSite=None; Secure", we ensure cookies are correctly sent with + // cross-origin requests, allowing the page to be editable. This change should be reverted + // once vercel addresses this open issue: https://github.com/vercel/next.js/issues/49927 const setCookieHeader = res.getHeader('Set-Cookie'); if (setCookieHeader && Array.isArray(setCookieHeader)) {