Javascript 创建 WebSocket 连接被拒绝 - 内容安全

Question

尝试在 localhost:9000 上打开从浏览器到服务器运行的 WebSocket 连接，这是我的 JS 代码：

$( document ).ready(function() {

    var url = "ws://localhost:9000/myapp";
    var connection = new WebSocket(url);

    connection.onopen = function() {
        console.log('WebSocket Open');
    };
    connection.onerror = function(error) {
        console.log('WebSocket Error ', error);
    };
    connection.onmessage = function(event) {
        console.log('WebSocket Msg ', event);
    }

});

但是由于 Content-security 策略，浏览器拒绝接受连接：

Content Security Policy: The page's settings blocked the loading of a resource at ws://localhost:9000/myapp ("default-src http://localhost:9000").

我认为在这种情况下 "localhost" 打开到 "self" 的 websocket 连接是可以接受的，但 Chrome 和 FF 都拒绝连接。我想放置

<meta http-equiv="Content-Security-Policy" content="default-src http: ws: connect-src ws:">

但这并没有解决问题。

这些是服务器返回的headers：

HTTP/1.1 200 OK
Referrer-Policy: origin-when-cross-origin, strict-origin-when-cross-origin
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff
Content-Security-Policy: default-src 'self'
X-Permitted-Cross-Domain-Policies: master-only
Date: Sat, 24 Jun 2017 03:39:10 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 2130

什么可能导致连接被拒绝？

Answer 1

似乎该页面必须使用 Content-Security-Policy 响应 header 提供，其值中包含 default-src http://localhost:9000。

鉴于您永远无法在某处使用 CSP 指令来应用 more-liberal 政策而不是从其他地方应用的政策，如果您在 CSP header 中有严格的 default-src http://localhost:9000 政策, 它将被应用，而不是您可能在文档中使用 meta 元素指定的任何 more-liberal 策略。

见the discussion about multiple policies in the CSP spec:

The impact is that adding additional policies to the list of policies to enforce can only further restrict the capabilities of the protected resource.

所以我认为您可能需要将 Content-Security-Policy header 的值更改为 default-src http: ws: connect-src ws:。你不能只用一个 meta 元素。

Javascript 创建 WebSocket 连接被拒绝 - 内容安全

Javascript create WebSocket connection refused - content security

javascript

websocket

connection

content-security-policy

connection-refused