[sitecore-jss-nextjs][sitecore-jss] Improve Chromes mode fetching (#2019

)
Sitecore · Jan 27, 2025 · d160f10 · d160f10
1 parent 94b2dc1
commit d160f10
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git 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

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
@@ -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 = '<html><body>Something amazing</body></html>';
       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 = '<html><body>Something amazing</body></html>';
+      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
@@ -135,6 +135,7 @@ export class ChromesHandler extends RenderMiddlewareBase {
 
       const pageRes = await this.dataFetcher
         .get<string>(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/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,