Front and Back End Certificate (SSL) - Angular

Rezoppei · February 26, 2021, 5:41pm

I have a domain (www.nordy.com.br) and a few subdomains. Every one of them are Angular applications.

I just installed a SSL certificate over the command "certbot --apache" and it did install the certificate for every subdomain properly (certbot 0.27.0).

The problem is that I can´t communicate my front end and back end anymore, console throws a "net::ERR_SSL_PROTOCOL_ERROR" error because the certificate is not valid for back end.
I can´t access https://www.app.nordy.com.br:8080/ because the certificate does not cover the :8080 environment.

Is that a way to use the same certificate both on Front and Back End? Do I need another certificate for Back End? Thanks in advance.

schoen · February 26, 2021, 7:14pm

Bom dia @Rezoppei,

The problem with https://www.app.nordy.com.br:8080/ is not that the certificate can't be used for port 8080 (a certificate isn't specific to a port), but that the server listening there speaks HTTP, not HTTPS. It should be possible to use the same certificate and key for this service, too, if you can configure it to use HTTPS instead of HTTP.

If your existing software makes that difficult or inconvenient, a common solution would be to use a reverse proxy. The reverse proxy can speak HTTPS and forward connections to other internal services that speak only HTTP.

Rezoppei · February 27, 2021, 1:46am

@schoen I´m very happy you gave me this tip. I thought I wasn´t able to access https://www.app.nordy.com.br:8080/ because back end could not "see" the certificate.
Since you asnwered me I´m trying to find a tutorial to guide me through this problem.
Do you know a better way to search it on Google? I´m not very confident following a tutorial because I dont´t know what I´m searching for.
Right now I´m seraching for: "reverse proxy apache config https".
Is there a better way to search it?

Thank you very much for your reply.

schoen · February 27, 2021, 2:33am

I don't know offhand, but if you want to describe a little bit more about the details of your existing configuration, I may be able to suggest something (either something to do, or something to search for).

Rezoppei · February 27, 2021, 3:22am

Wow @schoen, that was a nice thing to read after so many hours trying to get out of it...

I´ll do my best trying to explain what it goin on...

I have a server running on Linode that has 3 subdomains. Every subdomain is a different Angular 8 Application and have it´s own backend.

xyz.domain.com -> xyz.domain.com:8080

abc.domain.com -> abc.domain.com:8081

pqr.domain.com -> pqr.domain.com:8082

The three of them were working just fine, but, It was on http and the "Unsafety Connection" icon was there all the time.

I installed a SSL certificate using "certbot --apache". The frontend is fine and safe, but, it doesn´t comunicate to backend anymore.

Here is my xyz.domain.com.conf (there is one for abc.domain.com and pqr.domain.com also)

<VirtualHost *:80>
ServerAdmin webmaster@localhost 
ServerName app.nordy.com.br
ServerAlias www.app.nordy.com.br
DocumentRoot /var/www/html/app.nordy.com.br/dist
<Directory /var/www/html/app.nordy.com.br/dist>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

RewriteEngine on
RewriteCond %{SERVER_NAME} =www.app.nordy.com.br [OR]
RewriteCond %{SERVER_NAME} =app.nordy.com.br
RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

And here is my default-ssl.conf

<IfModule mod_ssl.c>
<VirtualHost _default_:443>
ServerAdmin webmaster@localhost

DocumentRoot /var/www/html

# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,
# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn

ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined

# For most configuration files from conf-available/, which are
# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf

#   SSL Engine Switch:
#   Enable/Disable SSL for this virtual host.
SSLEngine on

#   A self-signed (snakeoil) certificate can be created by installing
#   the ssl-cert package. See
#   /usr/share/doc/apache2/README.Debian.gz for more info.
#   If both key and certificate are stored in the same file, only the
#   SSLCertificateFile directive is needed.
SSLCertificateFile  /etc/ssl/certs/ssl-cert-snakeoil.pem
SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key

#   Server Certificate Chain:
#   Point SSLCertificateChainFile at a file containing the
#   concatenation of PEM encoded CA certificates which form the
#   certificate chain for the server certificate. Alternatively
#   the referenced file can be the same as SSLCertificateFile
#   when the CA certificates are directly appended to the server
#   certificate for convinience.
#SSLCertificateChainFile /etc/apache2/ssl.crt/server-ca.crt

#   Certificate Authority (CA):
#   Set the CA certificate verification path where to find CA
#   certificates for client authentication or alternatively one
#   huge file containing all of them (file must be PEM encoded)
#   Note: Inside SSLCACertificatePath you need hash symlinks
#        to point to the certificate files. Use the provided
#        Makefile to update the hash symlinks after changes.
#SSLCACertificatePath /etc/ssl/certs/
#SSLCACertificateFile /etc/apache2/ssl.crt/ca-bundle.crt

#   Certificate Revocation Lists (CRL):
#   Set the CA revocation path where to find CA CRLs for client
#   authentication or alternatively one huge file containing all
#   of them (file must be PEM encoded)
#   Note: Inside SSLCARevocationPath you need hash symlinks
#        to point to the certificate files. Use the provided
#        Makefile to update the hash symlinks after changes.
#SSLCARevocationPath /etc/apache2/ssl.crl/
#SSLCARevocationFile /etc/apache2/ssl.crl/ca-bundle.crl

#   Client Authentication (Type):
#   Client certificate verification type and depth.  Types are
#   none, optional, require and optional_no_ca.  Depth is a
#   number which specifies how deeply to verify the certificate
#   issuer chain before deciding the certificate is not valid.
#SSLVerifyClient require
#SSLVerifyDepth  10

#   SSL Engine Options:
#   Set various options for the SSL engine.
#   o FakeBasicAuth:
#    Translate the client X.509 into a Basic Authorisation.  This means that
#    the standard Auth/DBMAuth methods can be used for access control.  The
#    user name is the `one line' version of the client's X.509 certificate.
#    Note that no password is obtained from the user. Every entry in the user
#    file needs this password: `xxj31ZMTZzkVA'.
#   o ExportCertData:
#    This exports two additional environment variables: SSL_CLIENT_CERT and
#    SSL_SERVER_CERT. These contain the PEM-encoded certificates of the
#    server (always existing) and the client (only existing when client
#    authentication is used). This can be used to import the certificates
#    into CGI scripts.
#   o StdEnvVars:
#    This exports the standard SSL/TLS related `SSL_*' environment variables.
#    Per default this exportation is switched off for performance reasons,
#    because the extraction step is an expensive operation and is usually
#    useless for serving static content. So one usually enables the
#    exportation for CGI and SSI requests only.
#   o OptRenegotiate:
#    This enables optimized SSL connection renegotiation handling when SSL
#    directives are used in per-directory context.
#SSLOptions +FakeBasicAuth +ExportCertData +StrictRequire
<FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
</FilesMatch>
<Directory /usr/lib/cgi-bin>
        SSLOptions +StdEnvVars
</Directory>

#   SSL Protocol Adjustments:
#   The safe and default but still SSL/TLS standard compliant shutdown
#   approach is that mod_ssl sends the close notify alert but doesn't wait for
#   the close notify alert from client. When you need a different shutdown
#   approach you can use one of the following variables:
#   o ssl-unclean-shutdown:
#    This forces an unclean shutdown when the connection is closed, i.e. no
#    SSL close notify alert is send or allowed to received.  This violates
#    the SSL/TLS standard but is needed for some brain-dead browsers. Use
#    this when you receive I/O errors because of the standard approach where
#    mod_ssl sends the close notify alert.
#   o ssl-accurate-shutdown:
#    This forces an accurate shutdown when the connection is closed, i.e. a
#    SSL close notify alert is send and mod_ssl waits for the close notify
#    alert of the client. This is 100% SSL/TLS standard compliant, but in
#    practice often causes hanging connections with brain-dead browsers. Use
#    this only for browsers where you know that their SSL implementation
#    works correctly.
#   Notice: Most problems of broken clients are also related to the HTTP
#   keep-alive facility, so you usually additionally want to disable
#   keep-alive for those clients, too. Use variable "nokeepalive" for this.
#   Similarly, one has to force some clients to use HTTP/1.0 to workaround
#   their broken HTTP/1.1 implementation. Use variables "downgrade-1.0" and
#   "force-response-1.0" for this.
# BrowserMatch "MSIE [2-6]" \
#       nokeepalive ssl-unclean-shutdown \
#       downgrade-1.0 force-response-1.0

</VirtualHost>
</IfModule>

# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

Now, I can´t access my backend anymore. I keep getting "net::ERR_SSL_PROTOCOL_ERROR" when try it. And I wish I could do it again.

schoen · February 27, 2021, 4:05am

I'm not sure exactly what's causing your current problems with your site, but: were you already using Apache to reverse proxy to these Angular apps?

And the backend processes are all running on the same physical machine (just one single Linode server)?

Rezoppei · February 27, 2021, 2:05pm

I don´t think so. My best guess is that this file was created in the SSL certificate installation.

Yes, all of them are in just one Linode.

Right now I can access http://(api), but, can´t access https://(api)

JuergenAuer · February 27, 2021, 2:28pm

Hi @Rezoppei

that's expected. Your port 8080 is a http port, so connecting that port via https produces always the expected error

ERR_SSL_PROTOCOL_ERROR

or (more specific, using FireFox):

SSL_ERROR_RX_RECORD_TOO_LONG

If you want to use http and https, you need two ports, not only one
Your 443 https works. So compare the working definition of your 443 and configure a new https port (may be 8083)

Rezoppei · February 27, 2021, 7:16pm

Thank you @schoen and @JuergenAuer!!! After you guys point me to the right direction I got it right.

For anyone from the future who is facing the same problem, here is what I did.
1 - I created another port on my backend server (Node.js) like so:

//Server
const https = require("https");
const express = require('express');
const app = express();
var app_https = express();
var cors = require('cors');
const fs = require("fs");

app.use(express.json(), cors());
app_https.use(express.json(), cors());

const options = {
  key: fs.readFileSync('../src/assets/keys/privkey.pem'),
  cert: fs.readFileSync('../src/assets/keys/cert.pem')
};
app_https = https.createServer(options, app);

//PORT ENVIRONMENT VARIABLE
const port = process.env.PORT;

app_https.listen(port, () => console.log(`Running on port localhost:${port}`));

This was enough to access "https://www.mydomain.com:port/api/" and put it back together.

Thank you again guys.

system · March 29, 2021, 7:17pm

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.