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.

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

<lr-file-uploader-regular
    ctx-name="my-uploader"
    css-src="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-file-uploader-regular.min.css"
>
</lr-file-uploader-regular>

Once you have generated the signature and expiration date, add the following parameters to the File Uploader in your application:

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

We recommend using the DOM properties to set both the secureSignature and secureExpire settings as it prevents the caching of sensitive data.

Secure delivery proxy

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>

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:;"
/>