Content Security Policy

A Content Security Policy (CSP) is a security mechanism that prevents web pages from accessing certain browser APIs and resources, reducing the risk of various threats, such as cross-site scripting and clickjacking.

Canva applies a Content Security Policy to the iframe that embeds an app's source code. This makes apps more secure but has some implications that are important to be aware of:

• The policy blocks some useful features
• When an app violates a policy, the app will break

This page describes what the policy allows, what the policy doesn't allow, and how to troubleshoot violations.

What is (and isn't) allowed

Apps can:

• Load font files as data URLs or via HTTPS URLs
• Load image files as data URLs or via HTTPS URLs
• Load audio files as data URLs or via HTTPS URLs
• Load video files as data URLs or via HTTPS URLs
• Use inline CSS

Apps can't:

• Use frames, web workers, or other nested browsing contexts
• Load JavaScript from third-party sources
• Load CSS stylesheets
• Use the base element
• Use the form element's action attribute

What directives does Canva use?

The behavior of a Content Security Policy is defined with one or more directives.

To view the complete list of directives that Canva uses:

1. Visit the following URL, replacing <app-id> with the ID of an app:

   https://app-<app-id>.canva-apps.com/canva-api/templates/v1/api_next.html

2. Right click on the page.

3. Select View Page Source.

The directives are defined in a meta tag.

Troubleshooting violations

When an app violates the Content Security Policy, an error is logged to the JavaScript Console. This error includes details about the specific policy that was violated.