web-dev-qa-db-fra.com

iOS Refusé de se connecter car il n'apparaît ni dans la directive connect-src ni dans la directive default-src de la politique de sécurité du contenu

J'ai donc créé une application phonegap qui utilise socket.io pour faire des choses.
J'ai la politique de sécurité du contenu (CSP) suivante

<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:;">

Lorsque je démarre l'application sur safari/iOS, j'obtiens l'erreur suivante:

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.

ET:

SecurityError (DOM Exception 18): The operation is insecure.

La même application avec le même CSP fonctionne très bien sur Chrome/Android mais pas sur Safari/iOS).
Je pense que cela a quelque chose à voir avec:
ne politique de sécurité de contenu raffinée (WebKit)

Des ressources qui semblent beaucoup revenir:

Pourquoi dit-il "Refusé de se connecter à" URL commençant par ws: "car elle n'apparaît ni dans la directive connect-src ni dans la directive default-src de la Content-Security-Policy même si elle est mentionnée dans les deux?

D'accord, safari/iOS est plus strict que chrome/Android en ce qui concerne cela, très bien, mais il doit encore me permettre d'autoriser la connexion) C'est vraiment frustrant pour un développeur d'applications! Solutions?

EDIT: fait un rapport de bug sur bugs.webkit.org: https://bugs.webkit.org/show_bug.cgi?id=165754

ioscordovasecuritywebkitcontent-security-policy
10
ErikBrandsma

D'accord, c'est un peu stupide, mais OK, je vais garder cette réponse pour que les futures personnes puissent la voir et n'aient pas à faire face à ce problème

Ce que j'ai mal fait, c'est:
J'avais la tête suivante:

<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>

Et je n'ai pas remarqué que j'avais la balise Meta "Content-Security-Policy" deux fois
N'est-ce pas? Le doublon a amené iOS à prendre le dernier qui était plus strict. Supprimé le doublon, travaillé la première fois.

Et enfin le code corect

<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>
16
ErikBrandsma