Security

`security/https-only`

Every page and every resource it loads use HTTPS; no mixed content and no http:// links to your own site.

Why

Without HTTPS anyone on the network can read and change the page, including injecting script. Browsers block or warn about mixed content, so an http:// image or script on an HTTPS page breaks or degrades it, and many APIs (service workers, geolocation, clipboard) need a secure context.

Fix

Serve the site only over HTTPS with a redirect from HTTP and an HSTS header, write own-site links as relative or https:// URLs, and load third-party resources over HTTPS. Search the code for http:// in src, href and API base URLs.

Examples

<!-- bad -->
<img src="http://example.com/logo.png" alt="Acme">
<!-- good -->
<img src="/logo.png" alt="Acme">

Sources

Facts

Id: security/https-only
Severity: serious
Check: browser needs a rendered page: audit --url
Applies to: page
Same problem in: Lighthouse is-on-https
Taught by the skill: fe-security Front-end security
Since version: 0.1.0

Rule file on GitHub

Read it in the terminal

npx github:dawidolko/frontend-skills explain security/https-only