What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it?

Netty WebSocket server returns 401, browser unresponsive solution

When using Netty to build a WebSocket server and perform token verification, if the token is invalid, the server returns a 401 status code and closes the connection, but the browser may not react in any way. This article analyzes this problem and provides solutions.

Problem description

Tokens are required to develop WebSocket servers using Netty. When token verification fails, the server returns 401 and closes the connection, but the browser does not respond, and the front-end cannot know the reason for the connection to close. Server-side code example:

 private void httpResponse401(ChannelHandlerContext ctx, FullHttpRequest request) {
    FullHttpResponse response = new DefaultFullHttpResponse(request.protocolVersion(), HttpResponseStatus.UNAUTHORIZED);
    response.headers().set(HttpHeaderNames.CONTENT_LENGTH, 0);
    ctx.writeAndFlush(response).addListener(ChannelFutureListener.CLOSE);
    ReferenceCountUtil.release(request);
}

Front-end JavaScript code:

 var socket = new WebSocket("ws://127.0.0.1:18080/ws?token=xxxx");

Although the server returns 401 and closes the connection, the browser does not respond in any way.

Solution

The browser is unresponsive because the 401 response is ignored during the WebSocket handshake phase. We need to process it during the handshake phase or after the connection is established.

Solution 1: Return 401 response during the handshake phase

In the WebSocket handshake phase (HTTP request phase), if token verification fails, the HTTP 401 response will be directly returned to avoid establishing a WebSocket connection. Modify the server-side code:

 if (!validateToken(request)) {
    FullHttpResponse response = new DefaultFullHttpResponse(HttpVersion.HTTP_1_1, HttpResponseStatus.UNAUTHORIZED);
    response.headers().set(HttpHeaderNames.CONTENT_TYPE, "text/plain; charset=utf-8");
    response.headers().set(HttpHeaderNames.CONTENT_LENGTH, response.content().readableBytes());
    ctx.writeAndFlush(response).addListener(ChannelFutureListener.CLOSE);
    return;
}

Solution 2: Send custom messages after the connection is established

If you need to process 401 after the WebSocket connection is established, you can send a custom message to notify the front end immediately after the connection is established. Add a custom processor in Netty's WebSocketServerProtocolHandler :

 channel.pipeline().addLast(new WebSocketServerProtocolHandler("/ws") {
    @Override
    public void userEventTriggered(ChannelHandlerContext ctx, Object evt) throws Exception {
        if (evt == WebSocketServerProtocolHandler.ServerHandshakeStateEvent.HANDSHAKE_COMPLETE) {
            if (!validateToken()) {
                ctx.writeAndFlush(new TextWebSocketFrame("401 Unauthorized")).addListener(ChannelFutureListener.CLOSE);
            }
        }
        super.userEventTriggered(ctx, evt);
    }
});

Front-end JavaScript code needs to listen for onmessage events:

 socket.onmessage = function(event) {
    if (event.data === "401 Unauthorized") {
        console.log("Connection closed, reason: 401 Unauthorized");
        socket.close();
    }
};

Through the above method, the browser can correctly process the 401 status code, and the front-end can also receive corresponding feedback information, thereby solving the problem of the browser's unresponsiveness. Which solution to choose depends on the specific application scenario and requirements.

The above is the detailed content of What is the reason why the browser does not respond after the WebSocket server returns 401? How to solve it?. For more information, please follow other related articles on the PHP Chinese website!