CORS - App development

While developing a content extension, you might find that:
Thumbnails don't appear in the side panel.
Full-sized images disappear after dragging them into the design.
To fix these issues:
1.Open the JavaScript Console.
2.Click View.
3.Click Developer.
4.Click Developer Tools.
You'll probably see the following error message:
1
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Copied!
This error is caused by Cross-Origin Resource Sharing (CORS).
What is CORS?
CORS is a security feature of web browsers that blocks client-side HTTP requests between different origins. An origin is a unique combination of a domain, protocol, and port.
These, for instance, are all different origins:
http://abc.com
https://abc.com
https://abc.com:3000
https://abc.com:9090
https://abc123.com
When a content extension can't load images, it's because Canva is attempting to fetch the images from a different origin—the server that is serving the images—and that origin is blocking the request.
Verifying CORS errors
If you're troubleshooting CORS errors, it's useful to check if a URL supports CORS without having to continually reload a content extension.
To check if a URL supports CORS:
1.Visit test-cors.org.
2.Enter the URL of the image into the Remote URL field.
3.Click Send Request.
Errors will appears in the Results tab and JavaScript Console.
Fixing CORS errors
When Canva fetches an image, the response to that request needs to include an Access-Control-Allow-Origin header. This header should have one of the following values:
*
https://www.canva.com
The wildcard origin says, "Let any origin access this resource." But a wildcard origin is only valid for unauthenticated requests and, if you're not careful, it can pose a security risk.
The https://www.canva.com origin says, "Block requests that don't originate from Canva." The Access-Control-Allow-Origin header only allows you to provide a single origin, which can be too restrictive, but there are workarounds for multiple origins.
There are three primary ways to set the value of the Access-Control-Allow-Origin header:
At the server-level.
At the application-level.
With a proxy.
Setting the origin at the server-level
If you have access to the server that serves the images for a content extension, the Access-Control-Allow-Origin header can be set at the server-level.
This example demonstrates how to set the header on Apache servers using the .htaccess file:
1
<IfModule mod_headers.c>
2
    Header set Access-Control-Allow-Origin "*"
3
</IfModule>
Copied!
If you're not running Apache, refer to w3.org/wiki/CORS_Enabled for alternate implementations.
Setting the origin at the application-level
If you have access to the source code for the application that serves the images for a content extension, the Access-Control-Allow-Origin header can be set at the application-level.
This example demonstrates how to set the header in Express.js using the response.header method:
1
const express = require("express");
2
const app = express();
3
​
4
app.get("/", async (request, response) => {
5
  response.header("Access-Control-Allow-Origin", "*");
6
  response.send("CORS is enabled for this route.");
7
});
8
​
9
app.listen(process.env.PORT || 3000);
Copied!
If you're not using Express.js, refer to w3.org/wiki/CORS_Enabled for alternate implementations.
Setting the origin with a proxy
If you don't have access to the server or application that serves the images for a content extension, you can fetch images through a proxy that sets the Access-Control-Allow-Origin headers.
Fetching images through a hosted proxy
If you'd like to get up-and-running as quickly as possible, consider signing up for a Cloudinary account and using their Fetch remote images feature.
This feature can take a URL that doesn't support CORS:
1
https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg
Copied!
...and turn it into a URL that does support CORS:
1
https://res.cloudinary.com/demo/image/fetch/https://img.youtube.com/vi/dQw4w9WgXcQ/hqdefault.jpg
Copied!
Fetching images through a self-hosted proxy
If you'd prefer to self-host a proxy, set up an endpoint that:
Fetches an image from a URL.
Gets the binary data of the image.
Sets the Access-Control-Allow-Origin header.
Responds with the image data.
This is an example of how to set up a proxy with Express.js and jimp:
1
const express = require("express");
2
const jimp = require("jimp");
3
​
4
const app = express();
5
​
6
app.get("/", async (request, response) => {
7
  // Fetch image from URL
8
  const image = await jimp.read(request.query.url);
9
​
10
  // Get the image data
11
  const mimeType = await image.getMIME();
12
  const buffer = await image.getBufferAsync(mimeType);
13
  const imageData = buffer.toString("base64");
14
​
15
  // Set the `Access-Control-Allow-Origin` header
16
  response.header("Access-Control-Allow-Origin", "*");
17
​
18
  // Respond with the image data
19
  response.send(imageData);
20
});
21
​
22
app.listen(process.env.PORT || 3000);
Copied!
To fetch images through this proxy, start the server:
1
node index.js
Copied!
Then append the image URL to the endpoint URL as a query parameter:
1
http://localhost:3000/?url=<image_url>
Copied!
You can view a live demo of this project as a Glitch project.
Setting multiple origins
If you need to support multiple origins for the Access-Control-Allow-Origin header:
1.Create a whitelist of supported origins.
2.When a request is received, check the origin.
3.If the origin is in the whitelist, set the Access-Control-Allow-Origin header to that origin.
This can be done at the server-level:
1
<IfModule mod_headers.c>
2
    SetEnvIf Origin "http(s)?://(www\.)?(canva.com|google.com|example.com)quot; AccessControlAllowOrigin=$0
3
    Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
4
    Header merge Vary Origin
5
</IfModule>
Copied!
...or at the application-level:
1
const express = require("express");
2
const app = express();
3
​
4
const whitelist = ["https://www.canva.com", "https://canva.com"];
5
​
6
app.get("/", async (request, response) => {
7
  const origin = whitelist.find(request.headers["Access-Control-Allow-Origin"]);
8
​
9
  if (origin) {
10
    response.header("Access-Control-Allow-Origin", origin);
11
  }
12
​
13
  response.send("CORS is enabled for this route.");
14
});
15
​
16
app.listen(process.env.PORT || 3000);
Copied!

Authentication

Next - Extensions

Editing extensions

Last modified 5mo ago

Copy link

Contents

What is CORS?

Verifying CORS errors

Fixing CORS errors

Setting the origin at the server-level

Setting the origin at the application-level

Setting the origin with a proxy

Setting multiple origins