由于内容安全策略，本地主机上的 Websocket 连接失败？答案

【问题标题】：Websocket connection fails on localhost because of Content Security Policy?由于内容安全策略，本地主机上的 Websocket 连接失败？
【发布时间】：2022-01-04 12:45:17
【问题描述】：

所以，我使用ws 包作为我的后端，这是我从入门页面复制的服务器：

import { WebSocketServer } from 'ws'

const wss = new WebSocketServer({ port: 8080 })

wss.on('connection', function connection(ws) {
  ws.on('message', function message(data) {
    console.log('received: %s', data)
  })

  ws.send('something')
})

现在，在我的浏览器控制台中运行：

const socket = new WebSocket("ws://localhost:8080")

我收到一个错误：

内容安全政策：页面的设置阻止加载 ws://localhost:8080/（“connect-src”）的资源。

我进行了一些谷歌搜索，似乎连接应该是安全的才能正常工作？但是，MDN 和其他来源并没有在任何地方提及它。难道我做错了什么？如有任何帮助，我将不胜感激。

【问题讨论】：

您不需要 WebSockets 的安全上下文。其他东西可能会阻止ws://localhost:8080。也许是 CORS？
@IvanRubinson 谢谢，我会调查的。

标签： javascript node.js websocket content-security-policy

【解决方案1】：

此错误是由于内容安全政策 (mdn) 造成的，因为它是写在那里的。如果您在运行本地服务器并在其中尝试此操作，它会成功的。

在我的浏览器控制台中运行这个

所以，这里有一个问题。新选项卡或您运行此选项卡的任何位置可能已阻止此请求以防止 XSS 或类似情况。最简单的方法是将元标记 <meta http-equiv="Content-Security-Policy" content="connect-src 'ws://localhost:8080';"> 添加到 HTML 页面或运行本地服务器。

【讨论】：

谢谢，但由于某种原因它对我不起作用。也许还有其他问题需要我调查。
您是否尝试运行本地服务器？
从本地服务器运行它帮助我解决了这个问题。从控制台建立 websocket 连接会导致 CSP 问题。不过我不需要你提到的元标记。

【解决方案2】：

由于某种原因，在浏览器控制台中创建 websocket 连接失败，但是，在我使用脚本创建了一个简单的 html 页面后，它可以正常工作：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const socket = new WebSocket('ws://localhost:8080')
    console.log(socket)
  </script>
</html>

我希望它可以为其他人节省一些时间。

【讨论】：