SSL certificate on frontend and backend in different servers

[slimovski]

Hello,
I have a backend (rest apis) written with nodejs running on a server and accessible with the ip of the server. This backend is currently using a ssl certificate (not provided by let's encrypt). The frontend is a html/css website that is deployed on another server. The two servers are running on ubuntu 22.04lts.
When I added a let's encrypt certificate to my frontend website, the website switched to https with no problem but I wasn't able to use the backend. A nodejs developer told me that I must use the same certificate on the backend and the frontend.
I am here to ask what is the solution exactly to be able to have ssl certificate on my frontend and be able to use my backend.
Thank you in advance for your help

[jvanasco]

@slimovski

A nodejs developer told me that I must use the same certificate on the backend and the frontend.

You left a lot of details above, but I think the following is probably what is happening:

As you're talking about two servers and different certificates, it sounds like these web services are running on two different domains, and consequently running into issues designed to protect users from Cross Site Scripting (XSS) attacks. Browsers have complex, and constantly evolving, sandboxing rules for client security.

Assuming I am correct, you will need to analyze and rethink your application model to factor in browser security measures. There are many ways to deploy apps like this using different subdomains of the same registered domain, which are typically easier to configure or implement. There are also advanced ways to deploy apps like this across different registered domains, but that often requires a technique of routing requests through embedded iframes across domains that publish security policies that allow this. All this stuff is far beyond the scope of this board.

[webprofusion]

Also if your API is just running at an IP (not a real DNS host name) then your cert is probably self-signed and not trusted by the browser. You can verify this by browsing to your API in the browser and you will also see browser dev tools errors under the network tab and the console.

When providing an API for a public app (or one that will be generally trusted by a browser) you need:

• your api to have a real name like api.yourdomain.com and an appropriately configured certificate for https to work.
• your API to send CORS headers if your api is hosted on a different hostname (or IP!) to the app. You don't need this if both your app and api share the same hostname e.g. your app is app.yourdomain.com/ and your api is app.yourdomain.com/api

[slimovski]

Thank you for your answers.
So, if my endpoint of the apis is for example : api.mydomain.extension in one server and the front end is on : mydomain.extension in another server, I can use the same ssl certificate?

[jvanasco]

@slimovski

So, if my endpoint of the apis is for example : api.mydomain.extension in one server and the front end is on : mydomain.extension in another server, I can use the same ssl certificate?

The issue is not with the SSL Certificate. You can use a single certificate for both domains, or a unique certificate on each domain - you will still run into these issues.

Your problem is with application design - you are hosting the application on two separate domains. While this is common, you will need to configure the Application and the Domains so the two different domains are privileged to communicate with one another. Your application is not working, because without the proper configuration of the application and server, the browsers are interpreting the communication between the domains as a potential XSS attack.

This can be done with CORS headers like @webprofusion noted. This can also be done with the placement of certain policy files, specially configured hidden iframes, and several other options. You also need to ensure your cookies are configured to be sharable across the two domains, as their current configuration may prohibit that.

It is easier to do all of this with two FQDNs of the same registered domain (e.g. api.example.com + example.com), but there are advanced techniques to do this with different registered domains (e.g. example.com + example.net)

See:

• Same-origin policy - Wikipedia
• Cross-origin resource sharing - Wikipedia
• Web Messaging - Wikipedia
• Security on the web | MDN
• Content Security Policy (CSP) - HTTP | MDN
• Using HTTP cookies - HTTP | MDN

[webprofusion]

@slimovski

I can use the same ssl certificate?

Yes, you can use the same certificate (you don't need to, but you can) if your certificate covers all the required names (so it includes api.mydomain.extension and mydomain.extension.

Remember that having a certificate (which covers the names you need) and actually using it for something are two different things.

Another trick you can use is a proxying http server (e.g. nginx or caddy etc) as your front end https server then proxy /api back to your actual API server and all other routes back to your app running under nodejs. That way your client app can request https://mydomain.extension/api and the request is internally served by your API server (which the client never directly connects to and which doesn't even strictly need to have https configured).