GET for an image is a simple request, it doesn't need CORS.

Kkian GET for an image is a simple request, it doesn't need CORS.

A

amarezenebe•3/14/24, 10:12 AM

what if i want to restrict my image domain not to be access with other domain ?

Aamarezenebe what if i want to restrict my image domain not to be access with other domain ?

K

Karew•3/14/24, 10:27 AM

https://developers.cloudflare.com/waf/tools/scrape-shield/hotlink-protection/

Cloudflare Docs

Hotlink Protection · Cloudflare Web Application Firewall (WAF) docs

Hotlink Protection prevents your images from being used by other sites, which can reduce the bandwidth consumed by your origin server.

J

j.purohit198•3/14/24, 11:17 AM

Hi all, I am trying to implement CloudFlare R2 in my Flutter project. But I am getting eith 400 or 403 all the time.
Here is the gist of my code: https://gist.github.com/jitendrapurohit12/81ad9b07c1237cb234c14e1328df236e

I am using "amazon_cognito_identity_dart_2" package.

Gist

cloud_flare_r2.dart

GitHub Gist: instantly share code, notes, and snippets.

Jj.purohit198 Hi all, I am trying to implement CloudFlare R2 in my Flutter project. But I am g...

Y

yousef•3/14/24, 11:19 AM

I was able to successfully implement it in flutter

Y

yousef•3/14/24, 11:20 AM

I used https://pub.dev/packages/aws_signature_v4

Dart packages

aws_signature_v4 | Dart package

Dart implementation of the AWS Signature Version 4 algorithm, for communication with AWS services.

Yyousef I was able to successfully implement it in flutter

J

j.purohit198•3/14/24, 11:22 AM

Tried that too with the same issue. Can you please share the code snippet without your key and secret?

Y

yousef•3/14/24, 11:22 AM

sure

Y

yousef•3/14/24, 11:22 AM

are you using image_picker or a file picker?

J

j.purohit198•3/14/24, 11:22 AM

yes.

Y

yousef•3/14/24, 11:22 AM

ok I used image_picker

Y

yousef•3/14/24, 11:23 AM

I will share my image upload function

J

j.purohit198•3/14/24, 11:23 AM

yes, please. thanks.

Y

yousef•3/14/24, 11:24 AM

static Future<String> uploadPic(File image) async {
    String fileName = DateTime.now().millisecondsSinceEpoch.toString();
    const signer = AWSSigV4Signer();
    final scope = AWSCredentialScope(
      region: "eeur",
      service: AWSService.s3,
    );
    const host = '{{accountid}}.r2.cloudflarestorage.com';
    final serviceConfiguration = S3ServiceConfiguration();
    final path = '/{{bucketname}}/$fileName.jpg';
    final uploadRequest = AWSStreamedHttpRequest.put(
      Uri.https(host, path),
      body: image.openRead(),
      headers: {
        AWSHeaders.host: host,
        AWSHeaders.contentType: 'image/jpg',
      },
    );
    final signedUploadRequest = await signer.sign(
      uploadRequest,
      credentialScope: scope,
      serviceConfiguration: serviceConfiguration,
    );
    final uploadResponse = await signedUploadRequest.send().response;
    final uploadStatus = uploadResponse.statusCode;
    if (uploadStatus == 200) {
      return "{{public_link_to_image}}";
    }
    throw Exception("there was an error uploading the image");
  }

static Future<String> uploadPic(File image) async {
    String fileName = DateTime.now().millisecondsSinceEpoch.toString();
    const signer = AWSSigV4Signer();
    final scope = AWSCredentialScope(
      region: "eeur",
      service: AWSService.s3,
    );
    const host = '{{accountid}}.r2.cloudflarestorage.com';
    final serviceConfiguration = S3ServiceConfiguration();
    final path = '/{{bucketname}}/$fileName.jpg';
    final uploadRequest = AWSStreamedHttpRequest.put(
      Uri.https(host, path),
      body: image.openRead(),
      headers: {
        AWSHeaders.host: host,
        AWSHeaders.contentType: 'image/jpg',
      },
    );
    final signedUploadRequest = await signer.sign(
      uploadRequest,
      credentialScope: scope,
      serviceConfiguration: serviceConfiguration,
    );
    final uploadResponse = await signedUploadRequest.send().response;
    final uploadStatus = uploadResponse.statusCode;
    if (uploadStatus == 200) {
      return "{{public_link_to_image}}";
    }
    throw Exception("there was an error uploading the image");
  }

static Future<String> uploadPic(File image) async {
    String fileName = DateTime.now().millisecondsSinceEpoch.toString();
    const signer = AWSSigV4Signer();
    final scope = AWSCredentialScope(
      region: "eeur",
      service: AWSService.s3,
    );
    const host = '{{accountid}}.r2.cloudflarestorage.com';
    final serviceConfiguration = S3ServiceConfiguration();
    final path = '/{{bucketname}}/$fileName.jpg';
    final uploadRequest = AWSStreamedHttpRequest.put(
      Uri.https(host, path),
      body: image.openRead(),
      headers: {
        AWSHeaders.host: host,
        AWSHeaders.contentType: 'image/jpg',
      },
    );
    final signedUploadRequest = await signer.sign(
      uploadRequest,
      credentialScope: scope,
      serviceConfiguration: serviceConfiguration,
    );
    final uploadResponse = await signedUploadRequest.send().response;
    final uploadStatus = uploadResponse.statusCode;
    if (uploadStatus == 200) {
      return "{{public_link_to_image}}";
    }
    throw Exception("there was an error uploading the image");
  }

static Future<String> uploadPic(File image) async {
    String fileName = DateTime.now().millisecondsSinceEpoch.toString();
    const signer = AWSSigV4Signer();
    final scope = AWSCredentialScope(
      region: "eeur",
      service: AWSService.s3,
    );
    const host = '{{accountid}}.r2.cloudflarestorage.com';
    final serviceConfiguration = S3ServiceConfiguration();
    final path = '/{{bucketname}}/$fileName.jpg';
    final uploadRequest = AWSStreamedHttpRequest.put(
      Uri.https(host, path),
      body: image.openRead(),
      headers: {
        AWSHeaders.host: host,
        AWSHeaders.contentType: 'image/jpg',
      },
    );
    final signedUploadRequest = await signer.sign(
      uploadRequest,
      credentialScope: scope,
      serviceConfiguration: serviceConfiguration,
    );
    final uploadResponse = await signedUploadRequest.send().response;
    final uploadStatus = uploadResponse.statusCode;
    if (uploadStatus == 200) {
      return "{{public_link_to_image}}";
    }
    throw Exception("there was an error uploading the image");
  }

Y

yousef•3/14/24, 11:25 AM

you should fill the {{}}

Y

yousef•3/14/24, 11:26 AM

with your values

J

j.purohit198•3/14/24, 11:26 AM

sure, I will let you know if it works for me or not. Thanks for the help.

Y

yousef•3/14/24, 11:27 AM

oh one more thing

Y

yousef•3/14/24, 11:27 AM

you have to supply your secret acess key and access key id with dart define

J

j.purohit198•3/14/24, 11:27 AM

yes. as env variables.

Y

yousef•3/14/24, 11:27 AM

and of course import both packages

Y

yousef•3/14/24, 11:27 AM

dependencies:
  aws_common: ^0.3.0
  aws_signature_v4: ^0.3.0

dependencies:
  aws_common: ^0.3.0
  aws_signature_v4: ^0.3.0

Jj.purohit198 yes. as env variables.

Y

yousef•3/14/24, 11:28 AM

not in a .env file

Y

yousef•3/14/24, 11:28 AM

but as an argument to build or run

J

j.purohit198•3/14/24, 11:28 AM

okay

Y

yousef•3/14/24, 11:28 AM

flutter run --dart-define=AWS_ACCESS_KEY_ID=... --dart-define=AWS_SECRET_ACCESS_KEY=...

Y

yousef•3/14/24, 11:28 AM

run this in your terminal

Y

yousef•3/14/24, 11:28 AM

and fill in the ... with your values

J

j.purohit198•3/14/24, 11:29 AM

okay.

A

Acejou•3/14/24, 12:13 PM

Hello everyone, my R2 backend seems to be open for public access, but I'm having the same problem with my website, can anyone help me?
I'm using wordpress+Leopard (offload asset).

GET https://pub-91b8ec6f0b2d4a69ad17bf5fa477a0cb.r2.dev/pull-assets/webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)
elementor-icons.min.css:1

Y

yousef•3/14/24, 12:33 PM

are you sure you're using the correct bucket?

I

Isaac McFadyen•3/14/24, 12:39 PM

And if you check in the Cloudflare dashboard under the R2 panel do you actually see that object in the bucket?

Y

yousef•3/14/24, 2:49 PM

@j.purohit198 how did it go

ら

らすきーわん@活動休止•3/14/24, 3:08 PM

What happens if the forever free in r2 exceeds the free range? Will I be charged additionally? Or does it stop writing and reading?

ららすきーわん@活動休止 What happens if the forever free in r2 exceeds the free range? Will I be charged...

T

Tony Leung•3/14/24, 3:08 PM

it will automatically charges you

T

Tony Leung•3/14/24, 3:09 PM

remember the moment you have to add billing info to use R2?

C

Chaika•3/14/24, 3:10 PM

At the end of your billing cycle, you would get charged for any storage/operations over the included/free allocations

T

Tony Leung•3/14/24, 3:10 PM

R2 is pretty cheap tho, except you are storing hundreds Gig a day, the price will be really low

C

Chaika•3/14/24, 3:10 PM

You can setup Usage Based Notifications under Notifications -> Billing for R2 Storage/Class As/Class Bs, so that it would email/warn you before you exceed free allocation as well

TTony Leung it will automatically charges you

ら

らすきーわん@活動休止•3/14/24, 3:10 PM

I see

C

Chaika•3/14/24, 3:11 PM

and you don't get charged anything for cache hits on R2 Custom Domains

T

Tony Leung•3/14/24, 3:11 PM

It takes me 3 - 4 months for CF to charge me a few pennies

CChaika and you don't get charged anything for cache hits on R2 Custom Domains

ら

らすきーわん@活動休止•3/14/24, 3:11 PM

So if the same file receives ddos, does that mean I will not be charged?

ららすきーわん@活動休止 So if the same file receives ddos, does that mean I will not be charged?

T

Tony Leung•3/14/24, 3:12 PM

"free" Egress bro

T

Tony Leung•3/14/24, 3:12 PM

cf should protect you from resource abusing

T

Tony Leung•3/14/24, 3:12 PM

this is not netlify XD

T

Tony Leung•3/14/24, 3:13 PM

unless you are taking advantages of CF, your bandwidth is free

T

Tony Leung•3/14/24, 3:13 PM

serving R2 thru CF CDN will also not violate section 2.8 (serving non-HTML via CF CDN is prohibited) in cloudflare ToS

T

Tony Leung•3/14/24, 3:14 PM

hi guys, my robots.txt cannot be accessed from R2 custom domain. Every file is accessible, except

robots.txt

robots.txt

robots.txt

robots.txt

T

Tony Leung•3/14/24, 3:15 PM

I'm using Zero Trust to protect the bucket, but some of the paths are public to store user's temporally files. I want to setup robots.txt so google don't scrape my bucket

GET for an image is a simple request, it doesn't need CORS.

Similar Threads

Similar Threads

Similar Threads