[$250] Setupguide GIF opens in a new tab instead of downloading

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.1-0 Reproducible in staging?: y Reproducible in production?: y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: @ZhenjaHorbach Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1718985129590909

Action Performed:

1. Open App
2. Open #Admin chat with message from setup specialist
3. Open Setupguide GIF

Press download

Expected Result:

Should be downloaded

Actual Result:

Observe that Setupguide GIF opens in a new tab instead of downloading (In the case of other GIFs, they are downloaded

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/Expensify/App/assets/38435837/a4dffb45-bb2e-47c4-bf79-6be1973058c2

https://github.com/Expensify/App/assets/38435837/378e6142-eedd-403c-b553-2f8de3d0989c

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a6d1396b42cda398
• Upwork Job ID: 1805619156639390094
• Last Price Increase: 2024-07-02

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot[bot]]

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[ZhenjaHorbach]

I reported this issue If necessary, I can help in reviewing proposals

[SrikanthKumarC]

It looks like a CORS issue. Might work using a reverse proxy: https://github.com/Rob--W/cors-anywhere/

Can't seem to force download in client.

In src/libs/fileDownload/index.ts I forced the function to skip the first if block, and tried adding return fetch(url, { mode: 'no-cors' }) but it downloads file with zero bytes.

More info: https://github.com/strapi/strapi/issues/10044, https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors

[melvin-bot[bot]]

📣 @SrikanthKumarC! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~01a6d1396b42cda398

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[SrikanthKumarC]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We are trying to download files from AWS S3 through Cloudfront, but instead of downloading, the files open in a new tab

What is the root cause of that problem?

The issue is caused by browsers blocking CORS.

What changes do you think we should make in order to solve the problem?

The best solution is to add the Access-Control-Allow-Origin header. We can use managed response headers policies to add header in Cloudfront responses.

Additionally, we need to ensure there are no conflicting S3 CORS policies and that only Cloudfront handles the policies. Finally, we must clear the cached Cloudfront headers.

What alternative solutions did you explore? (Optional)

One alternative is to use a reverse proxy, but it is not the best way to address this issue.

[melvin-bot[bot]]

@mollfpr, @bfitzexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[mollfpr]

Will check on this tomorrow!

[bfitzexpensify]

How's this one going @mollfpr?

[bfitzexpensify]

Actually - I think this one is most closely related to #vip-vsb, but we're paused on that, so I'm going to close it for the moment.