App: Web- Log in - Console error appears when navigating to URL staging.new.expensify.com
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Action Performed:
1`. Open the Incognito Chrome window 2. Open the developer tool - Console tab 3. Start typing staging.new.expensify.com
Expected Result:
No console error appears when navigating to URL staging.new.expensify.com
Actual Result:
Console error appears when navigating to URL staging.new.expensify.com
Workaround:
Unknown
Platform:
Where is this issue occurring?
- Web
Version Number: 1.2.30
Reproducible in staging?: Yes
Reproducible in production?: Yes
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal team
Slack conversation:
Upwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~01eba349425aecac1a
- Upwork Job ID: 1597883184108761088
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 28 (22 by maintainers)
I am going to close this and reopen in an internal repo
There’s an article here regarding the nonce-based solution, trying to understand what that would look like for us
Reading up here, I think that the hash solution is probably out because it would require us to update the CSP any time we update the splash screen JS
Thanks for reporting and investigating. I noticed this the other day and knew immediately it had to do with the splash screen. I’m not sure why this wasn’t flagged as part of the QA of https://github.com/Expensify/App/pull/12334, because it doesn’t work on staging or production due to this CSP. Maybe I just missed it but this should’ve been flagged as a QA failure either in the PR or linked issue. Incidentally, the splash screen doesn’t work correctly on dev either 😓.
No, I don’t think we should remove the
html-inline-script-webpack-pluginpackage. It’s important that the JS for the splash screen is included inline in index.html, that’s how we ensure that it’s rendered as early as possible while other resources are loading.So I think we need to adjust the CSP to allow inline scripts to run. According to https://content-security-policy.com/examples/allow-inline-script/, we can either:
Not sure exactly what that means in practice
Oh nice, I saw that line as well but just assumed that is what is added when the app is built as it was quite giberrish. Nice find 🙇
@mountiny I looked in the console where it was throwing the error when looking at the code I saw a bunch of inline JS code and I realized that might the reason it is showing the error because we don’t allow that in our CSP rule so to trace it back I looked in
index.htmlfor web and went through the recent commits to the file to see if we added any inline script and found the above PR.This @rushatgabhane https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP#:~:text=Content Security Policy (CSP) is,site defacement%2C to malware distribution.
Niiiice, thanks @techievivek!
Out of curiosity and so I can learn too, did you just search for some inline/script changes or how did you know what specific change/package to look for?
This is open for proposals, the fix I have tried above did not work. I am 90% sure this is not related to our backend CSP set up and this needs to be fixed in App but I dont know well enough what to do here except the fix I already tried and it did not work