What Is HTTPS and What Causes Mixed Content Errors?
Learn how HTTPS and TLS work, why mixed content errors happen, and how active vs passive mixed content is handled by browsers.
Expected Interview Answer
HTTPS is HTTP layered over TLS, encrypting and authenticating traffic between browser and server, and mixed content occurs when a page loaded securely over HTTPS also tries to load a sub-resource like a script or image over plain, unencrypted HTTP.
TLS establishes a session key through a handshake, verifies the server’s identity using a certificate signed by a trusted certificate authority, and then encrypts every byte exchanged, protecting against eavesdropping and tampering by anyone on the network path. Mixed content happens because an HTTPS page’s guarantee only covers the top-level document unless every embedded resource is also fetched securely; if even one script tag or stylesheet points to an “http://” URL, an attacker on the network could intercept and modify that unencrypted request to inject malicious code into an otherwise secure page. Browsers respond by treating “active” mixed content, like scripts, as a hard block by default, while “passive” mixed content, like images, is often loaded but flagged with a warning, since a tampered image is less dangerous than a tampered script. The fix is almost always to serve every asset, API call, and embed over HTTPS and to enable HSTS so browsers refuse to downgrade the connection at all.
- Encrypts traffic so intermediaries cannot read or modify it
- Authenticates the server via a CA-signed certificate, preventing impersonation
- Active mixed content is blocked by browsers by default, closing an injection vector
- HSTS prevents downgrade attacks by forcing HTTPS on every future visit
AI Mentor Explanation
HTTPS is like a sealed, tamper-proof courier pouch used to send the match scorecard between the stadium and the broadcaster, so nobody along the delivery route can read or alter the score in transit. Mixed content is like that sealed pouch arriving safely, but one page of stats being couriered separately in an open envelope anyone could swap out. Even though the main pouch was secure, the open envelope lets someone slip in a fake stat that readers trust because it appears alongside the verified scorecard. That is why every single page, not just the main one, needs the same sealed pouch treatment.
Step-by-Step Explanation
Step 1
TLS handshake begins
Browser and server negotiate a cipher suite and the server presents its certificate.
Step 2
Certificate verification
Browser checks the certificate chain against trusted CAs and validates the hostname.
Step 3
Session keys established
Both sides derive symmetric session keys used to encrypt the rest of the connection.
Step 4
Sub-resources checked for scheme
The browser flags or blocks any embedded resource requested over plain HTTP on an HTTPS page.
What Interviewer Expects
- Clear explanation of what TLS actually provides: encryption, integrity, authentication
- Understanding of the distinction between active and passive mixed content
- Knowledge that browsers block active mixed content by default
- Mention of HSTS as the mechanism to prevent downgrade attacks
Common Mistakes
- Saying HTTPS is “just HTTP with a padlock icon” without explaining the handshake
- Not knowing that only the top-level document being HTTPS is insufficient
- Confusing mixed content with CORS errors, which are unrelated
- Forgetting that fixing mixed content means updating every asset URL, not just the main page
Best Answer (HR Friendly)
“HTTPS encrypts everything sent between your browser and a website so no one snooping on the network can read or change it. A mixed content error happens when a secure page still tries to load something like an image or script over an unencrypted connection, which creates a gap an attacker could exploit, so browsers warn about it or block it outright.”
Code Example
const helmet = require('helmet')
app.use(helmet.hsts({
maxAge: 31536000, // one year, in seconds
includeSubDomains: true,
preload: true,
}))
app.use((req, res, next) => {
if (req.headers['x-forwarded-proto'] !== 'https') {
return res.redirect(301, `https://${req.headers.host}${req.url}`)
}
next()
})Follow-up Questions
- What is the difference between active and passive mixed content?
- How does HSTS prevent SSL stripping attacks?
- What happens during a TLS handshake at a high level?
- Why does a valid certificate alone not guarantee no mixed content warnings?
MCQ Practice
1. What triggers a mixed content warning in a browser?
Mixed content specifically occurs when an HTTPS page pulls in an unencrypted HTTP sub-resource.
2. What do browsers typically do with active mixed content like scripts?
Active mixed content, such as scripts, is blocked by default because it can execute arbitrary code.
3. What does HSTS protect against?
HSTS tells the browser to never connect over plain HTTP again, closing the downgrade window.
Flash Cards
What does HTTPS add to HTTP? — TLS encryption, integrity checks, and server authentication via certificates.
What is mixed content? — An HTTPS page loading a sub-resource over unencrypted HTTP.
Active vs passive mixed content? — Active (scripts) is blocked by default; passive (images) is often loaded with a warning.
What does HSTS do? — Forces the browser to only ever use HTTPS for a domain, preventing downgrade attacks.