typescript 43 lines · 7 steps

Building a configurable HTML sanitizer allowlist

A whitelist-driven wrapper around sanitize-html that opts into links and images while hardening every anchor tag.

Explained by highlit

Intermediate sanitization xss-prevention allowlist configuration input-validation

1import sanitizeHtml from "sanitize-html";
2 
3interface RichTextOptions {
allowImages?: boolean;
allowLinks?: boolean;
6}
7 
8const BASE_TAGS = ["p", "br", "strong", "em", "u", "ul", "ol", "li", "blockquote", "code", "pre", "h2", "h3"];
9 
10export function sanitizeRichText(dirty: string, opts: RichTextOptions = {}): string {
const allowedTags = [...BASE_TAGS];
const allowedAttributes: sanitizeHtml.IOptions["allowedAttributes"] = {};
13 
if (opts.allowLinks) {
  allowedTags.push("a");
  allowedAttributes.a = ["href", "title", "target", "rel"];
}
18 
if (opts.allowImages) {
  allowedTags.push("img");
  allowedAttributes.img = ["src", "alt", "width", "height"];
}
23 
return sanitizeHtml(dirty, {
  allowedTags,
  allowedAttributes,
  allowedSchemes: ["http", "https", "mailto"],
  allowedSchemesByTag: { img: ["http", "https", "data"] },
  disallowedTagsMode: "discard",
  transformTags: {
    a: (tagName, attribs) => ({
      tagName,
      attribs: {
        ...attribs,
        target: "_blank",
        rel: "noopener noreferrer nofollow",
      },
    }),
  },
  exclusiveFilter: (frame) =>
    frame.tag === "a" && !frame.text.trim() && !frame.attribs.href,
});
43}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1An allowlist approach is safer than blocklisting because anything unlisted is dropped by default.
2Optional feature flags let you widen the permitted markup only when the caller explicitly needs it.
3Rewriting attributes on the way out lets you enforce security defaults like noopener on every link.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';