bug: Images not loading on web due to CORS policy

[xkaper001]

🐛 Describe the bug

Description:

There are images in the Flutter app that aren't loading (details below) on the web due to CORS policy restriction. These images are hosted by a user who created the project, as these are from the user's firebase storage, and although it's an open-source project, the images are not accessible.

This bug is only on the web due to CORS policy. The mobile version works fine.

Steps to Reproduce

1. Setup your project in firebase.
2. Change the necessary code to run the app smoothly in the codebase.
3. Run the app on web.
4. Signup for a user.
5. login
6. You see the avatar and the monuments cover image doesn't load.

Video Preview of the bug

bug_monumento.mp4

Cause of issue.

1. In lib/utils/constants.dart,

const defaultProfilePicture =
    "https://firebasestorage.googleapis.com/v0/b/monumento-277103.appspot.com/o/profilePictures%2Faccount_avatar_profile_user_icon%20.png?alt=media&token=672ef7b9-7f53-415f-8040-0c93c61e01b8";

this line points to the default user profile image, which when opened on mobile or directly via link opens fine but is blocked on the web due to CORS policy of the firebase hosted account. which issue the contributors when running on their machine.

2. In lib/scripts/populate_monuments.js

      "image":
          "https://firebasestorage.googleapis.com/v0/b/monumento-277103.appspot.com/o/monuments%2FRushmore.png?alt=media&token=a33ee419-70ae-4c2c-bd20-091ff49f668f",
      "image_1x1_":
          "https://firebasestorage.googleapis.com/v0/b/monumento-277103.appspot.com/o/monuments%2FRushmore.png?alt=media&token=a33ee419-70ae-4c2c-bd20-091ff49f668f",

Similar to cause 1, this is a part of script populate_monuments.js updates these links to the testing user's firebase, which causes the same error.

Proposed Solution

1. Host images on a public server for these test images. (Recommended)

This includes hosting images on sites like imgBB which allows permanent hosting of images also allowing to embed them. It works for our use case. (tried and tested)

2. Enable CORS Policy on the Admin's Firebase Console. (Not Recommended)

As AOSSIE, an open-source community working on an open-source project, we should use avoid using ways which may increase dependance on any object such as this Image hosting.

[xkaper001]

Hey @mdmohsin7 I have worked upon this issue making required changes and testing them this is the outcome of my research and testing

hosting the images to this url and then using in the app solves this issue.
Hosted images:

• https://i.ibb.co/FqJb4vs/image.png
• https://i.ibb.co/wBZ47PN/image.png

bug_fixed_monumento.mp4

[xkaper001]

Please assign me this issue so I can open a PR regarding the fix.

[xkaper001]

Same goes for these images as well at lib/scripts/populate_monuments.js

• https://regal-holidays.net/wp-content/uploads/2019/07/hawa-mahal-441563_1920.jpg
• https://regal-holidays.net/wp-content/uploads/2019/07/architecture-3187940_1920.jpg

Monumento.-.Google.Chrome.2025-01-23.20-06-58.mp4

[HelloSniperMonkey]

hey @xkaper001 what command are you using to run the app ?

are you using flutter run and then selecting chrome to run your app ? or using the start debugging code in vs code ?
if that is the case then it is understandable because by default the flutter run command is invoked in both cases and it uses canvaskit by default which has some cors issue with images
stackoverflow article : https://stackoverflow.com/questions/35020259/why-cors-on-images-with-html-canvas

you can change the web render by flutter run --web-renderer=html here most of your issue will be resolved related to cors

if you want to provide a solution on this matter it would be highly appreciated if you provide a more robust and fool-proof solution than changing the image hosting url

a better approach would be

you can change the default behaviour of using canvaskit to html by using a shell script like .sh file for linux and macos and .bat file for windows

[HelloSniperMonkey]

if you need help with flutter commands you can always use flutter --help and flutter run --help is helpful for changing runtime variables you will also find the web-render flag from flutter run --help

[HelloSniperMonkey]

Timeline.1.mp4

this is the result when using flutter run --web-renderer=html in vs code terminal

[xkaper001]

hey @HelloSniperMonkey, I recently tried using the HTML renderer But realized that we were developing with "deprecated HTML renderer" rather than CanvasKit. I proposed a "simple fix" that could resolve this issue when using Canvaskit but ig that was lame of me.

Also, regarding your approach/solution to this issue, my thoughts don't fully align with it, Working on fixing "x" on a deprecated HTML renderer doesn't seem ideal.

Instead, I suggest another approach - uploading the image to Firebase storage and then linking it to monuments in Firestore or using it as a default picture. I could add another script in lib/scripts. So that all the resources remain in the same pool rather than being dependent on another image hosting.

Your thoughts on this?

[HelloSniperMonkey]

The thing is firebase storage requires a paid plan and if you have been following the discord channel there is a discussion to migrate from firebase to pocketbase or appwrite so it would be helpful to prepare accordingly

[xkaper001]

Yes, I was part of that conversation, and that's mentioned too. However, this approach doesn't have to rely solely on Firebase. When migrating, We could tweak it to work with PocketBase or Appwrite by utilizing their respective admin SDKs.