web-dev-qa-db-ja.com

iOSは、コンテンツセキュリティポリシーのconnect-srcディレクティブにもdefault-srcディレクティブにもないため、接続を拒否しました

そこで、socket.ioを使用して何かを行う電話ギャップアプリを作成しました。
次の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:;">

Safari/iOSでアプリを起動すると、次のエラーが表示されます。

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.

そして：

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

同じCSPの同じアプリはChrome/Androidで正常に機能しますが、Safari/iOSでは機能しません。
これは次のことと関係があると思います：
洗練されたコンテンツセキュリティポリシー（WebKit）

たくさん出てきそうなリソース：

Content-Security-Policyのconnect-srcディレクティブとdefault-srcディレクティブの両方に記載されているにもかかわらず、両方とも記載されているため、「wsで始まるURLへの接続が拒否されました」と表示されるのはなぜですか？

さて、サファリ/ iOSはchrome/Androidこれよりも厳しいですが、接続を許可できるようにする必要があります。これは、アプリ開発者にとって本当にイライラします！ソリューション？

編集：bugs.webkit.orgでバグレポートを作成しました： https://bugs.webkit.org/show_bug.cgi?id=165754

ioscordovasecuritywebkitcontent-security-policy
10
ErikBrandsma

わかりましたので、これはちょっとばかげていますが、わかりました。今後の人々がそれを見ることができ、この問題に対処する必要がないように、私はこの答えを保持します

私が間違ったことは：
私は次の頭を持っていました：

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

「Content-Security-Policy」メタタグが2回あることに気付きませんでした
私は当然知っている？複製により、iOSはより厳密な最新のものを取得するようになりました。重複を削除し、初めて作業しました。

そして最後に正しいコード

<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