DOSAYGO Studio

Devtoolium: Secure Remote Debugging

By Cris, September 22, 2021

Remote debugging exposes browser internals, risking unauthorized access. I secured this with Devtoolium, adding an authentication proxy to the Chrome DevTools Protocol (CDP) using WebSockets and token-based authentication with secure cookies. In the web’s labyrinthine code, Devtoolium is a torch, illuminating hidden paths while guarding against intruders.

The proxy intercepts WebSocket connections, validating random hex tokens in cookies before forwarding commands, and modifies responses (e.g., redirecting chrome://newtab to about:blank) for compatibility.

const wss = new WebSocket.Server({ server });
wss.on('connection', (ws, req) => {
  const cookie = req.headers.cookie;
  const authorized = cookie && cookie.includes(`${COOKIENAME+SERVER_PORT}=${COOKIE}`);
  if (authorized) {
    const url = `ws://localhost:${CHROME_PORT}${req.url}`;
    const crdpSocket = new WebSocket(url);
    SOCKETS.set(ws, crdpSocket);
    ws.on('message', msg => crdpSocket.send(msg));
    crdpSocket.on('message', msg => ws.send(msg));
    ws.on('close', () => crdpSocket.close(1001, 'client disconnected'));
    crdpSocket.on('close', () => ws.close(1011, 'browser disconnected'));
  } else {
    ws.send(JSON.stringify({error: 'Not authorized'}));
    ws.close();
  }
});

This code authenticates WebSocket connections with secure cookies, ensuring safe debugging. Devtoolium’s balance of access and protection is its strength.

Devtoolium interface: a glowing torch illuminating a dark, intricate browser pathway, with debugging tools visible

Creating Devtoolium was like forging a key for a locked vault, granting access only to the worthy. At DOSAYGO, we prioritize trust, building tools that empower safely. Devtoolium is a beacon for developers, guiding them through the browser’s depths with confidence.