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 1GB 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}

{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 wildcards (*, ?). Also, it can be a string (single path) or an array (multi-paths).

ACL examples to access files with a token:

acl=/*/ — any file in a project.
acl=/{uuid}/ — original file with UUID.
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
token: 73636b61519adede42191efe1e73f02a67c7b692e3765f90c250c230be095211

https://sectest.ucarecdn.com/{uuid}/?73636b61519adede42191efe1e73f02a67c7b692e3765f90c250c230be095211=exp={timestamp}

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.

We recommend that you start with ready-made solutions for popular languages:

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):

const express = require("express");
const cookieParser = require("cookie-parser");
const EdgeAuth = require("akamai-edgeauth");

// User's custom CDN domain
const HOSTNAME = "https://files.acme.com";
// Encryption key for the above domain
const EA_ENCRYPTION_KEY = "your encryption key";
// token lifetime in seconds
const DURATION = 500;

const ea = new EdgeAuth({
	key: EA_ENCRYPTION_KEY,
	windowSeconds: DURATION,
	tokenName: "token",
	escapeEarly: true,
});

const app = express();

app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.get("/preview", (req, res) => {
	const user = req.cookies.user;
	if (!user) {
		return res.status(403).send("Authorization failed");
	}
	const { pathname } = new URL(req.query.url);
	const token = ea.generateURLToken(pathname);
	const signedURL = `${HOSTNAME}${pathname}?${ea.options.tokenName}=${token}`;
	res.redirect(signedURL);
});

const listener = app.listen(3000, () => {
	console.log("Listening on port " + listener.address().port);
});javascript

Show image previews in jQuery widget

After uploading, Uploading Widget loads image previews from the CDN:

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

With this feature turned on, 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:

previewProxy. It proxies the data related to image previews.
previewUrlCallback. It works if you need to send extra data like JWT tokens.

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:

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

It'll let 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:

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

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

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

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