@sitecore-jss/sitecore-jss-nextjs 22.1.0-canary.9 → 22.1.0

package/dist/cjs/middleware/personalize-middleware.js

@@ -61,6 +61,15 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 sitecore_jss_1.debug.personalize('skipped (no personalization configured)');
                 return response;
             }
+            if (this.isPrefetch(req)) {
+                sitecore_jss_1.debug.personalize('skipped (prefetch)');
+                // Personalized, but this is a prefetch request.
+                // In this case, don't execute a personalize request; otherwise, the metrics for component A/B experiments would be inaccurate.
+                // Disable preflight caching to force revalidation on client-side navigation (personalization WILL be influenced).
+                // Note the reason we don't move this any earlier in the middleware is that we would then be sacrificing performance for non-personalized pages.
+                response.headers.set('x-middleware-cache', 'no-cache');
+                return response;
+            }
             yield this.initPersonalizeServer({
                 hostname,
                 siteName: site.name,
@@ -68,32 +77,36 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
                 response,
             });
             const params = this.getExperienceParams(req);
-            sitecore_jss_1.debug.personalize('executing experience for %s %o', personalizeInfo.contentId, params);
-            let variantId;
-            // Execute targeted experience in Personalize SDK
-            // eslint-disable-next-line no-useless-catch
-            try {
-                const personalization = yield this.personalize({ personalizeInfo, params, language, timeout }, req);
-                variantId = personalization.variantId;
-            }
-            catch (error) {
-                throw error;
-            }
-            if (!variantId) {
-                sitecore_jss_1.debug.personalize('skipped (no variant identified)');
-                return response;
-            }
-            if (!personalizeInfo.variantIds.includes(variantId)) {
-                sitecore_jss_1.debug.personalize('skipped (invalid variant)');
+            const executions = this.getPersonalizeExecutions(personalizeInfo, language);
+            const identifiedVariantIds = [];
+            yield Promise.all(executions.map((execution) => this.personalize({
+                friendlyId: execution.friendlyId,
+                variantIds: execution.variantIds,
+                params,
+                language,
+                timeout,
+            }, req).then((personalization) => {
+                const variantId = personalization.variantId;
+                if (variantId) {
+                    if (!execution.variantIds.includes(variantId)) {
+                        sitecore_jss_1.debug.personalize('invalid variant %s', variantId);
+                    }
+                    else {
+                        identifiedVariantIds.push(variantId);
+                    }
+                }
+            })));
+            if (identifiedVariantIds.length === 0) {
+                sitecore_jss_1.debug.personalize('skipped (no variant(s) identified)');
                 return response;
             }
             // Path can be rewritten by previously executed middleware
             const basePath = (res === null || res === void 0 ? void 0 : res.headers.get('x-sc-rewrite')) || pathname;
             // Rewrite to persononalized path
-            const rewritePath = (0, personalize_1.getPersonalizedRewrite)(basePath, { variantId });
+            const rewritePath = (0, personalize_1.getPersonalizedRewrite)(basePath, identifiedVariantIds);
             response = this.rewrite(rewritePath, req, response);
-            // Disable preflight caching to force revalidation on client-side navigation (personalization may be influenced)
-            // See https://github.com/vercel/next.js/issues/32727
+            // Disable preflight caching to force revalidation on client-side navigation (personalization MAY be influenced).
+            // See https://github.com/vercel/next.js/pull/32767
             response.headers.set('x-middleware-cache', 'no-cache');
             sitecore_jss_1.debug.personalize('personalize middleware end in %dms: %o', Date.now() - startTimestamp, {
                 rewritePath,
@@ -132,17 +145,18 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
             });
         });
     }
-    personalize({ params, personalizeInfo, language, timeout, }, request) {
+    personalize({ params, friendlyId, language, timeout, variantIds, }, request) {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            const personalizationData = {
+            sitecore_jss_1.debug.personalize('executing experience for %s %o', friendlyId, params);
+            return (yield (0, server_2.personalize)(request, {
                 channel: this.config.cdpConfig.channel || 'WEB',
                 currency: (_a = this.config.cdpConfig.currency) !== null && _a !== void 0 ? _a : 'USD',
-                friendlyId: personalizeInfo.contentId,
+                friendlyId,
                 params,
                 language,
-            };
-            return (yield (0, server_2.personalize)(request, personalizationData, { timeout }));
+                pageVariantIds: variantIds,
+            }, { timeout }));
         });
     }
     getExperienceParams(req) {
@@ -164,5 +178,51 @@ class PersonalizeMiddleware extends middleware_1.MiddlewareBase {
         // ignore files
         return pathname.includes('.') || super.excludeRoute(pathname);
     }
+    /**
+     * Aggregates personalize executions based on the provided route personalize information and language
+     * @param {PersonalizeInfo} personalizeInfo the route personalize information
+     * @param {string} language the language
+     * @returns An array of personalize executions
+     */
+    getPersonalizeExecutions(personalizeInfo, language) {
+        if (personalizeInfo.variantIds.length === 0) {
+            return [];
+        }
+        const results = [];
+        return personalizeInfo.variantIds.reduce((results, variantId) => {
+            if (variantId.includes('_')) {
+                // Component-level personalization in format "<ComponentID>_<VariantID>"
+                const componentId = variantId.split('_')[0];
+                const friendlyId = personalize_1.CdpHelper.getComponentFriendlyId(personalizeInfo.pageId, componentId, language, this.config.scope || this.config.edgeConfig.scope);
+                const execution = results.find((x) => x.friendlyId === friendlyId);
+                if (execution) {
+                    execution.variantIds.push(variantId);
+                }
+                else {
+                    // The default/control variant (format "<ComponentID>_default") is also a valid value returned by the execution
+                    const defaultVariant = `${componentId}${personalize_1.DEFAULT_VARIANT}`;
+                    results.push({
+                        friendlyId,
+                        variantIds: [defaultVariant, variantId],
+                    });
+                }
+            }
+            else {
+                // Embedded (page-level) personalization in format "<VariantID>"
+                const friendlyId = personalize_1.CdpHelper.getPageFriendlyId(personalizeInfo.pageId, language, this.config.scope || this.config.edgeConfig.scope);
+                const execution = results.find((x) => x.friendlyId === friendlyId);
+                if (execution) {
+                    execution.variantIds.push(variantId);
+                }
+                else {
+                    results.push({
+                        friendlyId,
+                        variantIds: [variantId],
+                    });
+                }
+            }
+            return results;
+        }, results);
+    }
 }
 exports.PersonalizeMiddleware = PersonalizeMiddleware;

package/dist/cjs/middleware/redirects-middleware.js

@@ -43,6 +43,7 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                 hostname,
             });
             const createResponse = () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
                 if (this.config.disabled && this.config.disabled(req, res || server_1.NextResponse.next())) {
                     sitecore_jss_1.debug.redirects('skipped (redirects middleware is disabled)');
                     return res || server_1.NextResponse.next();
@@ -64,47 +65,44 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                         existsRedirect.target.includes(hostname))) {
                     existsRedirect.target = existsRedirect.target.replace(REGEXP_CONTEXT_SITE_LANG, site.language);
                 }
-                const url = req.nextUrl.clone();
+                const url = this.normalizeUrl(req.nextUrl.clone());
                 if (REGEXP_ABSOLUTE_URL.test(existsRedirect.target)) {
                     url.href = existsRedirect.target;
                 }
                 else {
-                    const source = `${url.pathname}${url.search}`;
-                    url.search = existsRedirect.isQueryStringPreserved ? url.search : '';
+                    const source = `${url.pathname.replace(/\/*$/gi, '')}${url.search}`;
                     const urlFirstPart = existsRedirect.target.split('/')[1];
                     if (this.locales.includes(urlFirstPart)) {
-                        url.locale = urlFirstPart;
+                        req.nextUrl.locale = urlFirstPart;
                         existsRedirect.target = existsRedirect.target.replace(`/${urlFirstPart}`, '');
                     }
                     const target = source
                         .replace((0, regex_parser_1.default)(existsRedirect.pattern), existsRedirect.target)
                         .replace(/^\/\//, '/')
                         .split('?');
-                    url.pathname = target[0];
-                    if (target[1]) {
-                        const newParams = new URLSearchParams(target[1]);
-                        for (const [key, val] of newParams.entries()) {
-                            url.searchParams.append(key, val);
-                        }
+                    if (url.search && existsRedirect.isQueryStringPreserved) {
+                        const targetQueryString = (_a = target[1]) !== null && _a !== void 0 ? _a : '';
+                        url.search = '?' + new URLSearchParams(`${url.search}&${targetQueryString}`).toString();
                     }
+                    else if (target[1]) {
+                        url.search = '?' + target[1];
+                    }
+                    else {
+                        url.search = '';
+                    }
+                    const prepareNewURL = new URL(`${target[0]}${url.search}`, url.origin);
+                    url.href = prepareNewURL.href;
                 }
                 const redirectUrl = decodeURIComponent(url.href);
                 /** return Response redirect with http code of redirect type **/
                 switch (existsRedirect.redirectType) {
                     case site_1.REDIRECT_TYPE_301:
-                        return server_1.NextResponse.redirect(redirectUrl, {
-                            status: 301,
-                            statusText: 'Moved Permanently',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
+                        return server_1.NextResponse.redirect(redirectUrl, Object.assign(Object.assign({}, res), { status: 301, statusText: 'Moved Permanently', headers: res === null || res === void 0 ? void 0 : res.headers }));
                     case site_1.REDIRECT_TYPE_302:
-                        return server_1.NextResponse.redirect(redirectUrl, {
-                            status: 302,
-                            statusText: 'Found',
-                            headers: res === null || res === void 0 ? void 0 : res.headers,
-                        });
-                    case site_1.REDIRECT_TYPE_SERVER_TRANSFER:
-                        return server_1.NextResponse.rewrite(redirectUrl, res);
+                        return server_1.NextResponse.redirect(redirectUrl, Object.assign(Object.assign({}, res), { status: 302, statusText: 'Found', headers: res === null || res === void 0 ? void 0 : res.headers }));
+                    case site_1.REDIRECT_TYPE_SERVER_TRANSFER: {
+                        return this.rewrite(redirectUrl, req, res || server_1.NextResponse.next());
+                    }
                     default:
                         return res || server_1.NextResponse.next();
                 }
@@ -149,8 +147,9 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
     getExistsRedirect(req, siteName) {
         return __awaiter(this, void 0, void 0, function* () {
             const redirects = yield this.redirectsService.fetchRedirects(siteName);
-            const tragetURL = req.nextUrl.pathname;
-            const targetQS = req.nextUrl.search || '';
+            const normalizedUrl = this.normalizeUrl(req.nextUrl.clone());
+            const tragetURL = normalizedUrl.pathname;
+            const targetQS = normalizedUrl.search || '';
             const language = this.getLanguage(req);
             const modifyRedirects = structuredClone(redirects);
             return modifyRedirects.length
@@ -163,7 +162,7 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                         .replace(/(?<!\\)\?/g, '\\?')
                         .replace(/\$\/gi$/g, '')}[\/]?$/gi`;
                     return (((0, regex_parser_1.default)(redirect.pattern).test(tragetURL) ||
-                        (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL}${targetQS}`) ||
+                        (0, regex_parser_1.default)(redirect.pattern).test(`${tragetURL.replace(/\/*$/gi, '')}${targetQS}`) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}`) ||
                         (0, regex_parser_1.default)(redirect.pattern).test(`/${req.nextUrl.locale}${tragetURL}${targetQS}`)) &&
                         (redirect.locale
@@ -173,5 +172,44 @@ class RedirectsMiddleware extends middleware_1.MiddlewareBase {
                 : undefined;
         });
     }
+    /**
+     * When a user clicks on a link generated by the Link component from next/link,
+     * Next.js adds special parameters in the route called path.
+     * This method removes these special parameters.
+     * @param {URL} url
+     * @returns {string} normalize url
+     */
+    normalizeUrl(url) {
+        if (!url.search) {
+            return url;
+        }
+        /**
+         * Prepare special parameters for exclusion.
+         */
+        const splittedPathname = url.pathname
+            .split('/')
+            .filter((route) => route)
+            .map((route) => `path=${route}`);
+        /**
+         * Remove special parameters(Next.JS)
+         * Example: /about/contact/us
+         * When a user clicks on this link, Next.js should generate a link for the middleware, formatted like this:
+         * http://host/about/contact/us?path=about&path=contact&path=us
+         */
+        const newQueryString = url.search
+            .replace(/^\?/, '')
+            .split('&')
+            .filter((param) => {
+            if (!splittedPathname.includes(param)) {
+                return param;
+            }
+            return false;
+        })
+            .join('&');
+        if (newQueryString) {
+            return new URL(`${url.pathname}?${newQueryString}`, url.origin);
+        }
+        return new URL(`${url.pathname}`, url.origin);
+    }
 }
 exports.RedirectsMiddleware = RedirectsMiddleware;

package/dist/cjs/services/base-graphql-sitemap-service.js

@@ -148,13 +148,14 @@ class BaseGraphQLSitemapService {
             const formatPath = (path) => formatStaticPath(path.replace(/^\/|\/$/g, '').split('/'), language);
             const aggregatedPaths = [];
             sitePaths.forEach((item) => {
-                var _a, _b, _c, _d;
+                var _a, _b, _c;
                 if (!item)
                     return;
                 aggregatedPaths.push(formatPath(item.path));
-                // check for type safety's sake - personalize may be empty depending on query type
-                if ((_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds.length) {
-                    aggregatedPaths.push(...(((_d = (_c = item.route) === null || _c === void 0 ? void 0 : _c.personalization) === null || _d === void 0 ? void 0 : _d.variantIds.map((varId) => formatPath((0, personalize_1.getPersonalizedRewrite)(item.path, { variantId: varId })))) || {}));
+                const variantIds = (_c = (_b = (_a = item.route) === null || _a === void 0 ? void 0 : _a.personalization) === null || _b === void 0 ? void 0 : _b.variantIds) === null || _c === void 0 ? void 0 : _c.filter((variantId) => !variantId.includes('_') // exclude component A/B test variants
+                );
+                if (variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) {
+                    aggregatedPaths.push(...variantIds.map((varId) => formatPath((0, personalize_1.getPersonalizedRewrite)(item.path, [varId]))));
                 }
             });
             return aggregatedPaths;

package/dist/cjs/utils/index.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.resolveUrl = exports.resetEditorChromes = exports.isEditorActive = exports.tryParseEnvValue = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
+exports.resetEditorChromes = exports.isEditorActive = exports.resolveUrl = exports.tryParseEnvValue = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "getPublicUrl", { enumerable: true, get: function () { return utils_1.getPublicUrl; } });
 Object.defineProperty(exports, "handleEditorFastRefresh", { enumerable: true, get: function () { return utils_1.handleEditorFastRefresh; } });
 var utils_2 = require("@sitecore-jss/sitecore-jss/utils");
 Object.defineProperty(exports, "tryParseEnvValue", { enumerable: true, get: function () { return utils_2.tryParseEnvValue; } });
-Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return utils_2.isEditorActive; } });
-Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return utils_2.resetEditorChromes; } });
 Object.defineProperty(exports, "resolveUrl", { enumerable: true, get: function () { return utils_2.resolveUrl; } });
+var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+Object.defineProperty(exports, "isEditorActive", { enumerable: true, get: function () { return editing_1.isEditorActive; } });
+Object.defineProperty(exports, "resetEditorChromes", { enumerable: true, get: function () { return editing_1.resetEditorChromes; } });

package/dist/cjs/utils/utils.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getJssEditingSecret = exports.handleEditorFastRefresh = exports.getPublicUrl = void 0;
-const utils_1 = require("@sitecore-jss/sitecore-jss/utils");
+const editing_1 = require("@sitecore-jss/sitecore-jss/editing");
 /**
  * Get the publicUrl.
  * This is used primarily to enable compatibility with Sitecore editors.
@@ -32,7 +32,7 @@ exports.getPublicUrl = getPublicUrl;
  * @default forceReload false
  */
 const handleEditorFastRefresh = (forceReload = false) => {
-    if (process.env.NODE_ENV !== 'development' || !(0, utils_1.isEditorActive)()) {
+    if (process.env.NODE_ENV !== 'development' || !(0, editing_1.isEditorActive)()) {
         // Only run if development mode and editor is active
         return;
     }
@@ -50,7 +50,7 @@ const handleEditorFastRefresh = (forceReload = false) => {
             return window.location.reload();
         setTimeout(() => {
             console.log('[Sitecore Editor HMR Listener] Sitecore editor does not support Fast Refresh, reloading chromes...');
-            (0, utils_1.resetEditorChromes)();
+            (0, editing_1.resetEditorChromes)();
         }, 500);
     };
 };

package/dist/esm/components/Link.js

@@ -16,14 +16,18 @@ import { Link as ReactLink, LinkPropTypes, } from '@sitecore-jss/sitecore-jss-re
 export const Link = forwardRef((props, ref) => {
     const { field, editable = true, children, internalLinkMatcher = /^\//g, showLinkTextWithChildrenPresent } = props, htmlLinkProps = __rest(props, ["field", "editable", "children", "internalLinkMatcher", "showLinkTextWithChildrenPresent"]);
     if (!field ||
-        (!field.editable && !field.value && !field.href)) {
+        (!field.editable &&
+            !field.value &&
+            !field.href &&
+            !field.metadata)) {
         return null;
     }
     const value = (field.href
         ? field
         : field.value);
-    const { href, querystring, anchor } = value;
-    const isEditing = editable && field.editable;
+    // fallback to {} if value is undefined; could happen if field is LinkFieldValue, href is empty in metadata mode
+    const { href, querystring, anchor } = value || {};
+    const isEditing = editable && (field.editable || field.metadata);
     if (href && !isEditing) {
         const text = showLinkTextWithChildrenPresent || !children ? value.text || value.href : null;
         // determine if a link is a route or not.

package/dist/esm/components/NextImage.js

@@ -12,18 +12,22 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { mediaApi } from '@sitecore-jss/sitecore-jss/media';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { getEEMarkup, } from '@sitecore-jss/sitecore-jss-react';
+import { getEEMarkup, withFieldMetadata, SitecoreContextReactContext, } from '@sitecore-jss/sitecore-jss-react';
 import Image from 'next/image';
-export const NextImage = (_a) => {
+import { withEmptyFieldEditingComponent } from '@sitecore-jss/sitecore-jss-react';
+import { DefaultEmptyFieldEditingComponentImage } from '@sitecore-jss/sitecore-jss-react';
+import { isFieldValueEmpty, LayoutServicePageState } from '@sitecore-jss/sitecore-jss/layout';
+export const NextImage = withFieldMetadata(withEmptyFieldEditingComponent((_a) => {
+    var _b;
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
+    const sitecoreContext = React.useContext(SitecoreContextReactContext);
     // next handles src and we use a custom loader,
     // throw error if these are present
     if (otherProps.src) {
         throw new Error('Detected src prop. If you wish to use src, use next/image directly.');
     }
     const dynamicMedia = field;
-    if (!field ||
-        (!dynamicMedia.editable && !dynamicMedia.value && !dynamicMedia.src)) {
+    if (!field || (!dynamicMedia.editable && isFieldValueEmpty(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -38,8 +42,11 @@ export const NextImage = (_a) => {
     if (!img) {
         return null;
     }
+    // disable image optimization for Edit and Preview, but preserve original value if true
+    const unoptimized = otherProps.unoptimized ||
+        ((_b = sitecoreContext.context) === null || _b === void 0 ? void 0 : _b.pageState) !== LayoutServicePageState.Normal;
     const attrs = Object.assign(Object.assign(Object.assign({}, img), otherProps), { fill,
-        priority, src: mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix) });
+        priority, src: mediaApi.updateImageUrl(img.src, imageParams, mediaUrlPrefix), unoptimized });
     const imageProps = Object.assign(Object.assign({}, attrs), { 
         // force replace /media with /jssmedia in src since we _know_ we will be adding a 'mw' query string parameter
         // this is required for Sitecore media API resizing to work properly
@@ -53,7 +60,7 @@ export const NextImage = (_a) => {
         return React.createElement(Image, Object.assign({ alt: "" }, imageProps));
     }
     return null; // we can't handle the truth
-};
+}, { defaultEmptyFieldEditingComponent: DefaultEmptyFieldEditingComponentImage }));
 NextImage.propTypes = {
     field: PropTypes.oneOfType([
         PropTypes.shape({
@@ -67,5 +74,9 @@ NextImage.propTypes = {
     editable: PropTypes.bool,
     mediaUrlPrefix: PropTypes.instanceOf(RegExp),
     imageParams: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.func,
+    ]),
 };
 NextImage.displayName = 'NextImage';

package/dist/esm/components/RichText.js

@@ -17,7 +17,7 @@ const prefetched = {};
 export const RichText = (props) => {
     const { internalLinksSelector = 'a[href^="/"]', prefetchLinks = true, editable = true } = props, rest = __rest(props, ["internalLinksSelector", "prefetchLinks", "editable"]);
     const hasText = props.field && props.field.value;
-    const isEditing = editable && props.field && props.field.editable;
+    const isEditing = editable && props.field && (props.field.editable || props.field.metadata);
     const router = useRouter();
     const richTextRef = useRef(null);
     useEffect(() => {
@@ -49,7 +49,7 @@ export const RichText = (props) => {
             link.addEventListener('click', routeHandler, false);
         });
     };
-    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef }, rest));
+    return React.createElement(ReactRichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
 RichText.propTypes = Object.assign({ internalLinksSelector: PropTypes.string }, RichTextPropTypes);
 RichText.displayName = 'NextRichText';

package/dist/esm/editing/constants.js

@@ -1,3 +1,12 @@
 export const QUERY_PARAM_EDITING_SECRET = 'secret';
-export const QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
-export const QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';
+export const QUERY_PARAM_VERCEL_PROTECTION_BYPASS = 'x-vercel-protection-bypass';
+export const QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE = 'x-vercel-set-bypass-cookie';
+/**
+ * Headers that should be passed along to (Editing Chromes handler) SSR request.
+ * Note these are in lowercase format to match expected `IncomingHttpHeaders`.
+ */
+export const EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
+export const EDITING_ALLOWED_ORIGINS = ['https://pages.sitecorecloud.io'];

package/dist/esm/editing/editing-config-middleware.js

@@ -7,9 +7,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { QUERY_PARAM_EDITING_SECRET } from './constants';
+import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
 import { debug } from '@sitecore-jss/sitecore-jss';
+import { EditMode } from '@sitecore-jss/sitecore-jss/layout';
+import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
 /**
  * Middleware / handler used in the editing config API route in xmcloud add on (e.g. '/api/editing/config')
  * provides configuration information to determine feature compatibility on Pages side.
@@ -22,6 +24,10 @@ export class EditingConfigMiddleware {
         this.config = config;
         this.handler = (_req, res) => __awaiter(this, void 0, void 0, function* () {
             const secret = _req.query[QUERY_PARAM_EDITING_SECRET];
+            if (!enforceCors(_req, res, EDITING_ALLOWED_ORIGINS)) {
+                debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({ message: 'Invalid origin' });
+            }
             if (secret !== getJssEditingSecret()) {
                 debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, getJssEditingSecret());
                 return res.status(401).json({ message: 'Missing or invalid editing secret' });
@@ -29,9 +35,11 @@ export class EditingConfigMiddleware {
             const components = Array.isArray(this.config.components)
                 ? this.config.components
                 : Array.from(this.config.components.keys());
+            const editMode = this.config.pagesEditMode || EditMode.Metadata;
             return res.status(200).json({
                 components,
                 packages: this.config.metadata.packages,
+                editMode,
             });
         });
     }

package/dist/esm/editing/editing-data-middleware.js

@@ -9,8 +9,10 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { editingDataDiskCache } from './editing-data-cache';
 import { isEditingData } from './editing-data';
-import { QUERY_PARAM_EDITING_SECRET } from './constants';
+import { EDITING_ALLOWED_ORIGINS, QUERY_PARAM_EDITING_SECRET } from './constants';
 import { getJssEditingSecret } from '../utils/utils';
+import { enforceCors } from '@sitecore-jss/sitecore-jss/utils';
+import { debug } from '@sitecore-jss/sitecore-jss';
 /**
  * Middleware / handler for use in the editing data Next.js API dynamic route (e.g. '/api/editing/data/[key]')
  * which is required for Sitecore editing support.
@@ -25,6 +27,10 @@ export class EditingDataMiddleware {
             const { method, query, body } = req;
             const secret = query[QUERY_PARAM_EDITING_SECRET];
             const key = query[this.queryParamKey];
+            if (!enforceCors(req, res, EDITING_ALLOWED_ORIGINS)) {
+                debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({ message: 'Invalid origin' });
+            }
             // Validate secret
             if (secret !== getJssEditingSecret()) {
                 res.status(401).end('Missing or invalid secret');