iOS Refused to connect because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy

ios cordova security webkit content-security-policy

24,805

Solution 1

Okay so this is kind of dumb, but OK, i'll keep this answer so future people can see it and don't have to deal with this problem

What I did wrong was:
I had the following head:

<head>
    <meta charset="utf-8" />
    <!--<meta http-equiv="Content-Security-Policy" 
    content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />-->
    <meta http-equiv="Content-Security-Policy" content="
                            default-src * data: blob: ws: wss: gap://ready file://*;
                            style-src * 'unsafe-inline'; 
                            script-src * 'unsafe-inline' 'unsafe-eval';
                            connect-src * ws: wss:;">
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src"/>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Kerst app!</title>
</head>

And I didn't notice that I had the "Content-Security-Policy" meta tag twice
I know right? The duplicate caused iOS to just take the latest one which was more strict. Removed the duplicate, worked the first time around.

And finally the corect Code

<head>
    <meta charset="utf-8" />
    <!--<meta http-equiv="Content-Security-Policy" 
    content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />-->
    <meta http-equiv="Content-Security-Policy" content="
                            default-src * data: blob: ws: wss: gap://ready file://*;
                            style-src * 'unsafe-inline'; 
                            script-src * 'unsafe-inline' 'unsafe-eval';
                            connect-src * ws: wss:;">
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Kerst app!</title>
</head>

Solution 2

Had the same problem, saying 'Refused to connect to blob:[...] because it does not appear in the connect-src directive of the Content Security Policy.'.

Turned out that (unlike you) I did NOT have two instances of Content-Security-Policy, but instead two 'connect-src' instances, with the second one missing 'blob:'

So thanks a lot for pushing me in the right direction!

24,805

Author by

ErikBrandsma

Updated on August 21, 2020

Comments

ErikBrandsma over 3 years
So I made a phonegap app which uses socket.io to do stuff.
I have the following Content-Security-Policy (CSP)
```
<meta http-equiv="Content-Security-Policy" content="
                                default-src * data: blob: ws: wss:;
                                style-src * 'unsafe-inline'; 
                                script-src * 'unsafe-inline' 'unsafe-eval';
                                connect-src * ws: wss:;">
```
When I start the app on safari / iOS I get the following error:
```
Refused to connect to ws://10.0.1.63:3000/socket.io/?EIO=3&transport=websocket&sid=xTaMJwP3rVy3UnIBAAAi 
because it appears in neither the connect-src directive nor the default-src directive of the Content Security Policy.
```
AND:
```
SecurityError (DOM Exception 18): The operation is insecure.
```
The same app with the same CSP works just fine on Chrome / Android but not on Safari / iOS.
I think this has something to do with:
a refined content security policy (WebKit)

Resources that seem to come up a lot:
- The Lounge fails to work over https due to Content Security Policy enforcement in Safari v10
- request isn't sent on iOS 10.0
Why is it saying "Refused to connect to "URL starting with ws:" because it appears in neither the connect-src directive nor the default-src directive of the Content-Security-Policy even though it is mentioned in both?

Okay, safari / iOS is more strict than chrome / Android when it comes to this, all fine, but it still needs to enable me to allow the connection through. This is really frustrating for an app developer! Solutions?

EDIT: Made a bug report on bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=165754
JimiOr2 over 6 years

I only add the first "Content-Security-Policy" and didn't meta tag twice, and this is woking for me and resolved camera not open in iOS.
Mo Zaatar over 5 years

Thanks heaps and heaps! You and this guy here: medium.com/@channaly/… Saved my day on Friday afternoon for location service wasn't working on iOS 12. Adding gap://ready solved the issue
CyberMew over 3 years

Not an expert, but I believe that It's not that it reads the latest line, but instead it reads the most restrictive one, which just so happens that it came last