Websocket fails to connect on Safari due to Content Security Policy
Steps to reproduce
- Install Funkwhale with an Nginx reverse proxy.
- Visit Funkwhale with Safari 15.x. Service worker is installed.
- Refresh the page to use the service worker.
What happens?
Funkwhale component tree is visible but music library never loads.
What is expected?
The app and music library should load.
Context
Funkwhale version(s) affected: 1.2.1
- Safari 15.x
- Nginx
- I'm building and deploying a non-containerized Funkwhale.
In Safari's Web Inspector you'll see:
Refused to connect to wss:///api/v1/activity?token=null because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy.
Followed by exceptions related to the failure; it seems the rejection is unhandled.
Cause
I believe this is w3c/webappsec-csp/issues/7. When evaluating the Content Security Policy for connect-src
, the spec allows 'self'
to also match wss://<host>
, but Safari doesn't implement this exception. This means opening a Websocket at wss://
isn't allowed by default-src 'self'
.
I was able to solve this by explicitly listing my server as a value for the connect-src
directive:
- add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:; worker-src 'self'";
+ add_header Content-Security-Policy-Report-Only "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; object-src 'none'; media-src 'self' data:; worker-src 'self'; connect-src 'self' wss://${FUNKWHALE_HOSTNAME}/";
Comments in that issue indicate Safari 16 will fix this issue, so I don't know if it's worth hacking around it in Funkwhale.
Thank you for a great product :) Sorry if this is a duplicate or invalid, I couldn't find anything about this in your source code or issue tracker. The only reason I noticed Safari isn't working is because my partners use iPhones.