From 04d79d7351f33c4cd55fb592fb5de634c36f2e79 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 27 Jan 2025 09:24:49 -0500 Subject: [PATCH 1/5] [sitecore-jss-nextjs][sitecore-jss] Improve Chrome fetching --- .../editing/editing-render-middleware.test.ts | 42 +++++++++++++++---- .../src/editing/editing-render-middleware.ts | 8 ++-- .../sitecore-jss/src/native-fetcher.test.ts | 2 + packages/sitecore-jss/src/native-fetcher.ts | 2 + .../src/tracking/trackingApi.test.ts | 2 +- 5 files changed, 43 insertions(+), 13 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 090aa48bfd..ebf8604e33 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 @@ -102,11 +102,15 @@ describe('EditingRenderMiddleware', () => { process.env.JSS_EDITING_SECRET = secret; process.env.JSS_ALLOWED_ORIGINS = allowedOrigin; delete process.env.VERCEL; + delete process.env.SITECORE; + delete process.env.NETLIFY; }); after(() => { delete process.env.JSS_EDITING_SECRET; delete process.env.VERCEL; + delete process.env.SITECORE; + delete process.env.NETLIFY; delete process.env.JSS_ALLOWED_ORIGINS; }); @@ -435,7 +439,7 @@ describe('EditingRenderMiddleware', () => { expect(res.setPreviewData, 'set preview mode w/ data').to.have.been.calledWith(previewData); expect(res.getHeader, 'get preview cookies').to.have.been.calledWith('Set-Cookie'); expect(fetcher.get).to.have.been.calledOnce; - expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWith( + expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWithMatch( match('http://localhost:3000/test/path?timestamp'), { headers: { @@ -478,7 +482,7 @@ describe('EditingRenderMiddleware', () => { expect(res.setPreviewData, 'set preview mode w/ data').to.have.been.calledWith(previewData); expect(res.getHeader, 'get preview cookies').to.have.been.calledWith('Set-Cookie'); expect(fetcher.get).to.have.been.calledOnce; - expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWith( + expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWithMatch( match('http://localhost:3000/test/path?timestamp'), { headers: { @@ -521,7 +525,7 @@ describe('EditingRenderMiddleware', () => { expect(res.setPreviewData, 'set preview mode w/ data').to.have.been.calledWith(previewData); expect(res.getHeader, 'get preview cookies').to.have.been.calledWith('Set-Cookie'); expect(fetcher.get).to.have.been.calledOnce; - expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWith( + expect(fetcher.get, 'pass along preview cookies').to.have.been.calledWithMatch( match('http://localhost:3000/test/path?timestamp'), { headers: { @@ -597,17 +601,36 @@ describe('EditingRenderMiddleware', () => { expect(fetcher.get).to.have.been.calledWithMatch('https://vercel.com'); }); - it('resolveServerUrl should return https address when authorization header present', async () => { + it('should use https for serverUrl on XM Cloud', async () => { const html = 'Something amazing'; const fetcher = mockFetcher(html); const dataService = mockDataService(); const query = {} as Query; query[QUERY_PARAM_EDITING_SECRET] = secret; - const req = mockRequest(EE_BODY, query, undefined, { - authorization: '123', - host: 'testhostheader.com', + const req = mockRequest(EE_BODY, query, undefined, { host: 'xmc.com' }); + const res = mockResponse(); + process.env.SITECORE = '1'; + + const middleware = new EditingRenderMiddleware({ + dataFetcher: fetcher, + editingDataService: dataService, }); + const handler = middleware.getHandler(); + + await handler(req, res); + + expect(fetcher.get).to.have.been.calledWithMatch('https://xmc.com'); + }); + + it('should use https for serverUrl on Netlify', async () => { + const html = 'Something amazing'; + const fetcher = mockFetcher(html); + const dataService = mockDataService(); + const query = {} as Query; + query[QUERY_PARAM_EDITING_SECRET] = secret; + const req = mockRequest(EE_BODY, query, undefined, { host: 'netlify.com' }); const res = mockResponse(); + process.env.NETLIFY = '1'; const middleware = new EditingRenderMiddleware({ dataFetcher: fetcher, @@ -617,7 +640,7 @@ describe('EditingRenderMiddleware', () => { await handler(req, res); - expect(fetcher.get).to.have.been.calledWithMatch('https://testhostheader.com'); + expect(fetcher.get).to.have.been.calledWithMatch('https://netlify.com'); }); it('should use custom resolveServerUrl', async () => { @@ -754,8 +777,9 @@ describe('EditingRenderMiddleware', () => { expect(fetcher.get).to.have.been.calledOnce; expect(fetcher.get).to.have.been.calledWith( - match('https://localhost:3000/test/path?timestamp'), + match('http://localhost:3000/test/path?timestamp'), { + credentials: 'include', headers: { authorization: mockAuthValue, cookie: mockCookies.concat(mockNextJsPreviewCookies).join(';'), 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 ebe45ced5f..d527dbddce 100644 --- a/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts +++ b/packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts @@ -135,6 +135,7 @@ export class ChromesHandler extends RenderMiddlewareBase { const pageRes = await this.dataFetcher .get(requestUrl.toString(), { + credentials: 'include', headers, }) .catch((err) => { @@ -217,10 +218,11 @@ export class ChromesHandler extends RenderMiddlewareBase { * @param {NextApiRequest} req */ private defaultResolveServerUrl = (req: NextApiRequest) => { + // to preserve auth headers, use https if we're in our 3 main hosting options + const useHttps = + (process.env.VERCEL || process.env.SITECORE || process.env.NETLIFY) !== undefined; // use https for requests with auth but also support unsecured http rendering hosts - return `${req.headers.authorization || process.env.VERCEL ? 'https' : 'http'}://${ - req.headers.host - }`; + return `${useHttps ? 'https' : 'http'}://${req.headers.host}`; }; private extractEditingData(req: NextApiRequest): EditingData { diff --git a/packages/sitecore-jss/src/native-fetcher.test.ts b/packages/sitecore-jss/src/native-fetcher.test.ts index b2bef63e52..fcd3cdf8d8 100644 --- a/packages/sitecore-jss/src/native-fetcher.test.ts +++ b/packages/sitecore-jss/src/native-fetcher.test.ts @@ -4,6 +4,7 @@ import spies from 'chai-spies'; import { NativeDataFetcher } from './native-fetcher'; import debugApi from 'debug'; import debug from './debug'; +import packageJson from '../package.json'; use(spies); @@ -224,6 +225,7 @@ describe('NativeDataFetcher', () => { it('should execute request with custom init', async () => { const headers = { + 'User-Agent': `jss/${packageJson.version}`, x: 'x', y: 'y', }; diff --git a/packages/sitecore-jss/src/native-fetcher.ts b/packages/sitecore-jss/src/native-fetcher.ts index 21e4b3a6cc..7c32c6c8d9 100644 --- a/packages/sitecore-jss/src/native-fetcher.ts +++ b/packages/sitecore-jss/src/native-fetcher.ts @@ -1,5 +1,6 @@ import debuggers, { Debugger } from './debug'; import TimeoutPromise from './utils/timeout-promise'; +import packageJson from '../package.json'; type NativeDataFetcherOptions = { /** @@ -182,6 +183,7 @@ export class NativeDataFetcher { if (!init.method) { init.method = init.body ? 'POST' : 'GET'; } + headers.set('User-Agent', `jss/${packageJson.version}`); init.headers = headers; diff --git a/packages/sitecore-jss/src/tracking/trackingApi.test.ts b/packages/sitecore-jss/src/tracking/trackingApi.test.ts index ff6b655842..503bb93051 100644 --- a/packages/sitecore-jss/src/tracking/trackingApi.test.ts +++ b/packages/sitecore-jss/src/tracking/trackingApi.test.ts @@ -33,7 +33,7 @@ describe('trackEvent', () => { test: true, fetcher: dataFetcher, }).then((data) => { - expect(data).to.deep.equal([{ eventId: 'porgs' }]); + expect(JSON.parse(JSON.stringify(data))).to.deep.equal([{ eventId: 'porgs' }]); }); }); From 073db63fa1a7d3c83dc0980d894fb8641b7f3dba Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 27 Jan 2025 09:28:01 -0500 Subject: [PATCH 2/5] changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4148f63a6f..632414e180 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,7 +13,7 @@ Our versioning strategy is as follows: ### 🐛 Bug Fixes -* `[sitecore-jss-nextj]` Fix Chromes editing mode when rendering host URL is internally redirected in XMCloud +* `[sitecore-jss-nextj]` Fix Chromes editing mode when rendering host URL is internally redirected in XMCloud [#2019](https://github.com/Sitecore/jss/pull/2019) ## 22.4.0 From 08dc9837832c96f18f522b6ea696a6e841430982 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 27 Jan 2025 09:53:47 -0500 Subject: [PATCH 3/5] fix azure build --- packages/sitecore-jss/src/layout/utils.test.ts | 2 +- packages/sitecore-jss/src/native-fetcher.ts | 3 +-- packages/sitecore-jss/src/tracking/trackingApi.test.ts | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/sitecore-jss/src/layout/utils.test.ts b/packages/sitecore-jss/src/layout/utils.test.ts index 44c7422049..296b39367a 100644 --- a/packages/sitecore-jss/src/layout/utils.test.ts +++ b/packages/sitecore-jss/src/layout/utils.test.ts @@ -1,6 +1,6 @@ /* eslint-disable no-unused-expressions */ import { expect } from 'chai'; -import { ComponentRendering } from '../../layout'; +import { ComponentRendering } from './models'; import { getFieldValue, getChildPlaceholder, diff --git a/packages/sitecore-jss/src/native-fetcher.ts b/packages/sitecore-jss/src/native-fetcher.ts index 7c32c6c8d9..690732e451 100644 --- a/packages/sitecore-jss/src/native-fetcher.ts +++ b/packages/sitecore-jss/src/native-fetcher.ts @@ -1,6 +1,5 @@ import debuggers, { Debugger } from './debug'; import TimeoutPromise from './utils/timeout-promise'; -import packageJson from '../package.json'; type NativeDataFetcherOptions = { /** @@ -183,7 +182,7 @@ export class NativeDataFetcher { if (!init.method) { init.method = init.body ? 'POST' : 'GET'; } - headers.set('User-Agent', `jss/${packageJson.version}`); + headers.set('User-Agent', 'Sitecore JSS'); init.headers = headers; diff --git a/packages/sitecore-jss/src/tracking/trackingApi.test.ts b/packages/sitecore-jss/src/tracking/trackingApi.test.ts index 503bb93051..ff6b655842 100644 --- a/packages/sitecore-jss/src/tracking/trackingApi.test.ts +++ b/packages/sitecore-jss/src/tracking/trackingApi.test.ts @@ -33,7 +33,7 @@ describe('trackEvent', () => { test: true, fetcher: dataFetcher, }).then((data) => { - expect(JSON.parse(JSON.stringify(data))).to.deep.equal([{ eventId: 'porgs' }]); + expect(data).to.deep.equal([{ eventId: 'porgs' }]); }); }); From 708778501f2ca585925601f1a4112ce72b0546ff Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 27 Jan 2025 09:55:10 -0500 Subject: [PATCH 4/5] no message --- packages/sitecore-jss/src/native-fetcher.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/sitecore-jss/src/native-fetcher.test.ts b/packages/sitecore-jss/src/native-fetcher.test.ts index fcd3cdf8d8..1da1e6f9f8 100644 --- a/packages/sitecore-jss/src/native-fetcher.test.ts +++ b/packages/sitecore-jss/src/native-fetcher.test.ts @@ -4,7 +4,6 @@ import spies from 'chai-spies'; import { NativeDataFetcher } from './native-fetcher'; import debugApi from 'debug'; import debug from './debug'; -import packageJson from '../package.json'; use(spies); @@ -225,7 +224,7 @@ describe('NativeDataFetcher', () => { it('should execute request with custom init', async () => { const headers = { - 'User-Agent': `jss/${packageJson.version}`, + 'User-Agent': 'Sitecore JSS', x: 'x', y: 'y', }; From feee63813233972ce9534a7a61e50e7da17e87c9 Mon Sep 17 00:00:00 2001 From: Artem Alexeyenko Date: Mon, 27 Jan 2025 10:15:49 -0500 Subject: [PATCH 5/5] remove jss user-agent header --- packages/sitecore-jss/src/native-fetcher.test.ts | 1 - packages/sitecore-jss/src/native-fetcher.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/sitecore-jss/src/native-fetcher.test.ts b/packages/sitecore-jss/src/native-fetcher.test.ts index 1da1e6f9f8..b2bef63e52 100644 --- a/packages/sitecore-jss/src/native-fetcher.test.ts +++ b/packages/sitecore-jss/src/native-fetcher.test.ts @@ -224,7 +224,6 @@ describe('NativeDataFetcher', () => { it('should execute request with custom init', async () => { const headers = { - 'User-Agent': 'Sitecore JSS', x: 'x', y: 'y', }; diff --git a/packages/sitecore-jss/src/native-fetcher.ts b/packages/sitecore-jss/src/native-fetcher.ts index 690732e451..21e4b3a6cc 100644 --- a/packages/sitecore-jss/src/native-fetcher.ts +++ b/packages/sitecore-jss/src/native-fetcher.ts @@ -182,7 +182,6 @@ export class NativeDataFetcher { if (!init.method) { init.method = init.body ? 'POST' : 'GET'; } - headers.set('User-Agent', 'Sitecore JSS'); init.headers = headers;