Kevin Powell - Community•2mo ago

How to get around CSP during testing (WebSocket)

I have a simple websocket server that simply alerts each connected user every time a new user joins the server. I cannot connect to the server because I keep getting CSP violations. When running this code in the console: let ws = new WebSocket("ws://localhost:8080"); I get these errors: Chrome:

Refused to connect to 'ws://localhost:8080/' because it violates the following Content Security Policy directive: "connect-src chrome://resources chrome://theme 'self'".

Firefox:

Content-Security-Policy: The page’s settings blocked the loading of a resource (connect-src) at ws://localhost:8080/ because it violates the following directive: “connect-src https:”

I have tried extensions to disable the CSP. I've tried things like: connect-src 'self' ws://localhost:8080; window.open('about:blank').document.write('<script>document.body.style.display="none";</script>'); and more but I've had no luck at all. I don't know what else to try. Any ideas? Thanks See server code:

const http = require("http");
const WebSocketServer = require("websocket").server;
let connections = [];

const httpserver = http.createServer();

const websocket = new WebSocketServer({ httpServer: httpserver });

httpserver.listen(8080, () => console.log("My server is: 8080"));

websocket.on("request", (request) => {
  const connection = request.accept(null, request.origin);
  connection.on("message", (message) => {
    connections.forEach((c) => c.send(`User${connection.socket.remotePort} says: ${message.utf8Data}`));
  });

  connections.push(connection);
  connections.forEach((c) => c.send(`User${connection.socket.remotePort} just connected.`));
});

const http = require("http");
const WebSocketServer = require("websocket").server;
let connections = [];

const httpserver = http.createServer();

const websocket = new WebSocketServer({ httpServer: httpserver });

httpserver.listen(8080, () => console.log("My server is: 8080"));

websocket.on("request", (request) => {
  const connection = request.accept(null, request.origin);
  connection.on("message", (message) => {
    connections.forEach((c) => c.send(`User${connection.socket.remotePort} says: ${message.utf8Data}`));
  });

  connections.push(connection);
  connections.forEach((c) => c.send(`User${connection.socket.remotePort} just connected.`));
});

3 Replies

ἔρως•2mo ago

websockets aren't available from chrome:// protocols and the firefox one seems to be requiring that you use https instead of http also, try sending this value from the http server, JUST FOR TESTING: https://stackoverflow.com/a/51067035

garethmoore.•2mo ago

Thanks for your response bro. I was able to get around it by testing it from the same domain. localhost:8080 and the websocket on localhost/8080/ws. Just starting the backend stuff and this is all very confusing.

ἔρως•2mo ago

websockets are a major pain in the ass from a backend perspective, it starts an http request and then swaps to the websocket protocol so, everything has to play very nicely, and it SUCKS the fact that you got it working is pretty awesome

Gaming

Programming

How to get around CSP during testing (WebSocket)