[HOLD for payment 2024-06-06] [$250] Video previews aren't showing in Chat

[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:
Reproducible in staging?: No
Reproducible in production?: Yes
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: @zsgreenwald
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1715628266876699

Action Performed:

1. Log into new.expensify.com in an incognito window using a new test account
2. Join this public room - https://new.expensify.com/r/6879144773653084
3. Scroll up to any of the videos posted above, and confirm

Expected Result:

Video preview is showing

Actual Result:

No video preview is showing
Console log : ReportActionItemParentAction.tsx:89 Refused to connect to 'https://staging.expensify.com/chat-attachments/4636818444356617466/w_af6e0c71ddb0b6f594b3c410b2e20eb74235b764.jpg' because it violates the document's Content Security Policy.

Workaround:

unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Recording.50.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016f0c3af56df70306
• Upwork Job ID: 1791541183992836096
• Last Price Increase: 2024-05-17
• Automatic offers:
• situchan | Reviewer | 102436262

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (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.

[alexpensify]

On my testing list, I'll review soon.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~016f0c3af56df70306

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @slafortune (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.

[alexpensify]

Heads up, I will be offline until Tuesday, May 28, 2024, and will not actively watch over this GitHub during that period.

@slafortune - I need help here to ensure that we get proposals and they are reviewed. I'm trying to avoid this one going stale. Thanks!

[dominictb]

Proposal

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

No video preview is showing
Console log : ReportActionItemParentAction.tsx:89 Refused to connect to 'https://staging.expensify.com/chat-attachments/4636818444356617466/w_af6e0c71ddb0b6f594b3c410b2e20eb74235b764.jpg' because it violates the document's Content Security Policy.

So the "Content Security Policy" error happens for the video thumbnail URL.

What is the root cause of that problem?

When we upload a video, the thumbnail URL will be of the format https://www.expensify.com/chat-attachments/..., which will use https://www.expensify.com as the domain

Video URL, and image URL will also use that domain.

But when we get the video URL, or get the image URL, we will resolve it to the current root URL first by using tryResolveUrlFromApiRoot, this is to make sure the media assets will be loaded from the current app domain, avoiding the Content Security Policy that will happen if we try to load assets from a different domain.

However, we're not doing that for the video thumbnail URL

App/src/components/HTMLEngineProvider/HTMLRenderers/VideoRenderer.tsx

Line 21 in e8ae3c5

const thumbnailUrl = htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_URL_ATTRIBUTE];

.

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

In this line, use tryResolveUrlFromApiRoot to resolve the video thumbnail URL to the root domain before displaying

const thumbnailUrl = tryResolveUrlFromApiRoot(htmlAttribs[CONST.ATTACHMENT_THUMBNAIL_URL_ATTRIBUTE]);

We generally need to do so when using any media assets URL.

What alternative solutions did you explore? (Optional)

NA

[situchan]

From my testing, video preview shows on staging (https://staging.new.expensify.com/) but not on prod (https://new.expensify.com/).
@dominictb do you experience the same?

[dominictb]

@situchan Yes I also see the same, perhaps staging has a different object domain/security policy config.

But it doesn't work in both prod and dev (and works fine after the fix)

[situchan]

@dominictb's proposal looks good to me.
🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @rlinoz, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[rlinoz]

I got the same problem in staging, you have to upload the video from prod and open the same chat in staging, then a similar problem arises.

But yeah, the solution looks good!

[melvin-bot]

📣 @situchan 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @dominictb You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[slafortune]

@alexpensify I will be out until June 4th, but with you being back on the 28th, this BZ report is in a good spot with a proposal accepted, I'm just going to unassign myself.

[alexpensify]

Thanks @slafortune! It looks like we are moving forward here.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.77-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: resolve root url for video thumbnail #42570

If no regressions arise, payment will be issued on 2024-06-06. 🎊

For reference, here are some details about the assignees on this issue:

• @situchan requires payment automatic offer (Reviewer)
• @dominictb requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@situchan] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@situchan] Determine if we should create a regression test for this bug.
• [@situchan] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: