Cloudflare Developers•10mo ago

just change the method to `PUT` and it'

just change the method to PUT and it'll work. You'll likely want to add If-Unmodified-Since to ensure write-once only. The rest is optional, though I would really encourage all of the headers here for various reasons. 🙂

const signed_url = await aws_client.sign(
        new Request(url, {
          method: "PUT",
        }),
        {
          aws: { signQuery: true, allHeaders: true },
          headers: {
            "If-Unmodified-Since": new Date(0).toUTCString(),
            "Origin": "http://localhost:3000"
            "Content-Type": "image/jpeg",
            "Content-Disposition": "attachment",
            "Cache-Control": "private, max-age=0, stale-if-error=31536000",
          },
        }
      );

const signed_url = await aws_client.sign(
        new Request(url, {
          method: "PUT",
        }),
        {
          aws: { signQuery: true, allHeaders: true },
          headers: {
            "If-Unmodified-Since": new Date(0).toUTCString(),
            "Origin": "http://localhost:3000"
            "Content-Type": "image/jpeg",
            "Content-Disposition": "attachment",
            "Cache-Control": "private, max-age=0, stale-if-error=31536000",
          },
        }
      );

https://discord.com/channels/595317990191398933/940663374377783388/1201234427590746234

8 Replies

Venkat Dinavahi•10mo ago

Thanks a lot! So that's using aws4fetch right? And on the client-side an XMLHttpRequest would work right? Anything special that I would need to do on the client-side? Like does it need to set those headers again or are those already preset from the signed url?

daveOP•10mo ago

So that's using aws4fetch right?

Correct, but you could use the r2 bindings if you want

And on the client-side an XMLHttpRequest would work right?

yes

Venkat Dinavahi•10mo ago

Ah I might have misunderstood the docs. We have the R2 bindings setup but I didn't know there's a function to get a signed url The preferred way is through the r2 bindings but there's file size upload limits I want to work around. Some of our customer upload files that are 800mb or even more in size

daveOP•10mo ago

Anything special that I would need to do on the client-side? Like does it need to set those headers again or are those already preset from the signed url?

The client side will need to set those headers If-Unmodified-Since, Content-Type, Content-Disposition, and Cache-Control manually when doing the request. You'll want to set the mode of the fetch to be cors so that the Origin header is set automatically

Venkat Dinavahi•10mo ago

Oh maybe that's where my mistake is. I had assumed that if headers are set on the pre-signed url, the client doesn't need to send those again. But thinking about it now, it makes sense. It's kind of like a security check? Like headers A, B, C must match the values the pre-signed URL has set.

daveOP•10mo ago

exactly. signing the origin is a really good trick to prevent abuse.

Venkat Dinavahi•10mo ago

Ok this has to be it. I need to set the client headers to match the pre-signed url. Thanks! I do wish Cloudflare provided more plug-n-play examples. There are too many deatils open to interpretation in the docs!

daveOP•10mo ago

AWS4-HMAC-SHA256 is quite interesting 🙂 not the best security protocol (as it requires storing the secret key in plaintext, no way to hash it), but it's very flexible. you can sign any header you want most libraries don't support creating presigned URLs with more than the "normal" headers signed, but thankfully aws4fetch does!

Gaming

Programming

just change the method to `PUT` and it'