Content Security Policy

What is a Content Security Policy? How does it affect app development?

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.

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

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.

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.