Enabling Cross Origin Requests for WebSockets in Spring - spring-mvc

Question

I have a OpenShift Wildfly server. I am building a website with the Spring MVC framework. One of my webpages also uses a WebSocket connection. On the server side, I have used the #ServerEndpoint annotation and javax.websocket.* library to create my websocket:
package com.myapp.spring.web.controller;
import java.io.IOException;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import org.springframework.web.socket.server.standard.SpringConfigurator;
#ServerEndpoint(value="/serverendpoint", configurator = SpringConfigurator.class)
public class serverendpoint {
#OnOpen
public void handleOpen () {
System.out.println("JAVA: Client is now connected...");
}
#OnMessage
public String handleMessage (Session session, String message) throws IOException {
if (message.equals("ping")) {
// return "pong"
session.getBasicRemote().sendText("pong");
}
else if (message.equals("close")) {
handleClose();
return null;
}
System.out.println("JAVA: Received from client: "+ message);
MyClass mc = new MyClass(message);
String res = mc.action();
session.getBasicRemote().sendText(res);
return res;
}
#OnClose
public void handleClose() {
System.out.println("JAVA: Client is now disconnected...");
}
#OnError
public void handleError (Throwable t) {
t.printStackTrace();
}
}
OpenShift gives a default URL, so all of my webpages (html files) have the common (canonical) hostname. For the sake of simplicity, I am calling this URL URL A (projectname-domainname.rhclound.com). I created an alias, CNAME, of URL A, which is called URL B (say https://www.mywebsite.tech). URL B is secure, as it has the https.
I am using a JavaScript client to connect to the WebSocket at the path /serverendpoint. The URI I am using in my html webpage file, test.html, is the following:
var wsUri = "wss://" + "projectname-domainname.rhclound.com" + ":8443" + "/serverendpoint";
When I open up URL A (projectname-domainname.rhclound.com/test), the WebSocket connects and everything works fine. However, when I try to connect to the websocket using URL B (https://mywebsite.tech/test), the JavaScript client immediately connects and disconnects.
Here is the message from the console that I receive:
Here is my JavaScript code that connects to the WebSocket:
/****** BEGIN WEBSOCKET ******/
var connectedToWebSocket = false;
var responseMessage = '';
var webSocket = null;
function initWS() {
connectedToWebSocket = false;
var wsUri = "wss://" + "projectname-domainname.rhcloud.com" + ":8443" + "/serverendpoint";
webSocket = new WebSocket(wsUri); // Create a new instance of WebSocket using usUri
webSocket.onopen = function(message) {
processOpen(message);
};
webSocket.onmessage = function(message) {
responseMessage = message.data;
if (responseMessage !== "pong") { // Ping-pong messages to keep a persistent connection between server and client
processResponse(responseMessage);
}
return false;
};
webSocket.onclose = function(message) {
processClose(message);
};
webSocket.onerror = function(message) {
processError(message);
};
console.log("Exiting initWS()");
}
initWS(); //Connect to websocket
function processOpen(message) {
connectedToWebSocket = true;
console.log("JS: Server Connected..."+message);
}
function sendMessage(toServer) { // Send message to server
if (toServer != "close") {
webSocket.send(toServer);
} else {
webSocket.close();
}
}
function processClose(message) {
connectedToWebSocket = false;
console.log("JS: Client disconnected..."+message);
}
function processError(message) {
userInfo("An error occurred. Please contact for assistance", true, true);
}
setInterval(function() {
if (connectedToWebSocket) {
webSocket.send("ping");
}
}, 4000); // Send ping-pong message to server
/****** END WEBSOCKET ******/
After a lot of debugging and trying various things, I concluded that this was problem was occurring because of the Spring Framework. This is because before I introduced the Spring Framework in my project, URL B could connect to the WebSocket, but after introducing Spring, it cannot.
I read on spring's website about WebSocket Policy. I came across their same origin policy which states that an alias, URL B, cannot connect to the WebSocket because it is not the same origin as URL A is. To solve this problem I disabled the same origin policy with WebSockets as said in the documentation, so I added the following code. I thought that doing so would fix my error. Here is what I added:
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.socket.AbstractSecurityWebSocketMessageBrokerConfigurer;
#Configuration
public class WebSocketSecurityConfig extends AbstractSecurityWebSocketMessageBrokerConfigurer {
#Override
protected boolean sameOriginDisabled() {
return true;
}
}
However, this did not fix the problem, so I added the following method to my ApplicationConfig which extends WebMvcConfigurerAdapter:
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("https://www.mywebsite.com");
}
This also didn't work either. Then I tried this:
package com.myapp.spring.security.config;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
#Configuration
public class MyCorsFilter {
// #Bean
// public FilterRegistrationBean corsFilter() {
// System.out.println("Filchain");
// UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
// CorsConfiguration config = new CorsConfiguration();
// config.setAllowCredentials(true);
// config.addAllowedOrigin("https://www.mymt.tech");
// config.addAllowedHeader("*");
// config.addAllowedMethod("*");
// source.registerCorsConfiguration("/**", config);
// FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
// bean.setOrder(0);
// System.out.println("Filchain");
// return bean;
// }
#Bean
public CorsFilter corsFilter() {
System.out.println("Filchain");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true); // you USUALLY want this
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
System.out.println("Filchain");
return new CorsFilter(source);
}
}
This also did not work.
I even changed the var wsURI in the JS code to the following:
var wsUri = "wss://" + "www.mywebsite.com" + ":8443" + "/serverendpoint";
Then var wsUri = "wss://" + "mywebsite.com" + ":8443" + "/serverendpoint";
When I did this, the Google Chrome gave me an error, saying that the handshake failed. However, when I have this URL, var wsUri = "wss://" + "projectname-domianname.rhcloud.com" + ":8443" + "/serverendpoint";, I did not get the error that the handshake didn't occur, but I get a message that the connection opened and closed immediately (as seen above).
So how can I fix this?

Answer 1

Have you tried implementing the WebMvcConfigurer and overriding the method addCorsMappings()? If not try this and see.
#EnableWebMvc
#Configuration
#ComponentScan
public class WebConfig implements WebMvcConfigurer {
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST")
.allowedHeaders("Origin", "Accept", "Content-Type", "Authorization")
.allowCredentials(true)
.maxAge(3600);
}
}

Answer 2

I don't think it's a CORS issue because it's connected successully before being disconnected. If that's CORS, you can't even connect.
I think it's a communication problem between your DNS & openshift because WebSocket need a persistent connection (long-live) which keeps opening between client & server. If your DNS (e.g. CloudFlare or something like that) does not support / not configured to use WebSocket, the client would be disconnected immediately as in your issue.