Reverse Proxy Canva Sites with NGINX With Custom Domain and Remove Canva Watermark Footer

Canva is a popular design tool that allows users to create professional-looking websites without coding knowledge. However, these sites are hosted on Canva’s domain (e.g., username.my.canva.site). If you want to use your own domain while leveraging Canva’s website builder, you’ll need to set up a reverse proxy with NGINX. This article explores how to effectively reverse engineer a Canva site using NGINX, allowing you to serve Canva-created content from your own domain.

Understanding the Challenge

When reverse proxying a Canva site, several challenges arise:

1. Asset path rewriting: Canva stores assets (images, CSS, JS) in the _assets/ directory, which needs to be remapped
2. Cross-Origin Resource Sharing (CORS): Assets loaded from your domain need proper CORS headers
3. SSL/TLS configuration: Ensuring secure connections between your server, users, and Canva
4. Content modification: Removing Canva branding or customizing the site appearance
5. Path handling: Managing different site paths correctly

Prerequisites

Before starting, you’ll need:

• A registered domain name
• A server with NGINX installed
• SSL certificates for your domain (Let’s Encrypt works well)
• Basic understanding of NGINX configuration

Step 1: Basic NGINX Server Configuration

Start by setting up the basic server block for your domain:

Step 2: Setting Up the Main Proxy Configuration

Now, we’ll add the proxy configuration to forward requests to Canva:

This configuration forwards all requests from your domain to the Canva site. However, it’s not enough to handle assets and content properly.

Step 3: Content Transformation with sub_filter

A key challenge is handling Canva’s asset paths. We need to modify the HTML, CSS, and JavaScript to reference assets through our domain. This is where sub_filter comes in:

This configuration does several important things:

1. Disables incoming compression so NGINX can modify the content
2. Specifies which content types should be processed with sub_filter
3. Replaces all references to _assets/ with /assets/
4. Adds CSS to hide the Canva footer
5. Ensures all instances are replaced (not just the first one)
6. Disables buffering to make string replacement work properly
7. Re-enables compression for the modified content

Step 4: Creating an Assets Proxy Handler

Now we need to handle requests to the /assets/ path and proxy them to Canva’s _assets/ directory:

This configuration:

1. Forwards requests for /assets/ to Canva’s _assets/ path
2. Sets up CORS headers to allow cross-origin resource loading
3. Handles preflight requests for CORS
4. Sets aggressive caching for static assets (30 days)
5. Disables access logging for assets to reduce log volume

Step 5: Handling Multiple Paths (Optional)

If your Canva site has different sections or if you want to proxy multiple Canva sites under different paths, you can add additional location blocks:

Step 6: DNS and Cloudflare Configuration (Optional)

If you’re using Cloudflare for DNS and proxy services, you can add this to your NGINX configuration:

This ensures:

1. NGINX gets the real client IP from Cloudflare
2. DNS resolution works properly

Complete Configuration Example

Here’s a complete configuration example combining all the elements:

Advanced Customizations

Removing Canva Branding Elements

You can add more CSS to the sub_filter that adds styles to remove Canva branding elements:

Handling Forms and Dynamic Content

If your Canva site has forms or dynamic content, you may need additional configuration:

URL Rewriting and Clean URLs

You might want to implement URL rewriting for cleaner URLs:

Troubleshooting Common Issues

Assets Not Loading

If assets aren’t loading properly, check:

1. CORS headers in the /assets/ location block
2. Verify sub_filter replacements are correct
3. Look for hardcoded URLs in Canva’s HTML/CSS/JS

Content Replacement Issues

If content replacement isn’t working:

1. Verify proxy_buffering off is set
2. Check that sub_filter_once off is set
3. Ensure you’re preventing Canva from sending compressed responses

Mixed Content Warnings

If you see mixed content warnings:

Performance Considerations

Reverse proxying adds some overhead. To optimize performance:

1. Enable caching: For static assets and potentially for pages
2. Use HTTP/2: Enable HTTP/2 for better performance
3. Optimize SSL: Use OCSP stapling and optimize SSL settings
4. Consider a CDN: Use Cloudflare or another CDN in front of your NGINX server

Security Considerations

When reverse proxying, consider these security measures:

1. Limit request size: Prevent large requests
2. Rate limiting: Protect against abuse
3. Security headers: Add headers like Content-Security-Policy

Conclusion

Reverse engineering a Canva site with NGINX allows you to serve Canva-designed content from your own domain while maintaining full control over your website’s appearance and behavior. By carefully configuring the proxy settings, content transformations, and asset handling, you can create a seamless experience for your users while leveraging Canva’s powerful design platform.

Remember that this approach means you’re responsible for maintaining the NGINX configuration and ensuring it stays compatible with Canva’s site structure. You’ll need to monitor for changes in Canva’s HTML structure or asset paths and adjust your configuration accordingly.

With this setup, you get the best of both worlds: Canva’s easy-to-use design tools and the professional appearance of your own branded domain.