The HTML & CSS Security Checklist

Security is hard. Every developer needs to write some HTML/CSS at some point. Some of us might think that HTML and CSS can’t really be an attack vector. But modern web technologies bring them wide capabilities that can also be used for malicious purposes. This checklist aims to help developers learn security best practices and avoid vulnerabilities. Every item of the checklist are sorted by category to make it more usable.

Categories

HTML

CSS

  • Don’t hide sensitive content with CSS

    There are multiple ways to hide content in CSS. With display, opacity, visibility, transform, you’re easily able to visually hide content of your page.

    But be careful about the content you’re hiding. You should make sure it doesn’t contain sensitive data or actions.

  • Don’t prevent sensitive actions with the pointer-events property

    The property pointer-events lets you decide which element can be the target of mouse events. It’s pretty usual to set pointer-events: none to disable the behavior of an element. But in case of sensitive actions, blocking the action should be done backend side.

    Learn more:

    https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Best practices

Tools

We’re publishing great new resources every week. Get them sent straight to your inbox.