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 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.

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's action attribute.

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

The app's iframe uses the following directives:

base-uri 'none';
child-src 'none';
connect-src https: data: wss:;
default-src 'none';
font-src data: https:;
form-action 'none';
frame-ancestors http://localhost:*;
frame-src 'none';
img-src data: https: blob:;
media-src data: https: blob:;
object-src 'none';
script-src 'wasm-unsafe-eval' 'nonce-XXXX';
style-src 'unsafe-inline';
worker-src 'none';

When an app violates the Content Security Policy, an error is logged to the JavaScript Console. You can use this error to identify which policy was violated and then figure out what needs fixing.