ERR_CERT_COMMON_NAME_INVALID In Angular AWS APP

Question

I have an Angular - Spring Boot App. In the backend(Spring Boot App) was able to use AWS canned SSL cert("example.com") on an AWS load balancer that listens for incoming https traffic on 443 port. On the other hand in the frontend(Angular app) I have a S3 site that uses the same SSL cert("example.com").

When I go to https://example.com my site loads fine and shows the https security green tag by the url (The frontend use also uses a SSL cert("example.com")).

However, when my frontend go to my load balancer's address, which looks like:

https://load-balancer-xxxxxx.us-east-1.elb.amazonaws.com

In other words, when my frontend makes petitions to backend, I get the following error:

net::ERR_CERT_COMMON_NAME_INVALID

Then is the error due to the fact that the certified url for my site does not contain the domain *.amazonaws.com ?, if this is the cause. How to prevent the browser says ERR_CERT_COMMON_NAME_INVALID? If necessarily the frontend will make requests from https://example to https://load-balancer-xxxxxx.us-east-1.elb.amazonaws.com

That is my DNS Configuration:

Note: I have installed a Single Domain SSL certificate.

The answer is yes. However, the details in your question are confusing which makes a solid answer difficult. Show how you are configuring and using the load balancer dns names in your DNS server. This is where your problem lies. AWS does not validate dns names in backend services. You can use anything for the backend as the certificate is only used for encryption not for host name validation. — John Hanley
Ok, then is posible use the same Certificate in frontend and backed?... in My namecheap dns i have only 2 cnames records that makes reference to s3 bucket, I dont have records for the load balancer — AlejoDev
As I said in my first comment "However, the details in your question are confusing which makes a solid answer difficult." I will be happy to help you once you have provided the details required to help you. — John Hanley
@JohnHanley You helped me to define my question better. I've updated it with the details you requested — AlejoDev

Charlie Delune Charlie Delune · Accepted Answer · 2020-08-06T12:48:57

I've posted this answer elsewhere, but I wanted to post it here too

I've spent about a week now trying to fix these issues myself - I'm using React and not Angular, but the steps should be the same.

Here's how I solved it, some of this might work for you too. It ended up being primarily configuration issues.

One of the keys here is that you need to have a domain already, and you need to be able to modify the domain's DNS. Most hosts will allow you to do this. So I own www.example.com and what I needed to do was to create a CNAME DNS record to route ops.example.come to my-site.my-aws-region-1.elasticbeanstalk.com

Then when I created my SSL Cert in AWS Cert Manager, the name I gave it was ops.example.com but theoretically *.example.com would've worked as well.

Then, what ended up being the linchpin to the whole thing was that in order to make HTTPS work, your load balancer has to be Listening for HTTPS on 443 and route to the instance via HTTP on 80.

Amazon was trying to tell me this, but because I was a noob and because their tutorials are some of the worst tutorials I've read in my entire career, they actually don't expose any of your secure ports to the internet. Which is actually fine because your traffic is encrypted all the way up to the load balancer, and then after that, even though it's not HTTPS anymore, it's all already on amazon's servers anyway so it's not any less secure.

Hope something in here helps!

ERR_CERT_COMMON_NAME_INVALID In Angular AWS APP

1 Answers