How do I pass my secure signature from the backend to the frontend's file uploader

[abhinav_omprakash]

I’m using plain old HTML, CSS, and vanillar JS on the frontend, with a server.
I’m doing server side rendering.

I can generate the signature on the backend but, how do I populate it in the html?
specifically, if i generate a signature string like “abcdef”, and I add it to the html when rendering, won’t this be visible to anyone who inspects the page on the frontend?

references

Upload control with signed uploads

File Uploader security settings

[ag1 (Alex Grenishin)]

Hey @abhinav_omprakash, it’s possible to dynamically update secure signature and expire values with native CSSOM API.

For example,

uploader.style.setProperty('--cfg-secure-signature', '"your_signature"')

Note that value should be wrapped into quotes inside quote, because this is CSS string value.

So, the best way to set and refresh the signature is to make frequent requests to your API server that returns a new signature and the update uploader’s config:

async function refreshToken() {
  const resp = await fetch('https://my-domain.com/refresh-token')
  const json = await resp.json()
  const {signature, expire} = json

  const uploader = document.querySelector('lr-file-uploader-regular')

  uploader.style.setProperty('--cfg-secure-signature', JSON.stringify(signature))
  uploader.style.setProperty('--cfg-secure-expire', JSON.stringify(expire))
}

refreshToken()
// refresh signature every minute
setInterval(refreshToken, 60 * 1000)

Also, I should note that your API should check user credentials and shouldn’t provide signature to the unauthorized users.