Skip to main content
Every time content enters the editor — whether from the value option, a paste event, or programmatic insertion — it passes through a built-in HTML sanitizer. The sanitizer strips any tags, attributes, URL protocols, and CSS properties that are not on the allowlist, helping you prevent cross-site scripting (XSS) attacks without adding a separate library. You can tighten or adjust the allowlist via the sanitize constructor option.
Relaxing the sanitizer — for example, by adding script to tags, permitting javascript: protocols, or allowing unrestricted style properties — can reintroduce XSS attack vectors in your application. Only expand the allowlist to the minimum set your use-case genuinely requires.
Attributes matching the pattern on*= (e.g. onclick, onmouseover) are always stripped from all elements, regardless of what you specify in attrs. This protection cannot be disabled via the sanitize option.

​
Default allowlist

Out of the box, Lumen Editor permits a broad but safe set of HTML constructs. The tables below show what is allowed when you do not supply a custom sanitize config.

​
Allowed tags

TagPurpose
pParagraph
strongBold (semantic)
emItalic (semantic)
uUnderline
sStrikethrough
h1, h2, h3Headings
ul, ol, liUnordered and ordered lists
blockquoteBlock quotation
pre, codePreformatted text and inline code
aHyperlink
imgImage
br, hrLine break and horizontal rule
div, spanGeneric block and inline containers

​
Allowed attributes

SelectorPermitted attributes
* (all elements)class, id, style
ahref, title, rel, target
imgsrc, alt, width, height

​
Allowed URL protocols

These protocols are permitted in href and non-image src attributes:
Protocol
http:
https:

​
Allowed image source protocols

These protocols are permitted in img[src] attributes:
Protocol
https:
data:image/png;base64
data:image/jpeg;base64
data:image/gif;base64
data:image/webp;base64

​
Allowed CSS style properties

The following properties are permitted inside style attributes. The sanitizer also blocks url(), expression(), and @import constructs inside any style value, regardless of the property allowlist.
Property
color
background-color
font-size
font-weight
font-style
text-align
text-decoration
margin
padding

​
The sanitize option

Pass a sanitize object as a constructor option to override the defaults. When you provide this object it replaces the default config entirely — any key you omit defaults to an empty or disabled value rather than inheriting the built-in default. Specify every key you need.
​
tags
string[]
An explicit allowlist of HTML tag names. Any tag not in this array is stripped (its child nodes are preserved where safe). Tag names are case-insensitive.
tags: ['p', 'strong', 'em', 'a', 'code', 'pre']
​
attrs
Record<string, string[]>
A map from element selector to an array of permitted attribute names. Use the key '*' to apply an attribute allowlist to every element. Per-element keys (e.g. 'a', 'img') apply in addition to the '*' list.
attrs: {
  '*': ['class'],
  a: ['href', 'title', 'rel', 'target'],
  img: ['src', 'alt', 'width', 'height']
}
​
protocols
string[]
URL protocols permitted in href and non-image src attributes. Values must include the trailing colon (e.g. 'https:'). Any link whose URL scheme is not in this list has its attribute removed.
protocols: ['https:']
​
imgProtocols
string[]
URL protocols permitted specifically in img[src] attributes. Use this in combination with dataImages to control whether data URIs are allowed for images independently of other URL protocols.
imgProtocols: ['https:']
​
dataImages
boolean
When true, data URI image sources (data:image/*;base64,...) are permitted in img[src], in addition to any entries in imgProtocols. When false, data URI images are stripped even if a data: scheme appears in imgProtocols. Defaults to false in a fully custom config.
dataImages: false
​
styles
string[]
An allowlist of CSS property names that may appear in style attributes. Any CSS property not in this array is removed from the style value. Pass an empty array ([]) to strip all inline styles.
styles: ['color', 'font-weight', 'text-align']

​
Hardening example

For applications where users should only be able to produce minimal formatted text — with no images, no heading tags, no inline styles, and only HTTPS links — you can lock the sanitizer down to a strict subset: 
new Editor('#editor', {
  sanitize: {
    tags: ['p', 'strong', 'em', 'a', 'code', 'pre'],
    attrs: {
      '*': ['class'],
      a: ['href', 'title', 'rel', 'target']
    },
    protocols: ['https:'],
    imgProtocols: ['https:'],
    dataImages: false,
    styles: []
  }
});
This configuration:
  • Limits content to six tags — paragraphs, bold, italic, links, inline code, and code blocks.
  • Permits only the class attribute on all elements, plus href, title, rel, and target on <a> tags.
  • Allows only https: link targets, blocking http:, ftp:, javascript:, and all other schemes.
  • Disables all data-URI images.
  • Strips all inline CSS from every element.
Setting styles: [] is the simplest way to prevent users from smuggling arbitrary CSS (such as position: fixed overlays or invisible text) into your page.