Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure resource

Salesforce serves Lightning pages over HTTPS. If your component embeds an http://... URL — even just an image — the browser blocks it. The console shows:

Mixed Content: The page at 'https://yourdomain.lightning.force.com/...' was loaded over HTTPS,
but requested an insecure image 'http://example.com/logo.png'. This request has been blocked;
the content must be served over HTTPS.

Fix 1: use HTTPS

Almost every public CDN and image host serves HTTPS today. Just switch the URL:

<img src="https://example.com/logo.png" />

Or the protocol-relative form (legacy, works but discouraged):

<img src="//example.com/logo.png" />

The protocol-relative form picks up the page's protocol, which works on HTTPS Salesforce — but breaks on local HTTP development. HTTPS-explicit is safer.

Fix 2: host the resource as a Static Resource

If the third-party doesn't offer HTTPS, host the file in Salesforce:

1. Setup → Static Resources → New
2. Upload the file
3. Reference via $Resource.MyLogo in your component:

<img src={logoUrl} />

import { LightningElement } from 'lwc';
import LOGO_URL from '@salesforce/resourceUrl/MyLogo';

export default class MyComp extends LightningElement {
    logoUrl = LOGO_URL;
}

Static Resources are served from the same Salesforce HTTPS origin, so no mixed-content issue.

Fix 3: route through Apex

For dynamic content (e.g., a third-party API that returns images), have your Apex @AuraEnabled method fetch the resource server-side and return it as a base64 data URL. Slow but works for one-shot needs.

A subtle source: an iframe src

<iframe src="http://legacy-system.example.com/" />

Same rule: the iframe's URL must be HTTPS. If the legacy system can't be upgraded, you can't embed it directly. Workarounds:

• Reverse-proxy through your own HTTPS host
• Embed via OAuth-redirected popup instead of iframe

CSP vs Mixed Content

Don't confuse this with CSP violations:

These are independent gates. A URL needs to be both HTTPS and in the CSP allowlist.