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