I am working on a full stack chatting website project to learn end to end development.
My frontend is on react which connects to a spring boot service through websockets (Stomp-SockJS). As a part of deployment I hosted my react app and spring boot app on the same EC2 instance. react app is hosted through nginx server.
I purchased a domain and SSL for my domain. Now heres the problem :
I connect to my UI through https:// and because of that Im unable to create a websocket connection to my spring service. It says on the chrome console :
`main.js:81 Uncaught Error: SecurityError: An insecure SockJS connection may not be initiated from a page loaded over HTTPS
at new _ (main.js:81:13)
at connection-utils.js:9:14
at index.js:15:7
at index.js:15:7
_ @ main.js:81
So what I understand from this is, that I cant initiate a http connection over a https connection, makes sense.
on the otherside if I simple try to make the connection using https i get the below error on console :
net::ERR_SSL_PROTOCOL_ERROR
So I further started exploring on how to support https requests on my spring service. What I found out was something like this :
Convert certificate to PKCS12 format openssl pkcs12 -export -in <domain-name.crt> -inkey </path-to private.key> -name <alias-name> -out <domain-name.p12>. This will generate a .p12 file
Import PKCS12 file in JKS keystore keytool -importkeystore -deststorepass <pass-phrase> -destkeystore keystore.jks -srckeystore <your .p12 file> -srcstoretype PKCS12. A file with .jks extension will be created.
Import CA bundle certificate into JKS keystore keytool -import -alias <alias-name> -trustcacerts -file <bundle.crt> -keystore keystore.jks
I followed the above steps. I used the same certificate(.cer) and key(.key) file I used for my nginx-ssl integration for spring boot-ssl also, using the above 3 steps. But now when I try running my app I can see below error on my console :
net::ERR_CERT_COMMON_NAME_INVALID
How I initiate a web socket connection from react-spring :
const host = "1.2.3.4";
const sock = new SockJS(`https://${host}:8080/test`);
const client = Stomp.over(sock);
So can anyone please help me on how can I fix these issues.