Uppy Tus with CloudFlare stream

Tus
1

Hi guys,

I’m using Uppy.Tus for resumable upload to CloudFlare stream and it works like a charm, but I must send a header that contains my API_KEY for CloudFlare’s API authorize. Problem is everyone can view source and get that key. So how to prevent this?

Here is my code.

        const uppy = Uppy.Core({debug: true, autoProceed: false})
            .use(Uppy.Dashboard, {target: '#uppyUploader', inline: true})
            .use(Uppy.Tus, {
                endpoint: 'https://api.cloudflare.com/client/v4/accounts/{{ACCOUNT_ID}}/media',
                headers: {
                    'X-Auth-Key': '{{API_KEY}}',
                    'X-Auth-Email': '{{EMAIL}}'
                },
                chunkSize: 5 * 1024 * 1024,
                resume: true,
                autoRetry: true,
                retryDelays: [0, 1000, 3000, 5000]
            })
            .run();
        uppy.on('upload-success', (file, response) => {
            console.log(response); // HTTP status code
        });

Thanks for help.

2

Hi Johnny, glad to hear tus is working for you!

tus does not have way to hide those secrets for you. Please contact CloudFlare as this is an application-specific question and we cannot help you there. I have seen people put their API key in their public scripts without problems, so maybe the API key is not meant to be secret but can be shared publicly.

Kind regards,
Marius

3

Thank you Marius for your kindly reply, I will follow your advice.

Thanks a lot

4

@vietnguyen09 what solution did you end up with for this? We tried using an API Token instead of our API Key so that we could restrict the permissions of the key to editing stream videos only and ensure that the rest of our CloudFlare account cannot be compromised, however this still isn’t really a solution because someone could still take our key and use it for unlimited free access to CloudFlare stream.

We use transloadit for image files and it allows a signature which will expire so we don’t have to worry about it being exposed, unlike the Cloudflare API key.

I’d really like to use Uppy since we use it for all our other types of uploads in our service, and because it provides progress and resumable uploads easily, whereas if we made a custom backend implementation with a tus setup for CloudFlare stream, I believe we’d have to build the frontend progress display, resuming, etc all ourselves.

Any input for what you ended up doing would be appreciated.

Thank you.

5

@clarity Thank you for your attention to my question.

I don’t have a complete solution to fully hide X-Auth-Key or X-Auth-Email in Uppy while client-side script (javascript) always show up to the browser source, so anyone can take that and directly upload videos to my account.

My temporary way right now is writing a server-side code (PHP) using Tus library to upload file to CloudFlare stream instead of using Uppy, that hurt me at the bottom because I have to do a lot of work, but no way for me.

6

@vietnguyen09 - or anyone else who comes across this - as far as I know the only secure way to do this is to use a backend to house the api key and logic. The simple way to do this if you’re already on Cloudflare is to use a Worker as a proxy to the Cloudflare API. On Cloudflare Stream’s TUS page, they have an example: https://developers.cloudflare.com/stream/uploading-videos/direct-creator-uploads#using-tus-recommended-for-videos-over-200mb