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

Question

所以，我正在为我的后端使用 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")

我收到一个错误：

Content Security Policy: The page’s settings blocked the loading of a resource at ws://localhost:8080/ (“connect-src”).

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

Answer 1

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

in my browser console I run this

那么，问题来了。新选项卡，或任何你运行这个选项卡，可能已经阻止了这个请求以防止 XSS 或类似的东西。使这项工作最简单的方法是将元标记 <meta http-equiv="Content-Security-Policy" content="connect-src 'ws://localhost:8080';"> 添加到 HTML 页面或运行本地服务器。

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

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

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

Websocket connection fails on localhost because of Content Security Policy?

javascript

node.js

websocket

content-security-policy