Access control with signed URLs

Control who and for how long can access files in your project via signed URLs. When enabled, a user will require a token to access your content by the link like this:

https://cdn.yourdomain.com/{uuid}/?token=exp={timestamp}~hmac={token}

A signed URL is a URL that contains authentication information in its query string that provides limited permission and time to get the file.

Use cases

When to use signed URLs:

  • End-users upload personal, medical, and other sensitive data.
  • Only an authorized client can access certain content.
  • Limit content access by time.

How it works

Signed URLs only work on paid plans. Contact us to enable the this feature. Please specify if you need to upload files larger than 1 GB in your request.

Prior to using signed URLs, set up a custom CNAME.

Example:

https://cdn.yourdomain.com/{uuid}/?token=exp={timestamp}~acl={acl}~hmac={token}

Where:

  • {uuid} is a UUID of any file in your Uploadcare project or a URI (UUID + transformations + filename), which is a URL part.
  • {acl} is an optional Access Control List parameter. It supports * wildcard as a suffix.

ACL examples to access files with a token:

  • acl=/* — any file in a project.
  • acl=/{uuid}/ — original file with UUID.
  • acl=/{uuid}/* — original file or any variation of the original file.
  • acl=/{uuid}/-/resize/640x/ — modified file version.

Test environment

You can test signed URLs with in the test environment using the following credentials:

  • hostname: sectest.ucarecdn.com
  • secret: 73636b61519adede42191efe1e73f02a67c7b692e3765f90c250c230be095211

Note: don’t use it in production, this secret is well known.

Token generation

Your backend app should take care of generating access tokens. To create tokens, you need to get the encryption key from our support.

You can start with ready-made solutions for popular languages:

Please note that we have limited support for this option.

Here non-official solutions:

You can use signed URLs into the Uploadcare PHP library.

After setting up signed URLs, specify the projects where you plan to store protected files. We will close public access to these projects.

Proxy backend example

The proxy backend is an API endpoint of your application. The app needs to resolve the following tasks:

  • Accept escaped preview URL as a GET parameter.
  • Check user authorization.
  • Generate expiring access tokens for that URL.
  • Append access tokens to the URL.
  • Redirect to that URL.

Don’t forget to check user credentials on your backend. Make sure not to authenticate anonymous user requests. Otherwise using signed URLs don’t make any sense.

Here is a previewProxy example (Node JS + Express):

1const express = require("express");
2const cookieParser = require("cookie-parser");
3const EdgeAuth = require("akamai-edgeauth");
4
5// User's custom CDN domain
6const HOSTNAME = "https://files.acme.com";
7// Encryption key for the above domain
8const EA_ENCRYPTION_KEY = "your encryption key";
9// token lifetime in seconds
10const DURATION = 500;
11
12const ea = new EdgeAuth({
13	key: EA_ENCRYPTION_KEY,
14	windowSeconds: DURATION,
15	tokenName: "token",
16	escapeEarly: true,
17});
18
19const app = express();
20
21app.use(express.urlencoded({ extended: false }));
22app.use(cookieParser());
23
24app.get("/preview", (req, res) => {
25	const user = req.cookies.user;
26	if (!user) {
27		return res.status(403).send("Authorization failed");
28	}
29	const { pathname } = new URL(req.query.url);
30	const token = ea.generateURLToken(pathname);
31	const signedURL = `${HOSTNAME}${pathname}?${ea.options.tokenName}=${token}`;
32	res.redirect(signedURL);
33});
34
35const listener = app.listen(3000, () => {
36	console.log("Listening on port " + listener.address().port);
37});

Show image previews in jQuery File Uploader

After uploading, the uploading widget loads image previews from the CDN:

-> (GET) https://ucarecdn.com/{uuid}/

With this feature turned on, the uploading widget can’t show previews because signed URLs include a token part. To work that around, you can load images through a proxy backend, where it can hook up the token info:

-> (GET) https://domain.com/preview?url=https%3A%2F%2Fcdn.domain.com%2F{uuid}%2F
-> (Redirect) https://cdn.domain.com/{uuid}/?token={token}&expire={expire}

Here are two options that can help you show image previews:

Option previewProxy

Implementing the previewProxy option works best for these cases:

  • Your application uses cookie-based authorization.
  • Your proxy backend and your app are located in the same domain (otherwise, cookies won’t be sent).
  • You don’t need any other image-related data beside URLs.

To use previewProxy option, specify your proxy backend endpoint URL, and you’re good to go:

1UPLOADCARE_PREVIEW_PROXY = 'https://domain.com/preview?'

It’ll let the uploading widget load image previews via the following URL:

https://domain.com/preview?url=https%3A%2F%2Fcdn.domain.com%2F{uuid}%2F

It appends a query parameter with image preview URL to previewProxy:

1newPreviewUrl = previewProxy + 'url={previewUrl}'

By default, the uploader uses url as the query parameter name, but you can have a custom naming as well:

1'https://domain.com/preview?' + 'url={previewUrl}'
2'https://domain.com/preview?foo=bar' + '&url={previewUrl}'
3'https://domain.com/preview?foo=bar&myUrl=' + '{previewUrl}'

Option previewUrlCallback

This option provides you with explicit control over the uploading widget preview URLs. In code, previewUrlCallback is a function with a signature:

(previewUrl, fileInfo) => previewUrl

Example:

1UPLOADCARE_PREVIEW_URL_CALLBACK = function(previewUrl, fileInfo) {
2    const jwtToken = getJWTToken()
3    return `https://domain.com/preview?` +
4      `url=${encodeURIComponent(previewUrl)}&` +
5      `uuid=${fileInfo.uuid}&` +
6      `token=${jwtToken}`
7}

Note, previewUrlCallback overrides previewProxy, and the latter option will be ignored.