[sitecore-jss-proxy][sitecore-jss-nextjs] Fix for getCSPHeader function

CHANGELOG.md

@@ -23,6 +23,7 @@ Our versioning strategy is as follows:
 * `[sitecore-jss-angular]` Fix nested dynamic placeholders not being displayed in Pages ([#1947](https://github.com/Sitecore/jss/pull/1947))
 * `[sitecore-jss-dev-tools]` getMetadata() now uses `npm query` command to get the list and exact versions of packages. this solution works for monorepo setups ([#1949](https://github.com/Sitecore/jss/pull/1949))
 * `[templates/nextjs-sxa]` Fix an alignment issue where components using both `me-auto` and `ms-md-auto` classes resulted in inconsistent alignment of elements. ([#1946](https://github.com/Sitecore/jss/pull/1946)) ([#1950](https://github.com/Sitecore/jss/pull/1950)) ([#1955](https://github.com/Sitecore/jss/pull/1955))
+* `[sitecore-jss-proxy]``[sitecore-jss-nextjs]` Fix for getCSPHeader so that it returns proper value for the CSP header when JSS_ALLOWED_ORIGINS lists multiple origins delimited with comma. ([#1972](https://github.com/Sitecore/jss/pull/1972))
 * `[sitecore-jss-proxy]` Support Editing Host protection by handling OPTIONS preflight requests ([#1976](https://github.com/Sitecore/jss/pull/1976))
 
 ### 🎉 New Features & Improvements

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.test.ts

@@ -391,6 +391,24 @@ describe('EditingRenderMiddleware', () => {
         '__next_preview_data=6677889900; Path=/; SameSite=None; Secure',
       ]);
     });
+
+    it('should set allowed origins when multiple allowed origins are provided in env variable', async () => {
+      process.env.JSS_ALLOWED_ORIGINS = 'https://allowed.com,https://anotherallowed.com';
+      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(
+        'Content-Security-Policy',
+        `frame-ancestors 'self' https://allowed.com https://anotherallowed.com ${EDITING_ALLOWED_ORIGINS.join(
+          ' '
+        )}`
+      );
+    });
   });
 
   describe('chromes handler', () => {

packages/sitecore-jss-nextjs/src/editing/editing-render-middleware.ts

@@ -405,9 +405,10 @@ export class MetadataHandler {
    * @returns Content-Security-Policy header value
    */
   getSCPHeader() {
-    return `frame-ancestors 'self' ${[getAllowedOriginsFromEnv(), ...EDITING_ALLOWED_ORIGINS].join(
-      ' '
-    )}`;
+    return `frame-ancestors 'self' ${[
+      ...getAllowedOriginsFromEnv(),
+      ...EDITING_ALLOWED_ORIGINS,
+    ].join(' ')}`;
   }
 }
 

packages/sitecore-jss-proxy/src/middleware/editing/render.test.ts

@@ -10,6 +10,7 @@ import {
   GraphQLEditingService,
   LayoutKind,
   RenderMetadataQueryParams,
+  EDITING_ALLOWED_ORIGINS,
 } from '@sitecore-jss/sitecore-jss/editing';
 import { EditingRenderEndpointOptions, getSCPHeader } from './render';
 import { LayoutServiceData, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
@@ -459,3 +460,28 @@ describe('editingRouter - /editing/render', () => {
       .end(done);
   });
 });
+
+describe('getSCPHeader', () => {
+  afterEach(() => {
+    delete process.env.JSS_ALLOWED_ORIGINS;
+  });
+
+  it('should return the value of the CSP header', () => {
+    process.env.JSS_ALLOWED_ORIGINS = 'https://pages-dev.sitecore-staging.cloud';
+    const expectedHeader = `frame-ancestors 'self' https://pages-dev.sitecore-staging.cloud ${EDITING_ALLOWED_ORIGINS.join(
+      ' '
+    )}`;
+    const actualHeader = getSCPHeader();
+    expect(actualHeader).to.equal(expectedHeader);
+  });
+
+  it('should return the value of the CSP header when multiple origins are listed in JSS_ALLOWED_ORIGINS', () => {
+    process.env.JSS_ALLOWED_ORIGINS =
+      'https://pages-dev.sitecore-staging.cloud,https://pages-staging.sitecore-staging.cloud';
+    const expectedHeader = `frame-ancestors 'self' https://pages-dev.sitecore-staging.cloud https://pages-staging.sitecore-staging.cloud ${EDITING_ALLOWED_ORIGINS.join(
+      ' '
+    )}`;
+    const actualHeader = getSCPHeader();
+    expect(actualHeader).to.equal(expectedHeader);
+  });
+});

packages/sitecore-jss-proxy/src/middleware/editing/render.ts

@@ -144,7 +144,7 @@ export const editingRenderMiddleware = (config: EditingRenderEndpointOptions) =>
  * @returns {string} Content-Security-Policy header value
  */
 export const getSCPHeader = () => {
-  return `frame-ancestors 'self' ${[getAllowedOriginsFromEnv(), ...EDITING_ALLOWED_ORIGINS].join(
+  return `frame-ancestors 'self' ${[...getAllowedOriginsFromEnv(), ...EDITING_ALLOWED_ORIGINS].join(
     ' '
   )}`;
 };