How to properly only allow e.g. style color using rehype-sanitize? - Custom schema syntax

[RARgames]

Hey,
I want to filter any other styles and leave just the color after sanitizing.
How can I properly do it?

In my case I use:

    const rehypePlugins = [
      [
        rehypeSanitize,
        {
          ...defaultSchema,
          attributes: {
            ...defaultSchema.attributes,
            strong: [['style']],
          },
        },
      ],
    ];

This works, but it allows any style in <strong>. Is it possible to limit it to colors?

[ChristianMurphy]

Welcome @RARgames! 👋

How can I properly do it?

Don't use inline styles.
They are difficult to theme, they are difficult to update, they tend to be insecure, they break most reasonable content security policies.

Instead use a preset list of allowed class names, which apply colors.
see: https://github.com/rehypejs/rehype-sanitize#example-syntax-highlighting

Is it possible to limit it to colors?

It is possible, but not with rehype-santize alone, and is rather risky.
You'd need to create your own rehype plugin https://unifiedjs.com/
Visit the tags with style attributes, then use another parser to analyze the CSS.
Like https://postcss.org/, https://github.com/shawnbot/sast, or https://lightningcss.dev/transforms.html
To pick out which properties accept colors, validate that what is passed in is in fact a color, and remove unsafe colors like data urls, remote urls, and scripted colors.
It's possible, but risky. It requires some fairly in-depth understanding on the CSS spec, security, and how browsers work.

[RARgames]

Thanks for the answer and valuable links!

In the meantime I did my own research and ended up creating a small plugin.

Don't use inline styles. They are difficult to theme, they are difficult to update, they tend to be insecure, they break most reasonable content security policies.

Instead use a preset list of allowed class names, which apply colors. see: https://github.com/rehypejs/rehype-sanitize#example-syntax-highlighting

It's for the end users, so they could have text of any color (not just a few from the preset) from the input in the text area (Markdown Editor) e.g.
**Styled bold text**<!--rehype:style=color: red; fontSize: 42px;--> should make the red bold text: Styled bold text without changing the font size.

How would you suggest doing it?

• I cannot see any other "good" options than accepting any input from the end user, sanitizing it using rehype-sanitize (change schema to accept any style) and then using my plugin to remove extra styles.

Here is how I achieve that. Might be far from perfect (still have to do extra color validation), but it's a working first version:

function traverse(node) {
  if (node.properties && node.properties.style) {
    const { style } = node.properties;
    const styleArray = style.split(';');
    const newStyle = styleArray.filter((property) => /color/.test(property)).join(';');
    node.properties.style = newStyle;
  }
  if (node.children) {
    node.children.forEach((child) => traverse(child));
  }
}

function removeStylesPlugin() {
  function transformer(tree) {
    traverse(tree);
    return tree;
  }
  return transformer;
}

const rehypePlugins = [
  [
    rehypeSanitize,
    {
      ...defaultSchema,
      attributes: {
        ...defaultSchema.attributes,
        strong: [['style']],
      },
    },
  ],
  [removeStylesPlugin],
];

[ChristianMurphy]

It's for the end users, so they could have text of any color (not just a few from the preset) from the input in the text area (Markdown Editor)

I would strongly recommend giving users a set of well known preset colors rather than any arbitrary color.
Websites usually go through a design refresh every 1-3 years, all of the user generated content was chosen by users to fit with the look at the time.
When the theme changes, all the custom user generated content, at best looks out of place, more often than not it becomes an accessibility and readability nightmare.

**Styled bold text**<!--rehype:style=color: red; fontSize: 42px;-->

I would also strongly advise using directives, over encouraging embedded HTML in your content.
Markdown has directives for content extension, leverage them, they are safer and more standard https://github.com/remarkjs/remark-directive
see previous discussion: https://github.com/orgs/remarkjs/discussions/1254#discussioncomment-7459094

example:

:red[text to be colorful] :blue[text to be different color]

const newStyle = styleArray.filter((property) => /color/.test(property)).join(';');

Again accepting all color is unsafe.
Color can contain URLs, functions, and other unsafe constructs.
A regular expression alone will allow insecure content through.
If you do allow arbitrary color values, use a proper CSS parser like the ones noted in https://github.com/orgs/rehypejs/discussions/158#discussioncomment-7542121 to more thoroughly scan content.

How would you suggest doing it?

Use markdown directives, generate CSS class names, only allow the known and approved CSS class names through the sanitizer.

[RARgames]

Thanks! You convinced me that this is the way to go. However I cannot use remark-directive, because it'll be visible on other sites.
I decided to use comments and match colors names with custom classes.