The very common method to verify a webpage is secure in terms of data transfers is checking its secured protocol i.e., HTTPS.

Definition

Sometimes a website might use HTTPS and load some part of its data via APIs which might be exposed over HTTP protocol. This situation is termed as Mixed Content.

Issue in detail

Browsers today, have been built and are constantly updated to keep user data safe and secure. Inherently, HTTP protocol is not secure as it doesn't have TLS (Transport Layer Security) or any other kind of security feature with it. Thus, browsers treat the sites with HTTP as "insecure" and hence don't allow loading parts of a secured site with such URLs. This creates the issue of Mixed Content and browsers may reject opening the website.

Solution

Just make the protocol of both the APIs and website "SAME", that's it. Either both should be exposed over HTTPS or HTTP.

Sample case:-

→ A website is deployed on Vercel.
Vercel automatically provides https for all the sites deployed on its platform. It's a PaaS service so everything is managed by Vercel.

→ Your backend is hosted on an EC2 machine.
Your APIs will be exposed on HTTP because you don't have a TLS/SSL yet. AWS provides you with the machine to run your server on and manage it yourself. It is an IaaS, thus, AWS doesn't manage anything for you. Setting up TLS has to be done by us.

→ Now there comes a Mixed Content issue.

Resolution 1: Host your website too on an EC2 machine. If you have TLS already set up, great! Else your website should work fine with HTTP.

Resolution 2: Deploy your backend on Vercel, everything resolves with a snap.

Additional info: Vercel primarily functions as a platform for deploying serverless functions, not traditional backend servers. It treats your Express app as a collection of serverless functions during deployment. This means your code will execute in response to triggers or events and not run continuously, but that's a different thing from our main topic. I'll leave the decision to you.

Thank you for reading the blog. I share various things, find them on myTwitter handle.