Supporting external resources in previews of custom code

Custom code injected into a Webflow site can be previewed in preview or comment modes, allowing you and your team to view your site with custom HTML, CSS or JavaScript applied.

Scripts and resources external to Webflow that implement specific security controls may need modification to work in preview and comment modes.

How previews of custom code mode work

When you enable custom code in preview or comment mode, your site renders on a new subdomain:

{shortName}.canvas.webflow.com

This creates a secure, isolated environment that closely mirrors the published site experience, where custom code scripts can execute safely.

Site managers can enable the "Run custom code in Preview" toggle in Site settings > Custom code. This is a global default setting where the effects of all custom code on your site will be shown in preview and comment modes.

What needs to be updated?

If scripts or resources included in custom code have any security controls implemented, they may need modification to work in preview and comment modes.

Your custom code scripts may need updates if they implement any of the following security controls:

• Content-Security-Policy (CSP) restrictions
• Domain-based script or stylesheet restrictions
• Origin or Referrer header validation
• Dynamic domain detection

Required modifications

For scripts with domain restrictions

If your scripts check for specific domains or origins, update domain validation to include preview domains:

// Update domain validation to include preview domains

const isAllowedDomain = (domain) => {

    return domain.endsWith('.webflow.io') || 

           domain.endsWith('.canvas.webflow.com');

}

For scripts that validate origins

If your scripts validate request origins, update origin validation to include preview domains:

// Example of updated origin validation

const validateOrigin = (origin) => {

    return origin.includes('.webflow.io') || 

           origin.includes('.canvas.webflow.com');

}

For dynamic domain detection

If your scripts need to detect the current environment, update domain detection to include preview domains:

const shortName = window.location.hostname.split('.')[0];

const isPreviewMode = window.location.hostname.includes('canvas.webflow.com');

Testing your custom code

To ensure your custom code works correctly:

1. Add your custom code to a site or page
2. Go to preview mode to test functionality
3. Verify that all interactive elements work as expected
4. Check that external service connections still function properly