tldr; our nzpmc registration website can be accessed by 'registration.nzpmc.com' without 'not secure' mark!
Doesn't sound like a big deal but it is.
Problem
If you ever tried to set up domain forwarding on GoDaddy, you would quickly run into a pain of having that 'Not Secure' icon besides your url. A mark of shame. This is because GoDaddy cannot verify my ownership of the application (and by application, I mean the React/Java application deployed on Heroku), and refuses to tell browser surfers that whatever application `registration.nzpmc.com` points to may be malicious.
Having 'Not secure' mark is bad because it erodes client's confidence on the website. Who knows what 'Not secure' might imply? This issue becomes even more serious as the registration platform seemingly handles payments (in fact, the platform simply redirects user to PoliPay/Stripe's payment page, but to normal users, can feel as though the registration platform might be tampering their credit card details).
I've gotten away with this issue by just using the default static url that heroku provides.`nzpmc-registration.herokuapp.com` was a url that NZPMC would send people to. But this is annoying for the following reasons:
1) What the heck is Heroku? Sounds like some anime website (it's not)
2) Someone else could pretend that they are us by creating a website under 'nzpmc-registration-for-real.herokuapp.com', and it won't be clear to users what the difference is
How did I solve it?
The trick is not to use domain forwarding set up on GoDaddy. Note that GoDaddy allows you to forward your subdomains to whatever website you want. That goes with a lack of guarantee about whether you are owning the webiste, therefore only http (not https) forwarding is possible.
Instead, we have to:
Make Heroku regularly generate SSL certificate for the hosted application
This is actually really simple as long as you are using paid Heroku tier (which, after discontinued free tier, is somewhat forced). Firstly, install Heroku CLI. Then, run
heroku certs:auto:enable -a nzpmc-registration
(where nzpmc-registration is my application's name on Heroku). This enables automatic SSL generation on Heroku's application.
Enable custom domain on Heroku, and add CNAME record on GoDaddy
By adding 'registration.nzpmc.com' as the custom domain for the application, Heroku will express the intent to domain owner (GoDaddy) that it wishes to get traffic that 'registration.nzpmc.com' gets to its application.
However, this won't happen without GoDaddy explicitly agreeing to do route traffic to Heroku's application. That's where CNAME comes in. We add the following CNAME record, where 'name' is the subdomain, 'value' is the DNS target you get when you add domain on Heroku (as above).
Yay!
This is what happens after following the steps above.
A useful side knowledge (that I picked up from my software network class) is that https can only be used if SSL is set up (it underpins mechanism for browsers to communicate securely).