Use Vercel's Deployment Protection for Content SDK apps

Deployment Protection is Vercel's feature that allows developers and editors to limit access to their site deployments.

To enable this, you must make some changes based on your Content SDK app's configuration:

  1. Configure the Protection Bypass token in Vercel.

  2. Add the bypass token to your rendering host settings:

    1. In SitecoreAI, open the Content Editor and navigate to your rendering host definition located in /sitecore/system/Settings/Services/Rendering Hosts/. For example, if your definition is named vercel, open /sitecore/system/Settings/Services/Rendering Hosts/vercel.

    2. Add the x-vercel-protection-bypass=<bypass_token> query string parameter to the URLs in the following fields. Make sure to replace <bypass_token> with the bypass token value from Vercel:

      • Server side rendering engine endpoint URL

      • Server side rendering engine application URL

      • Server side rendering engine configuration URL

      The following example represents an updated URL for Server side rendering engine application URL:

      RequestResponse
      https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>

  3. If you're using Vercel as your editing host, then while still in SitecoreAI's Content Editor, add the following query string parameter to Server side rendering engine application URL:

    RequestResponse
    x-vercel-set-bypass-cookie=samesitenone

    For example:

    RequestResponse
    https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>&x-vercel-set-bypass-cookie=samesitenone

  4. If Deployment Protection is enabled for a deployment URL other than the automatically-generated one, and you are using the other URL as your rendering host endpoint, do the following in Vercel:

    1. Add the PUBLIC_URL environment variable.

    2. Set the new variable's value to the protocol and hostname used by your rendering host settings, such as https://<vercel_deployment_url>.

  5. If you want to use SitecoreAI Forms and BYOC components in Pages, you also need to configure the rendering host in the Components application, as follows:

    1. Access the Components app from your SitecoreAI dashboard.

    2. On the Setting tab, under Rendering host, enter your Vercel deployment URL and include the following query string parameters:

      • x-vercel-protection-bypass, set to your bypass token.

      • x-vercel-set-bypass-cookie, set to samesitenone.

      An example of an updated rendering host URL is as follows:

      RequestResponse
      https://<vercel_deployment_url>/?x-vercel-protection-bypass=<bypass_token>&x-vercel-set-bypass-cookie=samesitenone
Important

If you use the Protection Bypass token to access the site in normal mode, you must use both the x-vercel-protection-bypass and x-vercel-set-bypass-cookie headers, or use query string parameters, to properly render all the static assets.

Do you have some feedback for us?

If you have suggestions for improving this article,