Content Security Policy
A Content Security Policy (CSP) is a security mechanism that prevents web pages from accessing browser APIs and resources, reducing the risk of certain threats, such as cross-site scripting.
Canva applies a Content Security Policy to the iframe that embeds an app's source code. This makes apps more secure, but:
- The policy blocks some useful features
- When an app violates a policy, the app will break
This page describes what the policy allows and how to troubleshoot violations.
What is (and isn't) allowed
Apps can:
- Load audio, fonts, images, and videos from data URLs and 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'saction
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:
-
Get the ID of your app.
- Log in to the Developer Portal.
- Navigate to the Your apps page.
- Copy the ID of an app from the App ID column.
-
Visit the following URL, replacing
<YOUR_APP_ID>
with the ID of the app:https://app-<YOUR_APP_ID>.canva-apps.com/canva-api/templates/v1/api_next.html -
Right-click the page.
-
Select View Page Source.
The directives are defined in a meta
tag.
How to troubleshoot violations
When an app violates the Content Security Policy, an error is logged to the JavaScript Console. You can use this error to identify what policy was violated and then figure out what needs fixing.