I have a LiveView site that keeps refreshing when the connection is almost completed within the iOS instagram browser. Navigating around the site still works, but there is a problem with a live component working with a phx-click. This is giving me the idea that the socket is not establishing.
The problem does not occur when using mobile brave or safari. And the site runs smooth on the desktop.
Anyone has general pointers what i should do?
Adjust the http headers?
Adjust the endpoint.ex file?
Or let it be and figure out how to force a message to display a link to redirect the site to be viewed on a phone’s default browser?
And no i have not tried seeing if it happen’s in another social media app’s built in browser. But probably the same thing happens if a web socket isn’t allowed to be fully be established within the app’s internal browser, no?
Pretty lost at this point, any tips and tricks will help. Thanks in advanced.
Is it online anywhere to see? Have you also updated liveview to the latest version? I remember vaguely having a reloading issue myself, but it was not iOS specific.
I can reproduce the issue on Safari for Mac, so it does not seem to be a problem with the Instagram in-app browser only.
One thing I notice is this error:
Refused to connect to wss://garageratz.com/live/websocket?_csrf_token=...
...because it does not appear in the connect-src directive of the Content Security Policy.
I think the problem is that Phoenix LiveView JS fails to connect to the channel due to a CSP violation, and therefore triggers a reload after a timeout. The violation seems to be that your Content-Security-Policy header contains connect-src 'self';. According to MDN:
‘self’ Refers to the origin from which the protected document is being served, including the same URL scheme and port number.
So wss://garageratz.com/... is disallowed, because it uses a different URL scheme than https://garageratz.com.
Note that Chrome is more permissive than Safari when it comes to CSP, which explains why the issue does not occur on Chrome. See this issue for details.
Thanks for the quick response. I updated the connect-src to be connect-src 'self' wss://garageratz.com, but the problem is still reoccuring in instagram, but on other browsers it is working fine. Sadly i have no way to test it out on a mac…
I am unable to see any issue on Safari 14.2 unfortunately. You could try something like https://www.browserstack.com/ if you don’t have access. I’ve not used it personally though, cant say if its worth the time (and money) or not.
Do you have the correct host, scheme and port set in your config/runtime|prod.exs?
I _dont_ think this would be the actual issue here (you (should?) would see other browsers misbehaving), but you never know with browsers TBH.
Can you see the user agent logs from an instagram request? Might give you a clue as to which webkit/safari build to check into.
Also does is occur when running on your dev machine? (Probably need to make a burner account to point to your local network address to test this in the app.)
I can confirm that on Safari for Mac now the websocket connects fine, and the page does not reload anymore. I do not have Instagram myself, so I cannot check there, but the CSP issue seems fixed. If the reload still happens on Instagram, it could be a bug specific to that context.
