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 guide.

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

<lr-file-uploader-regular
    css-src="https://unpkg.com/@uploadcare/blocks@0.22.8/web/file-uploader-regular.min.css"
    class="uploader-cfg"
    id="uploader"
>
</lr-file-uploader-regular>html

const uploader = document.querySelector('#uploader');
uploader.style.setProperty ('--cfg-secure-signature', `"${signature}"`);
uploader.style.setProperty ('--cfg-secure-expire', `"${expire}"`);javascript

It is important to enclose the signature and expiration date within double quotes.

We recommend using the setProperty method to set the --cfg-secure-signature and --cfg-secure-expire parameters as it prevents the caching of sensitive data.

Secure delivery proxy

The --cfg-secure-delivery-proxy parameter can be used with signed URLs. Defines template for your proxy backend URL.

Value for --cfg-secure-delivery-proxy 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.

.my-configuration {
  --cfg-secure-delivery-proxy: 'https://domain.com/preview?url={{previewUrl}}';
}css

CSP settings

If the application works with sensitive user data (e.g. personal photos), we recommend increasing its security with CSP settings. File Uploader uses Blob URLs for on-the-flight generated images and the stylesheets in some cases, so don't forget to add blob: source into the CSP settings:

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