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

package/dist/cjs/components/Link.js

@@ -45,14 +45,18 @@ const sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
 exports.Link = (0, react_1.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/cjs/components/NextImage.js

@@ -20,7 +20,10 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const react_1 = __importDefault(require("react"));
 const sitecore_jss_react_1 = require("@sitecore-jss/sitecore-jss-react");
 const image_1 = __importDefault(require("next/image"));
-const NextImage = (_a) => {
+const sitecore_jss_react_2 = require("@sitecore-jss/sitecore-jss-react");
+const sitecore_jss_react_3 = require("@sitecore-jss/sitecore-jss-react");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+exports.NextImage = (0, sitecore_jss_react_1.withFieldMetadata)((0, sitecore_jss_react_2.withEmptyFieldEditingComponent)((_a) => {
     var { editable = true, imageParams, field, mediaUrlPrefix, fill, priority } = _a, otherProps = __rest(_a, ["editable", "imageParams", "field", "mediaUrlPrefix", "fill", "priority"]);
     // next handles src and we use a custom loader,
     // throw error if these are present
@@ -28,8 +31,7 @@ const NextImage = (_a) => {
         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 && (0, layout_1.isFieldValueEmpty)(dynamicMedia))) {
         return null;
     }
     const imageField = dynamicMedia;
@@ -59,8 +61,7 @@ const NextImage = (_a) => {
         return react_1.default.createElement(image_1.default, Object.assign({ alt: "" }, imageProps));
     }
     return null; // we can't handle the truth
-};
-exports.NextImage = NextImage;
+}, { defaultEmptyFieldEditingComponent: sitecore_jss_react_3.DefaultEmptyFieldEditingComponentImage }));
 exports.NextImage.propTypes = {
     field: prop_types_1.default.oneOfType([
         prop_types_1.default.shape({
@@ -74,5 +75,9 @@ exports.NextImage.propTypes = {
     editable: prop_types_1.default.bool,
     mediaUrlPrefix: prop_types_1.default.instanceOf(RegExp),
     imageParams: prop_types_1.default.objectOf(prop_types_1.default.oneOfType([prop_types_1.default.number.isRequired, prop_types_1.default.string.isRequired]).isRequired),
+    emptyFieldEditingComponent: prop_types_1.default.oneOfType([
+        prop_types_1.default.object,
+        prop_types_1.default.func,
+    ]),
 };
 exports.NextImage.displayName = 'NextImage';

package/dist/cjs/components/RichText.js

@@ -46,7 +46,7 @@ const prefetched = {};
 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 = (0, router_1.useRouter)();
     const richTextRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
@@ -78,7 +78,7 @@ const RichText = (props) => {
             link.addEventListener('click', routeHandler, false);
         });
     };
-    return react_1.default.createElement(sitecore_jss_react_1.RichText, Object.assign({ ref: richTextRef }, rest));
+    return react_1.default.createElement(sitecore_jss_react_1.RichText, Object.assign({ ref: richTextRef, editable: editable }, rest));
 };
 exports.RichText = RichText;
 exports.RichText.propTypes = Object.assign({ internalLinksSelector: prop_types_1.default.string }, sitecore_jss_react_1.RichTextPropTypes);

package/dist/cjs/editing/constants.js

@@ -1,6 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QUERY_PARAM_PROTECTION_BYPASS_VERCEL = exports.QUERY_PARAM_PROTECTION_BYPASS_SITECORE = exports.QUERY_PARAM_EDITING_SECRET = void 0;
+exports.EDITING_ALLOWED_ORIGINS = exports.EDITING_PASS_THROUGH_HEADERS = exports.QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE = exports.QUERY_PARAM_VERCEL_PROTECTION_BYPASS = exports.QUERY_PARAM_EDITING_SECRET = void 0;
 exports.QUERY_PARAM_EDITING_SECRET = 'secret';
-exports.QUERY_PARAM_PROTECTION_BYPASS_SITECORE = 'x-sitecore-protection-bypass';
-exports.QUERY_PARAM_PROTECTION_BYPASS_VERCEL = 'x-vercel-protection-bypass';
+exports.QUERY_PARAM_VERCEL_PROTECTION_BYPASS = 'x-vercel-protection-bypass';
+exports.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`.
+ */
+exports.EDITING_PASS_THROUGH_HEADERS = ['authorization', 'cookie'];
+/**
+ * Default allowed origins for editing requests. This is used to enforce CORS, CSP headers.
+ */
+exports.EDITING_ALLOWED_ORIGINS = ['https://pages*.cloud', 'https://pages.sitecorecloud.io'];

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

@@ -13,6 +13,8 @@ exports.EditingConfigMiddleware = void 0;
 const constants_1 = require("./constants");
 const utils_1 = require("../utils/utils");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
+const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
+const utils_2 = require("@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.
@@ -25,6 +27,10 @@ class EditingConfigMiddleware {
         this.config = config;
         this.handler = (_req, res) => __awaiter(this, void 0, void 0, function* () {
             const secret = _req.query[constants_1.QUERY_PARAM_EDITING_SECRET];
+            if (!(0, utils_2.enforceCors)(_req, res, constants_1.EDITING_ALLOWED_ORIGINS)) {
+                sitecore_jss_1.debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({ message: 'Invalid origin' });
+            }
             if (secret !== (0, utils_1.getJssEditingSecret)()) {
                 sitecore_jss_1.debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, (0, utils_1.getJssEditingSecret)());
                 return res.status(401).json({ message: 'Missing or invalid editing secret' });
@@ -32,9 +38,11 @@ class EditingConfigMiddleware {
             const components = Array.isArray(this.config.components)
                 ? this.config.components
                 : Array.from(this.config.components.keys());
+            const editMode = this.config.pagesEditMode || layout_1.EditMode.Metadata;
             return res.status(200).json({
                 components,
                 packages: this.config.metadata.packages,
+                editMode,
             });
         });
     }

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

@@ -14,6 +14,8 @@ const editing_data_cache_1 = require("./editing-data-cache");
 const editing_data_1 = require("./editing-data");
 const constants_1 = require("./constants");
 const utils_1 = require("../utils/utils");
+const utils_2 = require("@sitecore-jss/sitecore-jss/utils");
+const sitecore_jss_1 = require("@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.
@@ -28,6 +30,10 @@ class EditingDataMiddleware {
             const { method, query, body } = req;
             const secret = query[constants_1.QUERY_PARAM_EDITING_SECRET];
             const key = query[this.queryParamKey];
+            if (!(0, utils_2.enforceCors)(req, res, constants_1.EDITING_ALLOWED_ORIGINS)) {
+                sitecore_jss_1.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 !== (0, utils_1.getJssEditingSecret)()) {
                 res.status(401).end('Missing or invalid secret');

package/dist/cjs/editing/editing-render-middleware.js

@@ -9,58 +9,66 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractEditingData = exports.EditingRenderMiddleware = void 0;
+exports.EditingRenderMiddleware = exports.MetadataHandler = exports.isEditingMetadataPreviewData = exports.ChromesHandler = void 0;
 const constants_1 = require("next/constants");
 const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const layout_1 = require("@sitecore-jss/sitecore-jss/layout");
-const node_html_parser_1 = require("node-html-parser");
 const editing_data_service_1 = require("./editing-data-service");
 const constants_2 = require("./constants");
 const utils_1 = require("../utils/utils");
 const render_middleware_1 = require("./render-middleware");
+const utils_2 = require("@sitecore-jss/sitecore-jss/utils");
+const personalize_1 = require("@sitecore-jss/sitecore-jss/personalize");
 /**
- * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
- * which is required for Sitecore editing support.
+ * Handler for the Editing Chromes POST requests.
+ * This handler is responsible for rendering the page and returning the HTML content that is provided via request.
  */
-class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
-    /**
-     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
-     */
+class ChromesHandler extends render_middleware_1.RenderMiddlewareBase {
     constructor(config) {
         var _a, _b, _c, _d;
         super();
-        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
-            var _e, _f;
-            const { method, query, body, headers } = req;
+        this.config = config;
+        /**
+         * Default page URL resolution.
+         * @param {Object} args Arguments for resolving the page URL
+         * @param {string} args.serverUrl The root server URL e.g. 'http://localhost:3000'
+         * @param {string} args.itemPath The Sitecore relative item path e.g. '/styleguide'
+         * @returns {string} The URL to render
+         */
+        this.defaultResolvePageUrl = ({ serverUrl, itemPath, }) => {
+            return `${serverUrl}${itemPath}`;
+        };
+        /**
+         * Default server URL resolution.
+         * Note we use https protocol on Vercel due to serverless function architecture.
+         * In all other scenarios, including localhost (with or without a proxy e.g. ngrok)
+         * and within a nodejs container, http protocol should be used.
+         *
+         * For information about the VERCEL environment variable, see
+         * https://vercel.com/docs/environment-variables#system-environment-variables
+         * @param {NextApiRequest} req
+         */
+        this.defaultResolveServerUrl = (req) => {
+            return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
+        };
+        this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editing_data_service_1.editingDataService;
+        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new sitecore_jss_1.AxiosDataFetcher({ debugger: sitecore_jss_1.debug.editing });
+        this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
+        this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
+    }
+    render(req, res) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { query, headers: incomingHeaders } = req;
             const startTimestamp = Date.now();
-            sitecore_jss_1.debug.editing('editing render middleware start: %o', {
-                method,
-                query,
-                headers,
-                body,
-            });
-            if (method !== 'POST') {
-                sitecore_jss_1.debug.editing('invalid method - sent %s expected POST', method);
-                res.setHeader('Allow', 'POST');
-                return res.status(405).json({
-                    html: `<html><body>Invalid request method '${method}'</body></html>`,
-                });
-            }
-            // Validate secret
-            const secret = (_e = query[constants_2.QUERY_PARAM_EDITING_SECRET]) !== null && _e !== void 0 ? _e : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
-            if (secret !== (0, utils_1.getJssEditingSecret)()) {
-                sitecore_jss_1.debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, (0, utils_1.getJssEditingSecret)());
-                return res.status(401).json({
-                    html: '<html><body>Missing or invalid secret</body></html>',
-                });
-            }
             try {
                 // Extract data from EE payload
-                const editingData = extractEditingData(req);
+                const editingData = this.extractEditingData(req);
                 // Resolve server URL
                 const serverUrl = this.resolveServerUrl(req);
                 // Get query string parameters to propagate on subsequent requests (e.g. for deployment protection bypass)
                 const params = this.getQueryParamsForPropagation(query);
+                // Get headers to propagate on subsequent requests
+                const headers = this.getHeadersForPropagation(incomingHeaders);
                 // Stash for use later on (i.e. within getStatic/ServerSideProps).
                 // Note we can't set this directly in setPreviewData since it's stored as a cookie (2KB limit)
                 // https://nextjs.org/docs/advanced-features/preview-mode#previewdata-size-limits)
@@ -69,10 +77,11 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 res.setPreviewData(previewData);
                 // Grab the Next.js preview cookies to send on to the render request
                 const cookies = res.getHeader('Set-Cookie');
+                headers.cookie = `${headers.cookie ? headers.cookie + ';' : ''}${cookies.join(';')}`;
                 // Make actual render request for page route, passing on preview cookies as well as any approved query string parameters.
                 // Note timestamp effectively disables caching the request in Axios (no amount of cache headers seemed to do it)
                 sitecore_jss_1.debug.editing('fetching page route for %s', editingData.path);
-                const requestUrl = new URL(this.resolvePageUrl(serverUrl, editingData.path));
+                const requestUrl = new URL(this.resolvePageUrl({ serverUrl, itemPath: editingData.path }));
                 for (const key in params) {
                     if ({}.hasOwnProperty.call(params, key)) {
                         requestUrl.searchParams.append(key, params[key]);
@@ -81,9 +90,7 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 requestUrl.searchParams.append('timestamp', Date.now().toString());
                 const pageRes = yield this.dataFetcher
                     .get(requestUrl.toString(), {
-                    headers: {
-                        Cookie: cookies.join(';'),
-                    },
+                    headers,
                 })
                     .catch((err) => {
                     // We need to handle not found error provided by Vercel
@@ -107,12 +114,6 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 // certain route configurations (e.g. multiple catch-all routes).
                 // The following line will trick it into thinking we're SSR, thus avoiding any router.replace.
                 html = html.replace(constants_1.STATIC_PROPS_ID, constants_1.SERVER_PROPS_ID);
-                if (editingData.layoutData.sitecore.context.renderingType === layout_1.RenderingType.Component) {
-                    // Handle component rendering. Extract component markup only
-                    html = (_f = (0, node_html_parser_1.parse)(html).getElementById(layout_1.EDITING_COMPONENT_ID)) === null || _f === void 0 ? void 0 : _f.innerHTML;
-                    if (!html)
-                        throw new Error(`Failed to render component for ${editingData.path}`);
-                }
                 const body = { html };
                 // Return expected JSON result
                 sitecore_jss_1.debug.editing('editing render middleware end in %dms: %o', Date.now() - startTimestamp, {
@@ -135,31 +136,192 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 });
             }
         });
-        /**
-         * Default page URL resolution.
-         * @param {string} serverUrl
-         * @param {string} itemPath
-         */
-        this.defaultResolvePageUrl = (serverUrl, itemPath) => {
-            return `${serverUrl}${itemPath}`;
-        };
-        /**
-         * Default server URL resolution.
-         * Note we use https protocol on Vercel due to serverless function architecture.
-         * In all other scenarios, including localhost (with or without a proxy e.g. ngrok)
-         * and within a nodejs container, http protocol should be used.
-         *
-         * For information about the VERCEL environment variable, see
-         * https://vercel.com/docs/environment-variables#system-environment-variables
-         * @param {NextApiRequest} req
-         */
-        this.defaultResolveServerUrl = (req) => {
-            return `${process.env.VERCEL ? 'https' : 'http'}://${req.headers.host}`;
+    }
+    extractEditingData(req) {
+        // Sitecore editors will send the following body data structure,
+        // though we're only concerned with the "args".
+        // {
+        //   id: 'JSS app name',
+        //   args: ['path', 'serialized layout data object', 'serialized viewbag object'],
+        //   functionName: 'renderView',
+        //   moduleName: 'server.bundle'
+        // }
+        // The 'serialized viewbag object' structure:
+        // {
+        //   language: 'language',
+        //   dictionary: 'key-value representation of tokens and their corresponding translations',
+        //   httpContext: 'serialized request data'
+        // }
+        var _a;
+        // Note req.body _should_ have already been parsed as JSON at this point (via Next.js `bodyParser` API middleware)
+        const payload = req.body;
+        if (!payload || !payload.args || !Array.isArray(payload.args) || payload.args.length < 3) {
+            throw new Error('Unable to extract editing data from request. Ensure `bodyParser` middleware is enabled on your Next.js API route.');
+        }
+        const layoutData = JSON.parse(payload.args[1]);
+        const viewBag = JSON.parse(payload.args[2]);
+        // Keep backwards compatibility in case people use an older JSS version that doesn't send the path in the context
+        const path = (_a = layoutData.sitecore.context.itemPath) !== null && _a !== void 0 ? _a : viewBag.httpContext.request.path;
+        return {
+            path,
+            layoutData,
+            language: viewBag.language,
+            dictionary: viewBag.dictionary,
         };
-        this.editingDataService = (_a = config === null || config === void 0 ? void 0 : config.editingDataService) !== null && _a !== void 0 ? _a : editing_data_service_1.editingDataService;
-        this.dataFetcher = (_b = config === null || config === void 0 ? void 0 : config.dataFetcher) !== null && _b !== void 0 ? _b : new sitecore_jss_1.AxiosDataFetcher({ debugger: sitecore_jss_1.debug.editing });
-        this.resolvePageUrl = (_c = config === null || config === void 0 ? void 0 : config.resolvePageUrl) !== null && _c !== void 0 ? _c : this.defaultResolvePageUrl;
-        this.resolveServerUrl = (_d = config === null || config === void 0 ? void 0 : config.resolveServerUrl) !== null && _d !== void 0 ? _d : this.defaultResolveServerUrl;
+    }
+}
+exports.ChromesHandler = ChromesHandler;
+/**
+ * Type guard for EditingMetadataPreviewData
+ * @param {Object} data preview data to check
+ * @returns true if the data is EditingMetadataPreviewData
+ * @see EditingMetadataPreviewData
+ */
+const isEditingMetadataPreviewData = (data) => {
+    return (typeof data === 'object' &&
+        data !== null &&
+        'editMode' in data &&
+        data.editMode === layout_1.EditMode.Metadata);
+};
+exports.isEditingMetadataPreviewData = isEditingMetadataPreviewData;
+/**
+ * Handler for the Editing Metadata GET requests.
+ * This handler is responsible for redirecting the request to the page route.
+ * The page fetches the layout, dictionary and renders the page.
+ */
+class MetadataHandler {
+    constructor(config) {
+        this.config = config;
+    }
+    render(req, res) {
+        var _a, _b, _c;
+        const { query } = req;
+        const startTimestamp = Date.now();
+        const requiredQueryParams = [
+            'sc_site',
+            'sc_itemid',
+            'sc_lang',
+            'route',
+            'mode',
+        ];
+        const missingQueryParams = requiredQueryParams.filter((param) => !query[param]);
+        // Validate query parameters
+        if (missingQueryParams.length) {
+            sitecore_jss_1.debug.editing('missing required query parameters: %o', missingQueryParams);
+            return res.status(400).json({
+                html: `<html><body>Missing required query parameters: ${missingQueryParams.join(', ')}</body></html>`,
+            });
+        }
+        res.setPreviewData({
+            site: query.sc_site,
+            itemId: query.sc_itemid,
+            language: query.sc_lang,
+            // for sc_variantId we may employ multiple variants (page-layout + component level)
+            variantIds: ((_a = query.sc_variant) === null || _a === void 0 ? void 0 : _a.split(',')) || [personalize_1.DEFAULT_VARIANT],
+            version: query.sc_version,
+            editMode: layout_1.EditMode.Metadata,
+            pageState: query.mode,
+        }, 
+        // Cache the preview data for 3 seconds to ensure the page is rendered with the correct preview data not the cached one
+        {
+            path: query.route,
+            maxAge: 3,
+        });
+        // 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)) {
+            const modifiedCookies = setCookieHeader.map((cookie) => {
+                const cookieIdentifiers = {
+                    __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 = ((_c = (_b = this.config).resolvePageUrl) === null || _c === void 0 ? void 0 : _c.call(_b, {
+            itemPath: query.route,
+        })) || query.route;
+        sitecore_jss_1.debug.editing('editing render middleware end in %dms: redirect %o', Date.now() - startTimestamp, {
+            status: 307,
+            route,
+        });
+        // Restrict the page to be rendered only within the allowed origins
+        res.setHeader('Content-Security-Policy', this.getSCPHeader());
+        res.redirect(route);
+    }
+    /**
+     * Gets the Content-Security-Policy header value
+     * @returns Content-Security-Policy header value
+     */
+    getSCPHeader() {
+        return `frame-ancestors 'self' ${[(0, utils_2.getAllowedOriginsFromEnv)(), ...constants_2.EDITING_ALLOWED_ORIGINS].join(' ')}`;
+    }
+}
+exports.MetadataHandler = MetadataHandler;
+/**
+ * Middleware / handler for use in the editing render Next.js API route (e.g. '/api/editing/render')
+ * which is required for Sitecore editing support.
+ */
+class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
+    /**
+     * @param {EditingRenderMiddlewareConfig} [config] Editing render middleware config
+     */
+    constructor(config) {
+        super();
+        this.config = config;
+        this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const { query, body, method, headers } = req;
+            sitecore_jss_1.debug.editing('editing render middleware start: %o', {
+                method,
+                query,
+                headers,
+                body,
+            });
+            if (!(0, utils_2.enforceCors)(req, res, constants_2.EDITING_ALLOWED_ORIGINS)) {
+                sitecore_jss_1.debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res.status(401).json({
+                    html: `<html><body>Requests from origin ${(_a = req.headers) === null || _a === void 0 ? void 0 : _a.origin} not allowed</body></html>`,
+                });
+            }
+            // Validate secret
+            const secret = (_b = query[constants_2.QUERY_PARAM_EDITING_SECRET]) !== null && _b !== void 0 ? _b : body === null || body === void 0 ? void 0 : body.jssEditingSecret;
+            if (secret !== (0, utils_1.getJssEditingSecret)()) {
+                sitecore_jss_1.debug.editing('invalid editing secret - sent "%s" expected "%s"', secret, (0, utils_1.getJssEditingSecret)());
+                return res.status(401).json({
+                    html: '<html><body>Missing or invalid secret</body></html>',
+                });
+            }
+            switch (req.method) {
+                case 'GET': {
+                    const handler = new MetadataHandler({ resolvePageUrl: (_c = this.config) === null || _c === void 0 ? void 0 : _c.resolvePageUrl });
+                    yield handler.render(req, res);
+                    break;
+                }
+                case 'POST': {
+                    const handler = new ChromesHandler(this.config);
+                    yield handler.render(req, res);
+                    break;
+                }
+                default:
+                    sitecore_jss_1.debug.editing('invalid method - sent %s expected GET/POST', req.method);
+                    res.setHeader('Allow', 'GET, POST');
+                    return res.status(405).json({
+                        html: `<html><body>Invalid request method '${req.method}'</body></html>`,
+                    });
+            }
+        });
     }
     /**
      * Gets the Next.js API route handler
@@ -170,39 +332,3 @@ class EditingRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
     }
 }
 exports.EditingRenderMiddleware = EditingRenderMiddleware;
-/**
- * @param {NextApiRequest} req
- */
-function extractEditingData(req) {
-    // Sitecore editors will send the following body data structure,
-    // though we're only concerned with the "args".
-    // {
-    //   id: 'JSS app name',
-    //   args: ['path', 'serialized layout data object', 'serialized viewbag object'],
-    //   functionName: 'renderView',
-    //   moduleName: 'server.bundle'
-    // }
-    // The 'serialized viewbag object' structure:
-    // {
-    //   language: 'language',
-    //   dictionary: 'key-value representation of tokens and their corresponding translations',
-    //   httpContext: 'serialized request data'
-    // }
-    var _a;
-    // Note req.body _should_ have already been parsed as JSON at this point (via Next.js `bodyParser` API middleware)
-    const payload = req.body;
-    if (!payload || !payload.args || !Array.isArray(payload.args) || payload.args.length < 3) {
-        throw new Error('Unable to extract editing data from request. Ensure `bodyParser` middleware is enabled on your Next.js API route.');
-    }
-    const layoutData = JSON.parse(payload.args[1]);
-    const viewBag = JSON.parse(payload.args[2]);
-    // Keep backwards compatibility in case people use an older JSS version that doesn't send the path in the context
-    const path = (_a = layoutData.sitecore.context.itemPath) !== null && _a !== void 0 ? _a : viewBag.httpContext.request.path;
-    return {
-        path,
-        layoutData,
-        language: viewBag.language,
-        dictionary: viewBag.dictionary,
-    };
-}
-exports.extractEditingData = extractEditingData;

package/dist/cjs/editing/feaas-render-middleware.js

@@ -14,6 +14,7 @@ const sitecore_jss_1 = require("@sitecore-jss/sitecore-jss");
 const constants_1 = require("./constants");
 const utils_1 = require("../utils/utils");
 const render_middleware_1 = require("./render-middleware");
+const utils_2 = require("@sitecore-jss/sitecore-jss/utils");
 /**
  * Middleware / handler for use in the feaas render Next.js API route (e.g. '/api/editing/feaas/render')
  * which is required for Sitecore editing support.
@@ -28,6 +29,7 @@ class FEAASRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
         this.config = config;
         this.defaultPageUrl = '/feaas/render';
         this.handler = (req, res) => __awaiter(this, void 0, void 0, function* () {
+            var _b;
             const { method, query, headers } = req;
             const startTimestamp = Date.now();
             sitecore_jss_1.debug.editing('feaas render middleware start: %o', {
@@ -35,6 +37,12 @@ class FEAASRenderMiddleware extends render_middleware_1.RenderMiddlewareBase {
                 query,
                 headers,
             });
+            if (!(0, utils_2.enforceCors)(req, res, constants_1.EDITING_ALLOWED_ORIGINS)) {
+                sitecore_jss_1.debug.editing('invalid origin host - set allowed origins in JSS_ALLOWED_ORIGINS environment variable');
+                return res
+                    .status(401)
+                    .send(`<html><body>Requests from origin ${(_b = req.headers) === null || _b === void 0 ? void 0 : _b.origin} are not allowed</body></html>`);
+            }
             if (method !== 'GET') {
                 sitecore_jss_1.debug.editing('invalid method - sent %s expected GET', method);
                 res.setHeader('Allow', 'GET');

package/dist/cjs/editing/index.js

@@ -1,12 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditingConfigMiddleware = exports.FEAASRenderMiddleware = exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = void 0;
+exports.EditingConfigMiddleware = exports.FEAASRenderMiddleware = exports.VercelEditingDataCache = exports.editingDataService = exports.ServerlessEditingDataService = exports.BasicEditingDataService = exports.isEditingMetadataPreviewData = exports.EditingRenderMiddleware = exports.EditingDataMiddleware = exports.EditingDataDiskCache = exports.GraphQLEditingService = void 0;
+var editing_1 = require("@sitecore-jss/sitecore-jss/editing");
+Object.defineProperty(exports, "GraphQLEditingService", { enumerable: true, get: function () { return editing_1.GraphQLEditingService; } });
 var editing_data_cache_1 = require("./editing-data-cache");
 Object.defineProperty(exports, "EditingDataDiskCache", { enumerable: true, get: function () { return editing_data_cache_1.EditingDataDiskCache; } });
 var editing_data_middleware_1 = require("./editing-data-middleware");
 Object.defineProperty(exports, "EditingDataMiddleware", { enumerable: true, get: function () { return editing_data_middleware_1.EditingDataMiddleware; } });
 var editing_render_middleware_1 = require("./editing-render-middleware");
 Object.defineProperty(exports, "EditingRenderMiddleware", { enumerable: true, get: function () { return editing_render_middleware_1.EditingRenderMiddleware; } });
+Object.defineProperty(exports, "isEditingMetadataPreviewData", { enumerable: true, get: function () { return editing_render_middleware_1.isEditingMetadataPreviewData; } });
 var editing_data_service_1 = require("./editing-data-service");
 Object.defineProperty(exports, "BasicEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.BasicEditingDataService; } });
 Object.defineProperty(exports, "ServerlessEditingDataService", { enumerable: true, get: function () { return editing_data_service_1.ServerlessEditingDataService; } });

package/dist/cjs/editing/render-middleware.js

@@ -14,14 +14,28 @@ class RenderMiddlewareBase {
          */
         this.getQueryParamsForPropagation = (query) => {
             const params = {};
-            if (query[constants_1.QUERY_PARAM_PROTECTION_BYPASS_SITECORE]) {
-                params[constants_1.QUERY_PARAM_PROTECTION_BYPASS_SITECORE] = query[constants_1.QUERY_PARAM_PROTECTION_BYPASS_SITECORE];
+            if (query[constants_1.QUERY_PARAM_VERCEL_PROTECTION_BYPASS]) {
+                params[constants_1.QUERY_PARAM_VERCEL_PROTECTION_BYPASS] = query[constants_1.QUERY_PARAM_VERCEL_PROTECTION_BYPASS];
             }
-            if (query[constants_1.QUERY_PARAM_PROTECTION_BYPASS_VERCEL]) {
-                params[constants_1.QUERY_PARAM_PROTECTION_BYPASS_VERCEL] = query[constants_1.QUERY_PARAM_PROTECTION_BYPASS_VERCEL];
+            if (query[constants_1.QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE]) {
+                params[constants_1.QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE] = query[constants_1.QUERY_PARAM_VERCEL_SET_BYPASS_COOKIE];
             }
             return params;
         };
+        /**
+         * Get headers that should be passed along to subsequent requests
+         * @param {IncomingHttpHeaders} headers Incoming HTTP Headers
+         * @returns Object of approved headers
+         */
+        this.getHeadersForPropagation = (headers) => {
+            const result = {};
+            constants_1.EDITING_PASS_THROUGH_HEADERS.forEach((header) => {
+                if (headers[header]) {
+                    result[header] = headers[header];
+                }
+            });
+            return result;
+        };
     }
 }
 exports.RenderMiddlewareBase = RenderMiddlewareBase;