Overview

By default, all documents rendered by unified-doc are safely-sanitized after all plugins are applied. This, however, means that you may need to customize sanitzation schema for your specific needs if the default is too restrictive. When using with marks and plugins, you may need to define custom sanitzation schemas to whitelist stylistic features of various plugins.

Default/safe schema

The default sanitization schema ensures that the doc is safely-sanitized.

Live Code Editor

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><mark data-mark-id="a" class="highlight" style="background: red;">some</mark> HTML content</blockquote>',
    filename: 'doc.html',
    sanitizeSchema: {}, // default value
  });
  return doc.compile().result; // no class, style, data-* attributes etc
}

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><mark data-mark-id="a" class="highlight" style="background: red;">some</mark> HTML content</blockquote>',
    filename: 'doc.html',
    sanitizeSchema: {}, // default value
  });
  return doc.compile().result; // no class, style, data-* attributes etc
}

Preview

some HTML content

No/unsafe schema

Setting the sanitizeSchema value to null skips sanitization of the document. This is a convenient setting to render documents 'as-is'. However, use this only if you have sufficient trust with your source code and user generated content.

Improper use of santization can open you up to a cross-site scripting (XSS) attack. The defaults are safe, but deviating from them is likely unsafe.

Live Code Editor

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><mark data-mark-id="a" class="highlight" style="background: red;">some</mark> HTML content</blockquote>',
    filename: 'doc.html',
    sanitizeSchema: null,
  });
  return doc.compile().result; // no class, style, data-* attributes etc
}

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
function() {
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><mark data-mark-id="a" class="highlight" style="background: red;">some</mark> HTML content</blockquote>',
    filename: 'doc.html',
    sanitizeSchema: null,
  });
  return doc.compile().result; // no class, style, data-* attributes etc
}

Preview

some HTML content

Convenient schema

The following schema is conveniently used in most scenarios by unified-doc. This schema whitelists the following stylistic and attributes.

Live Code Editor

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';

function() {
  const sanitizeSchema = {
    attributes: {
      '*': ['className', 'style'],  // whitelist class and style attributes
      mark: ['dataMarkId', 'id'],  // whitelist data-mark-id and id attribute for only mark elements
    },
    clobberPrefix: '', // remove prefix for user-generated data attribute values
  };

  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><mark data-mark-id="a" class="highlight" style="background: red;">some</mark> HTML content</blockquote>',
    filename: 'doc.html',
    sanitizeSchema,
  });

  return doc.compile().result;
}

// import { createElement } from 'react';
// import rehype2react from 'rehype-react';
// import Doc from 'unified-doc';
function() {
  const sanitizeSchema = {
    attributes: {
      '*': ['className', 'style'],  // whitelist class and style attributes
      mark: ['dataMarkId', 'id'],  // whitelist data-mark-id and id attribute for only mark elements
    },
    clobberPrefix: '', // remove prefix for user-generated data attribute values
  };
  const doc = Doc({
    compiler: [[rehype2react, { createElement }]],
    content: '<blockquote><mark data-mark-id="a" class="highlight" style="background: red;">some</mark> HTML content</blockquote>',
    filename: 'doc.html',
    sanitizeSchema,
  });
  return doc.compile().result;
}

Preview

some HTML content