Home » Java » Spring Boot Websocket Security with Angular 5

Spring Boot Websocket Security with Angular 5

Posted by: admin August 11, 2018 Leave a comment

Questions:

I am trying to implement websockets in my SpringBoot + Angular 5 application.
I followed this tutorial. The code works fine without spring security. But doesn’t work with Spring Security. I posted the same question here. The comment didn’t help much. I am still getting these errors on the client

Firefox can’t establish a connection to the server at wss://localhost/socket/446/qvjiwvgt/websocket.

Firefox can’t establish a connection to the server at https://localhost/socket/446/kwabmpm0/eventsource.

Error: Incompatibile SockJS! Main site uses: "1.1.5", the iframe: "1.0.0".


 Whoops! Lost connection to https://localhost/socket.

and the console log on the server is

2018-08-03 10:25:25.030  WARN 17952 --- [-nio-443-exec-2] o.s.web.servlet.PageNotFound             : Request method 'POST' not supported
2018-08-03 10:25:25.030  WARN 17952 --- [-nio-443-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported
2018-08-03 10:25:25.046  WARN 17952 --- [-nio-443-exec-8] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representation
2018-08-03 10:25:25.905  WARN 17952 --- [-nio-443-exec-1] o.s.web.servlet.PageNotFound             : Request method 'POST' not supported
2018-08-03 10:25:25.905  WARN 17952 --- [-nio-443-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved exception caused by Handler execution: org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported

Here is the front End

WebsocketService.ts

import { Injectable } from '@angular/core';
import { AsyncDataService } from './async-data.service';
import { AuthenticationService } from './authentication.service';
import * as SockJs from 'sockjs-client';
import * as Stomp from 'stompjs';

@Injectable()
export class WebsocketService {

  constructor(private asyncDataService: AsyncDataService, private authenticationService: AuthenticationService) { }

  public connect() {
    const socket = new SockJs('/socket');

    const stompClient = Stomp.over(socket);

    return stompClient;
  }
}

WebSokcetComponent.ts

import { HttpClient } from '@angular/common/http';
import { WebSocketService } from './../web-socket.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-web-socket',
  templateUrl: './web-socket.component.html',
  styleUrls: ['./web-socket.component.css']
})
export class WebSocketComponent implements OnInit {
  public notifications = 0;
  constructor(private websocketService: WebSocketService, private http: HttpClient) {
    const stompClient = this.websocketService.connect();
    stompClient.connect({}, frame => {

      // Subscribe to notification topic
      stompClient.subscribe('/topic/notification', notifications => {
        this.notifications = JSON.parse(notifications.body).count;
      });

    });
  }
  getNotification(){
    this.http.get("/notify");
  }
  ngOnInit(){

  }
}

and the BackEnd

WebSocketConfiguration.java

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfiguration extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {

    registry.addEndpoint("/socket").setAllowedOrigins("*").withSockJS();

    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {

    registry.setApplicationDestinationPrefixes("/app");

    registry.enableSimpleBroker("/topic");
    }
}

WebsocketSecurityConfig.java

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.messaging.MessageSecurityMetadataSourceRegistry;
import org.springframework.security.config.annotation.web.socket.AbstractSecurityWebSocketMessageBrokerConfigurer;

@Configuration
public class WebSocketSecurityConfig extends AbstractSecurityWebSocketMessageBrokerConfigurer {

    @Override
    protected boolean sameOriginDisabled() {
    return true;
    }

    @Override
    protected void configureInbound(MessageSecurityMetadataSourceRegistry messages) {
    messages.anyMessage().permitAll();
    }

}

NotificationsController.java

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class NotificationController {

    @Autowired
    private SimpMessagingTemplate template;

    // Initialize Notifications
    private Notifications notifications = new Notifications(0);

    @GetMapping("/notify")
   // @SendTo("/topic/notification")
    public void getNotification() {
    System.out.println("Request received..");
    // Increment Notification by one
    notifications.increment();

    // Push notifications to front-end
    template.convertAndSend("/topic/notification", notifications);
    System.out.println("Response Sent..");
    // return notifications;
    }
}

WebSecurityConfig.java

// Only websocket related code posted here
@Override
    protected void configure(HttpSecurity http) throws Exception {

    http.httpBasic().disable();
    http.csrf().disable();
    http.headers().frameOptions().sameOrigin();
    http.authorizeRequests().antMatchers("/socket/**").permitAll();
}

Help me fix the problem here…

Answers: