Security settings
On this page
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