How do i fix Error 403 when use SSE connection EventSource?

Question

BackEnd: Spring security JWT,

@CrossOrigin(origins = "http://localhost:4444", allowCredentials = "true")
    @GetMapping("/")
    public Flux<ServerSentEvent<List<UserResponse>>> getAll() throws CancelQueryException {
        return Flux.interval(Duration.ofSeconds(3))
                .flatMap(sequence -> {
                    List<UserResponse> data = null;
                    try {
                        data = userService.getAllUsers();
                        System.out.println("data: " + data);
                    } catch (CancelQueryException e) {
                        //   LOGGER.error("Error occurred while retrieving users", e);
                        throw new RuntimeException(e);
                    }
                    return Mono.just(ServerSentEvent.<List<UserResponse>>builder()
                            .id(String.valueOf(sequence))
                            .event("update")
                            .data(data)
                            .build());
                });
    }

FrontEnd: React

useEffect(() => {
    const token =
      "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJld2ZhZXJnZSIsImlhdCI6MTY4ODEwNTg4MCwiZXhwIjoxNjg4NzEwNjgwfQ.V3d_1n7QElQZpPshH_UkkR707sLJlxqz7fYmqSJ3V-4";
    const config = {
      withCredentials: true,
      headers: {
        Authorization: `Bearer ${token}`,
      },
    };
    const url = "http://localhost:8558/monitoring-location/api/v1/admin/user/";
    try {
      const eventSource = new EventSource(url, config);

      eventSource.onmessage = (event) => {
        const receivedEvent = JSON.parse(event.data);
        console.log(receivedEvent);
      };
      console.log("running");

      return () => {
        console.log("close connecttion");
        eventSource.close(); // Đóng kết nối SSE khi component bị hủy
      };
    } catch (error) {
      console.log("error ----", error);
    }
  }, []);

token is correct, but response is ERROR 403

please help me, thanks

I am using the SSE protocol to send data from the server to the FE, but I am getting error 403

score 0 · Answer 1 · answered Jun 30 '23 at 16:48

In const eventSource = new EventSource(url, config); the only acceptable thing that can go in config is withCredentials.

So your addition of headers:{...} is being ignored.

According to https://stackoverflow.com/a/36226251/841830 (me, from 7 years ago) you need to use cookies for your authentication.

However from https://stackoverflow.com/a/31958864/841830 (which links to https://www.rfc-editor.org/rfc/rfc6750) it sounds like you can also put a Bearer token in the URL itself. And, in fact, the other answer on the above question said that is what they ended up doing, and then rely on SSL to keep things secure.

But that is not 100% secure, so you need to do your own risk assessment; section 5 of the above RFC says:

Don't pass bearer tokens in page URLs: Bearer tokens SHOULD NOT be passed in page URLs (for example, as query string parameters). Instead, bearer tokens SHOULD be passed in HTTP message headers or message bodies for which confidentiality measures are taken. Browsers, web servers, and other software may not adequately secure URLs in the browser history, web server logs, and other data structures. If bearer tokens are passed in page URLs, attackers might be able to steal them from the history data, logs, or other unsecured locations.

How do i fix Error 403 when use SSE connection EventSource?

1 Answers1