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

Question

尝试从浏览器向在本地主机上运行的服务器建立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);
    }

});

但浏览器由于内容安全策略拒绝连接：

内容安全策略：页面的设置阻止了在ws://localhost:9000/myapp（“default-src http://localhost:9000”）加载资源。

我认为在这种情况下向“self”即“localhost”打开websocket连接是可以接受的，但Chrome和FF都拒绝了该连接。我考虑将

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

但它并没有解决问题。

以下是服务器返回的标头：

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

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

- guilhebl

Answer 1

似乎该页面必须使用具有值为default-src http://localhost:9000的Content-Security-Policy响应头进行服务。

考虑到您永远无法在某个地方使用CSP指令来应用比从其他地方应用的更自由的策略，如果在CSP头中具有严格的default-src http://localhost:9000策略，则它将被应用而不是您可能已经在文档中使用元素指定的任何更自由的策略。

请参见CSP规范中有关多个策略的讨论：

影响是将其他策略添加到要执行的策略列表中只能进一步限制受保护资源的功能。

因此，我认为您可能需要更改Content-Security-Policy头的值为default-src http: ws: connect-src ws:。您不能仅使用元素来完成此操作。

- sideshowbarker