search

Baroshem / nuxt-security

šŸ›” Automatically configure your app to follow OWASP security patterns and principles by using HTTP Headers and Middleware
https://nuxt-security.vercel.app/
MIT License
737 stars 56 forks source link

SRI breaks the application on mobile devices #453

Closed GalacticHypernova closed 1 month ago

GalacticHypernova commented 1 month ago

Version

nuxt-security: ^2.0.0-beta.5 nuxt: ^3.10.3

Reproduction Link

N/A. I have spoken with @Baroshem on the matter and we have decided to start with a mere explanation about the bug and without a reproduction, since the nuxt-security playground is also broken on mobile devices (which could be for the same, or a similar, reason) and the bug happened within a closed source project.

Steps to reproduce

Don't disable SRI, go to the app on mobile, and you should be met with an error page that it failed to load the dynamically imported module.

What is Expected?

SRI should work fine and not break the app on mobile devices.

What is actually happening?

SRI is breaking the app on mobile devices (desktop works fine)

vejja commented 1 month ago

Hi @GalacticHypernova Can you give more details about the circumstances under which SRI fails on mobile, a log of the errors reported by the browser, or a reproducible example ? The documentation page of Nuxt Security is deployed with SRI and works fine on mobile devices. Iā€™d like to understand why it works on that deployment but not on another one ?

GalacticHypernova commented 1 month ago

Hey @vejja , the details about the issue are pretty vague as mobile devices don't have dev tools enabled by default and I am trying to connect to my phone from my PC to debug it remotely, but from what I gathered so far I saw a couple things:

  1. SRI causes the app to fail with an error message stating "failed to fetch dynamically imported module website.com/_nuxt/index.[file hash].js", but the file does load when going to the file URL directly. There don't seem to be any conditions that affect it, it's either it's left on from the default configuration and then the app fails in production, or it's overriden and then the app works as expected.
  2. Regarding the errors, I don't have them currently due to what I said, but I did notice that when checking the site performance using lighthouse (https://pagespeed.web.dev), at least according to the snapshots it provided, it didn't seem to fail. When trying to enter it on a "real" mobile device it does however. This was tested on 2 separate mobile devices and across mobile browsers.
  3. The stackblitz playground is also broken on mobile devices so I could not create a reproduction yet. I have tried changing some settings as seen in the screenshot below in order to try and make a reproduction but without luck. image
vejja commented 1 month ago

Which browser are you using for the stackblitz playground ?

GalacticHypernova commented 1 month ago

I tried using chrome for the stackblitz playground, the actual app where it failed was tested on chrome and edge

vejja commented 1 month ago

ok Chrome is fine can you set crossOriginEmbedderPolicy to credentialless so that stackblitz will get correct isolation ?

GalacticHypernova commented 1 month ago

Just did, still doesn't seem to load correctly image

May be worth noting that the playground does work on desktop, which is why I'm inclined to believe the 2 issues may at the very least be connected.

vejja commented 1 month ago

Do you have enabled : false also ?

GalacticHypernova commented 1 month ago

Yes, I tried disabling it, but I think because there's no ctrl + s combination on mobile devices the changes can't get applied and therefore it doesn't do anything. Could the playground be updated temporarily to test this out or is that not possible?

vejja commented 1 month ago

If you have enabled : false, the module is completely disabled. What's your testing setup ? Is the playground running on mobile here ?

GalacticHypernova commented 1 month ago

If you have enabled : false, the module is completely disabled.

That's if the changes actually apply, which they don't seem to, considering it's still stating that. The playground is ran on mobile here, and the testing setup is the barebones project just with sri set to false to try and make a reproduction

vejja commented 1 month ago

I'm not sure stackblitz can run on mobile. https://developer.stackblitz.com/platform/webcontainers/browser-support

Can you run stackblitz on desktop and connect your mobile via local network. Then launch the dev tools on your desktop to observe the mobile logs

GalacticHypernova commented 1 month ago

That's what I'm gonna have to try, I'll retry connecting my phone and see how it goes.

vejja commented 1 month ago

Ok Also you said SRI failed on mobile in production How do you deploy? Which hosting provider are you using?

FYI I'm asking because failed to fetch dynamically imported module sounds like a cache miss at first sight

GalacticHypernova commented 1 month ago

How do you deploy? Which hosting provider are you using

My apologies, this was a slightly misleading statement. I haven't tested in dev mode yet as I'm deploying on a self hosted server (not server less, full ssr)

GalacticHypernova commented 1 month ago

@vejja ~I have made some more testing (of the actual app, not stackblitz), and found a few more things: Let's say my mobile device is phone A, and the other mobile device is phone B. When I attached phone A to my desktop and launched the debugger with the devtools instance (made sure to rebuild the app), it briefly fixed SRI for both phone A and B. Now, phone A works perfectly fine with SRI, but phone B is once again broken.~

Update: turns out in phone B's case clearing the cache fixed the issue after debugging phone A. This means that somehow, attaching a local debugger to phone A fixed a global issue on a completely isolated and separated server for both phones A and B. How? I have no idea.

vejja commented 1 month ago

Which server are you using? And is your app a PWA?

Also, what did the mobile logs say?

GalacticHypernova commented 1 month ago

Using a self hosted server by ultahost (I believe at least), the app is not a PWA. As stated above, I couldn't check mobile logs because as soon as I attached the local debugger to my device it somehow fixed it for every mobile device on the server level (as I said, no idea how)

vejja commented 1 month ago

Sounds more like a cache issue than an SRI issue Shall we close or do you want to keep open?

GalacticHypernova commented 1 month ago

Yea we can close it, sorry about that! I'm not entirely sure it was a cache issue considering it was across different devices and different browsers which guaranteed at least one of the times it would be fresh data, and it definitely doesn't explain the local debugger fixing the global issue, but at least it works now. Thanks a lot for the help!

Baroshem commented 1 month ago

Hey guys,

Thanks for extensive research. I completely missed this issue yesterday due to other tasks.

Great that together you have found a solution! šŸŽ‰