Security settings

Secure uploading

Signed uploading is a recommended practice if you want to control who can upload files to your application. To enable signed uploads, generate a signature and an expiration date as a timestamp on your backend.

To prepare a function that returns the necessary data, follow the instructions provided in the signed uploads docs.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-file-uploader-regular.min.css">

<lr-config
  ctx-name="my-uploader"
  pubkey="YOUR_PUBLIC_KEY"
></lr-config>

<lr-file-uploader-regular
    ctx-name="my-uploader"
>
</lr-file-uploader-regular>

Then you have two ways to pass the signature and expire to the File Uploader:

Using the secureSignature and secureExpire options:

const config = document.querySelector('lr-config');
config.secureSignature = signature;
config.secureExpire = expire;

With this approach, you must manually manage those values, check for the expiration date, and update them when needed.

See the Options docs for more information.

Using the secureUploadsSignatureResolver option:

With this approach you need to create an API endpoint on your backend that returns both the signature and expire values. Then, you can set the secureSignatureResolver option in the lr-config to asynchronously fetch the signature from your backend. This allows File Uploader to request a signature when needed, and you don't need to manage the expiration date and manually update the signature.

const config = document.querySelector('lr-config');
config.secureUploadsSignatureResolver = async () => {
  const response = await fetch('https://your-backend.com/signature');
  const { secureSignature, signatureExpire } = await response.json();
  return { secureSignature, signatureExpire }
}

There is also option called secureUploadsExpireThreshold that allows you to set a threshold in milliseconds before the expiration date when the signature should be updated. By default it set to 10 * 60 * 1000 (10 minutes). That means that the signature will be updated 10 minutes before the expiration date.

This option is needed to prevent the situation when the signature expires before the upload is finished.

const config = document.querySelector('lr-config');
config.secureUploadsExpireThreshold = 5 * 60 * 1000; // 5 minutes

See the Options docs for more information.

Secure delivery proxy

There are two ways to set up a secure delivery proxy:

Using the secureDeliveryProxy option:

The secureDeliveryProxy parameter can be used with signed URLs. Defines template for your proxy backend URL.

Value for secureDeliveryProxy is a string template with the following variables:

previewUrl

That means that you can use {{previewUrl}} in your template to insert the URL of a file to proxify.

<lr-config
  secure-delivery-proxy="https://domain.com/preview?url={{previewUrl}}"
></lr-config>

Using the secureDeliveryProxyUrlResolver option:

const config = document.querySelector('lr-config');
config.secureDeliveryProxyUrlResolver = async (previewUrl, { uuid, cdnUrlModifiers, fileName }) => {
  const yourAuthToken = await fetch('https://your-backend.com/auth-token');
  return `https://domain.com/preview?url=${previewUrl}&uuid=${uuid}&cdnUrlModifiers=${cdnUrlModifiers}&fileName=${fileName}&someAuthToken=${yourAuthToken}`;
}

This function should return a proxy backend URL.

CSP settings

If your application handles sensitive user data (e.g., personal photos), we recommend enhancing its security through CSP settings. The File Uploader uses Blob URLs for on-the-fly image generation and stylesheets in some cases. Consequently, remember to add blob: as a source in the CSP settings:

<meta
  http-equiv="Content-Security-Policy"
  content="style-src 'self' blob:; script-src 'self'; img-src 'self' https://ucarecdn.com blob:;"
/>