This One HTML Attribute Could Save Your Web App from a Security Nightmare

Kunal Singh

Jun 29, 2024

In the ever-evolving landscape of web development, security remains a paramount concern. Recently, a startling incident involving the polyfill.io domain served as a stark reminder of the vulnerabilities inherent in relying on external resources. This widely-used service was compromised, resulting in the distribution of malicious code to over 100,000 websites. Such events underscore the critical need for robust security measures in our web applications.

Fortunately, there's a powerful yet often overlooked tool at our disposal: the integrity attribute for <script> tags. This simple addition to your HTML can provide a significant layer of protection against compromised CDNs and malicious code injection. Let's dive into how it works and why you should be using it.

Understanding the 'integrity' Attribute

The integrity attribute allows you to specify a cryptographic hash for an external resource. When a browser encounters a script tag with this attribute, it follows these steps:

  1. Fetch the script from the specified URL
  2. Compute the hash of the downloaded content
  3. Compare the computed hash with the provided integrity value
  4. Execute the script only if the hashes match

Here's what it looks like in practice:

<script 
src="https://example-cdn.com/library.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxviVZoGmoIdhtV5Hx7W72h2HE6x88z"
crossorigin="anonymous">

</script>

Why It Matters

The beauty of the integrity attribute lies in its simplicity and effectiveness. If even a single character in the external script is altered – whether due to a compromised CDN, a man-in-the-middle attack, or any other form of tampering – the computed hash will not match the provided value. As a result, the browser will refuse to execute the script, protecting your application and users from potentially malicious code.

Best Practices for Using the 'integrity' Attribute

  1. Use it for all external scripts: Apply the integrity attribute to any script loaded from a CDN or external source.
  2. Generate accurate hashes: Use tools like shasum (on macOS/Linux) or online services to generate the correct hash for your scripts.
  3. Keep hashes updated: Remember to update the integrity value whenever you update the external library.
  4. Combine with Subresource Integrity (SRI): Many CDNs now provide SRI hashes for their resources. Use these when available.
  5. Don't forget the crossorigin attribute: When using integrity, you should also include the crossorigin attribute to ensure proper CORS (Cross-Origin Resource Sharing) behavior.

Going Beyond Scripts

While we've focused on <script> tags, the integrity attribute can also be used with <link> tags for stylesheets. This extends the same protection to your CSS files:

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

Conclusion

In an age where web applications increasingly rely on external resources and CDNs, the integrity attribute stands as a simple yet powerful line of defense. By implementing this attribute across your external resources, you significantly enhance your application's resilience against compromised CDNs, man-in-the-middle attacks, and other forms of code injection.

While it's not a silver bullet for all security concerns, the integrity attribute is an essential tool in the modern web developer's security toolkit. As we continue to build and maintain web applications, let's make a commitment to implement this small but crucial security measure. Your users – and your future self – will thank you for it.

Remember, in the world of web development, security isn't just a feature – it's a responsibility. Stay vigilant, stay informed, and keep coding securely!

#WebSecurity #CDNSecurity #JavaScript #WebDevelopment #SubresourceIntegrity

Recommendations

Are You Still Using Basic CSS? Here Are 7 Tricks to Get Ahead of the Curve

#css

Bored of the same old CSS? Unleash 7 hidden gems to take your designs to the...

Dec 27, 2023

Easiest way to store your logs in a file WITHOUT chaging the source file(node)

#productivity

Often, developers face challenges when dealing with a flood of logs in the...

Dec 21, 2023

Build Your Own Pinterest-Style Masonry Grid: A Step-by-Step Guide

#css

,

#web

,

#layout

Create a masonary grid layout with left to right content flow, supporting...

Dec 10, 2023

Using git diff and git apply to Share Local Changes with Peers

#git

,

#productivity

,

#software_engeneering

,

#dev

git diff and git apply are two powerful Git commands that can be used to share...

Nov 12, 2023

React Portals: Render Components Outside the current DOM Hierarchy

#react

,

#web

The createPortal API in React allows you to render child elements into a...

Jul 27, 2023

Cloning Made Easy: Try degit and Clone Directories within Repos.

#git

,

#productivit

Have you ever faced the dilemma of wanting just a small portion of a repository,...

Jul 19, 2023

Debugging Web Apps with Browser Dev Tools: 6 Amazing Tricks

#browser

,

#debugging

,

#web

Debugging web applications can be a challenging task, with errors like...

Jul 13, 2023

Controlled Versus Uncontrolled Components in React

#react

,

#forms

Understanding State Management Within Forms Comparing controlled and...

Nov 5, 2022

Format Numbers, Dates and Currencies with the Intl Object in Javascript

#javascript

,

#html

,

#web

Intl object can be used to format data into commonly used formats of dates,...

Sep 13, 2022

Image Masking on Hover Using CSS Clip Path and Javascript

#javscript

,

#css

,

#html

Image Masking can be used to add fancy hover highlight effects to images for...

Jul 23, 2022

Recreating CSS Tricks Fancy Grid Hover Effect

#html

,

#css

,

#UI

,

#recreation

CSS Trick had a simple yet cool grid layout which I found dope. So lets try to...

May 21, 2022

File Explorer Recursive React Component

#react

,

#javascript

,

#web

How to create a recursive folder Component using react.

Apr 16, 2022

Add Google Fonts to Your React & NextJS + TailwindCSS Project (Next 14)

#css

,

#tailwindcss

,

#react

,

#nextjs

,

#tailwind

,

#design

Use Google Fonts in Your TailwindCSS Projects

Apr 6, 2022

Event Delegation in Javascript

#javscript

,

#css

,

#html

,

#web

,

#performance

Handling multiple Events in Javascript with minimal CPU Usage

Mar 6, 2022

A Simple Web Accessibility Trick that you most probably missed!

#html

,

#css

,

#web-accessibility

,

#user-experience

Imagine that you cannot use the mouse and have to Navigate a Website with the...

Dec 23, 2021

Top Terminal Commands I Use For Productivity

#linux

,

#cli

,

#terminal

The whole point of development is solving problems. But very often we Developers...

Nov 3, 2021

CSS Logical Properties

#css

,

#html

CSS logical properties are properties which are used to design element on the...

Oct 5, 2021

Fluid Typography in CSS 💧

#css

,

#html

,

#typography

CSS Best Practices in Fluid Typography

Aug 15, 2021

CSS Units in a Nutshell 🐚

#css

,

#html

Are you still writing your css units in pixels and percentages? if you are then...

Aug 8, 2021

Master Markdown in 5minutes ⌚

#markdown

,

#documentation

Markdown is a lightweight markup language for creating formatted text using a...

Aug 1, 2021

What is JAMStack ✨

#jamstack

Jamstack stands for Javascript APIS and Markup and it is based on this idea of...

Jul 31, 2021

+

Check my latest Blog Post

This One HTML Attribute Could Save Your Web App from a Security Nightmare

Read Now
Oh My Gawwdd!!!!!!!

Wow you have been viewing my site since 20 seconds!

+
+