All geek questions in one place

IOS Connection refused because it is not specified in either the connect-src directive or the default-src directive of the content security policy

So, I made a phonegap application that uses socket.io to work.
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 run the application 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 application with the same CSP works fine on Chrome / Android, but not on Safari / iOS.
I think this has something to do with:
Advanced Content Security Policy (WebKit)

Resources that seem to come a lot:

Why does he say "Refusal to connect to a URL starting with ws:" because it is not specified in either the connect-src directive or the default-src directive of the Content-Security-policy, even if it is mentioned in both ?

Ok, Safari / iOS is more restrictive than Chrome / Android, when it comes to that, everything is fine, but I still need to allow me to connect. It really upsets the application developer! Solutions?

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

+6
source share
1 answer

Okay, so this is a little stupid, but okay, I will keep this answer so that future people can see it and do not have to deal with this problem.

What have I done wrong:
I had the following chapter:

 <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 for sure? The duplicate made iOS just take the latest version, which was more strict. Removed the duplicate, worked for the first time.

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>
+8
source

Source: https://habr.com/ru/post/1013091/

More articles:


All Articles