A06 — Vulnerable & Outdated Components Secure

1000-ft view: this module shows how to avoid risky dependencies by pinning exact versions, verifying integrity, serving over HTTPS, and upgrading to patched releases. Each section contrasts a secure approach vs what you’ll see on the insecure page.

Attack 1 Attack 2 Attack 3 Attack 4 Attack 5

Attack 1 — Outdated jQuery

Update to patched major/minor

Secure idea: use an actively maintained branch (e.g., jQuery 3.x), review release notes for security fixes, and test upgrades.

  1. Click Open secure demo to load the page using jQuery 3.x.
  2. Compare behavior with the insecure demo (uses 1.x) on the other page.
  3. Adopt deprecation guides and automated tests to ease upgrades.
Open secure demo

Attack 2 — CDN Script Without SRI

Integrity + crossorigin

Secure idea: when loading from a CDN, pin the version and add a sha256- (or stronger) integrity attribute with crossorigin="anonymous". The browser will refuse a tampered script.

  1. Open the secure demo (SRI pinned). It should execute only if the hash matches.
  2. Compare with the insecure page where a compromised CDN file runs arbitrary JS.
  3. Use a build step to compute and embed SRI.
Open secure demo (SRI)

Attack 3 — Mixed Content

HTTPS-only assets

Secure idea: serve the page and all dependencies via HTTPS. Browsers block or downgrade insecure (http://) subresources on secure pages.

  1. Open the secure demo; it loads only https:// assets.
  2. On the insecure demo, the http:// resource will be blocked with console warnings.
  3. Set CSP upgrade-insecure-requests if you must temporarily migrate.
Open secure demo

Attack 4 — Outdated Lodash

Patch known vulns

Secure idea: track advisories and upgrade to patched versions (e.g., Lodash 4.17.21). Avoid unsafe APIs/patterns deprecated due to vulnerabilities.

  1. Open the secure demo using Lodash 4.17.21.
  2. Exercise the UI and compare with the insecure page (4.17.15).
  3. Lock versions and scan with SCA tools.
Open secure demo

Attack 5 — Unpinned vs Pinned Versions

Exact pins + manifest

Secure idea: avoid floating ranges or @latest. Pin exact versions, keep a lock/manifest, and verify SRI hashes at build/deploy.

  1. Open the secure demo: it uses exact versions and shows a sample manifest.
  2. View the manifest.json and (optionally) compute SRI with the helper.
  3. Compare with the insecure page that pulls “latest.”
Open secure demo View manifest.json
Optional helper (once added): verify_sri.php?file=/path/to/file.js prints its SHA-256.