> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://uploadcare.com/docs/llms.txt.
# File Uploader security settings
> Learn how to secure your file uploads and deliveries with signatures, expiration dates, and more. Increase the security of apps with CSP 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/security/secure-uploads/) docs.
```html
```
Then you have two ways to pass the `signature` and `expire` to the File Uploader:
1. Using the `secureSignature` and `secureExpire` options:
```js
const config = document.querySelector('uc-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/file-uploader/options/#secure-uploads-signature-resolver) docs for more information.
2. 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 `uc-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.
```js
const config = document.querySelector('uc-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.
```js
const config = document.querySelector('uc-config');
config.secureUploadsExpireThreshold = 5 * 60 * 1000; // 5 minutes
```
See the [Options](/docs/file-uploader/options/#secure-uploads-signature-resolver) docs for more information.
## Secure delivery proxy
There are two ways to point File Uploader to a signing proxy:
1. Using the `secureDeliveryProxy` option:
The `secureDeliveryProxy` parameter can be used with
[signed URLs](/docs/security/secure-delivery/). It defines a URL template
for your [signing proxy](/docs/security/secure-delivery/#use-with-file-uploader).
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.
```html
```
2. Using the `secureDeliveryProxyUrlResolver` option:
```js
const config = document.querySelector('uc-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 [signing proxy](/docs/security/secure-delivery/#use-with-file-uploader) URL.
## CSP settings
If your application handles sensitive user data (e.g., personal photos),
we recommend enhancing its security through [CSP settings](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
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:
```html
```
`ucarecdn.com` is kept for legacy purposes only; use `ucarecd.net` going forward.