Revisiting Color in Markup

@perlygatekeeper

Changes to the sanitize (step 2):

color_transformer = lambda do |env|
  node = env[:node]
  
  # Only process element nodes with a style attribute
  return unless node.type == Nokogiri::XML::Node::ELEMENT_NODE
  return unless node['style']

  # Parse each declaration
  allowed_declarations = node['style'].split(';').filter_map do |declaration|
    property, value = declaration.split(':').map(&:strip)
    next unless property == 'color'

    # Allow only:
    # - Named colors: red, blue, darkslategray, etc. OR NOT?
    # - Hex colors: #fff, #ff6600
    # - RGB: rgb(0, 128, 255)
    # - HSL: hsl(120, 100%, 50%)
    valid_color = value.match?(
      /\A(
        \#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})        | # hex
        rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)  | # rgb()
        hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\) | # hsl()
        [a-zA-Z]{2,50}                              # named color
      )\z/x
    )

    "color: #{value}" if valid_color
  end

  if allowed_declarations&.any?
    node['style'] = allowed_declarations.join('; ')
  else
    node.remove_attribute('style')
  end
end

--- THEN ADD THIS TO THE SANITIZE CONFIG ---

config = {
  elements: ['p', 'span', 'em', 'strong'],
  attributes: {
    :all => ['style']
  },
  css: {
    properties: ['color']
  },
  transformers: [color_transformer]
}

Sanitize.fragment(html, config)

Originally posted by @perlygatekeeper in #1440

Benefits of this is that it relies on the the sanitize gem's own configuration capabilities in a clean and clear way, applies on on step 2 only, very clearly and a customizable way.

What gets through vs blocked:

Input style value           | Regex match         | Result
color: red                  | ✅ named             | allowed
color: #fff                 | ✅ hex short         | allowed
color: #ff6600              | ✅ hex long          | allowed
color: rgb(0, 128, 255)     | ✅ rgb               | allowed
color: hsl(120, 100%, 50%)  | ✅ hsl               | allowed
color: expression(alert(1)) | ❌                   | stripped
color: url(evil.com).       | ❌                   | stripped
color: red; position: fixed | ⚠️                   | only color: red kept
color: currentColor.        | ✅ named fallthrough | allowed
color: rgba(0,0,0,0)        | ❌ not in regex      | blocked*

Any news on this?

Cambios en el desinfectante (paso 2):

color_transformer = lambda do |env|
  node = env[:node]
  
  # Only process element nodes with a style attribute
  return unless node.type == Nokogiri::XML::Node::ELEMENT_NODE
  return unless node['style']

  # Parse each declaration
  allowed_declarations = node['style'].split(';').filter_map do |declaration|
    property, value = declaration.split(':').map(&:strip)
    next unless property == 'color'

    # Allow only:
    # - Named colors: red, blue, darkslategray, etc. OR NOT?
    # - Hex colors: #fff, #ff6600
    # - RGB: rgb(0, 128, 255)
    # - HSL: hsl(120, 100%, 50%)
    valid_color = value.match?(
      /\A(
        \#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})        | # hex
        rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)  | # rgb()
        hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\) | # hsl()
        [a-zA-Z]{2,50}                              # named color
      )\z/x
    )

    "color: #{value}" if valid_color
  end

  if allowed_declarations&.any?
    node['style'] = allowed_declarations.join('; ')
  else
    node.remove_attribute('style')
  end
end

--- LUEGO AÑADE ESTO A LA CONFIGURACIÓN DE DESINFECTAR ---

config = {
  elements: ['p', 'span', 'em', 'strong'],
  attributes: {
    :all => ['style']
  },
  css: {
    properties: ['color']
  },
  transformers: [color_transformer]
}

Sanitize.fragment(html, config)

Publicado originalmente por@perlygatekeeperen #1440

@zkoppert

Within the context of the sanitize gem being intentionally strict, I would suggest that the rule be modified as such:

- # Allow only:
-    # - Named colors: red, blue, darkslategray, etc. OR NOT?
-    # - Hex colors: #fff, #ff6600
-    # - RGB: rgb(0, 128, 255)
-    # - HSL: hsl(120, 100%, 50%)
+ # Allow only hex colors: #fff,#ff6600
   valid_color = value.match?(
      /\A(
+         \#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})        | # hex, prefer full three-byte form but fallback to shorthand
-          \#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})        | # hex
-          rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)  | # rgb()
-          hsl\(\s*\d{1,3}\s*,\s*\d{1,3}%\s*,\s*\d{1,3}%\s*\) | # hsl()
-          [a-zA-Z]{2,50}                              # named color
      )\z/x
   )

I'd also suggest adding that if a shortform hex was matched, it gets automatically expanded to a full three-byte form (e.g. #09C -> #0099CC) to ensure global consistency of what value is saved and then later passed along to a renderer.

This allows for full 24 bits "true colour" in a developer-focused, globally 'standard' (insomuch as there is one), and concise format while limiting the opening of any abuse to it's absolute minimum. At a quick check I believe this doesn't open any risk to injection, homograph attacks - only the possibility of having lime green text on a white background.

Now, this doesn't address why #369 and #1440 were closed, not in a small part because GitHub and @zkoppert provided little direct feedback to address the long-standing issue (and with #1440 closed on cart vs horse semantics).

It's worth noting that CommonMark, which GFM is based on, also does not have support for color attributes. Discussion about color alone get redirected (and then lost) in a larger discussion on supporting a broad scope of attributes.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Sigh.

Do we have any hope that since I spelled out a perfectly safe, easy and satisfying fix that this issue will be any more successful than the last 2 issues?

Do we have any hope that since I spelled out a perfectly safe, easy and satisfying fix that this issue will be any more successful than the last 2 issues?

Judging by the many other issues, discussions, etc that have come and gone about this specific subject, I am very confident that there is no hope.

But this one has not been closed yet… Maybe it will be in the next decade, or, surprisingly, solved before that happens.

How can I get more people invested in this?

Navigation Menu

Repository navigation

Revisiting Color in Markup #2054

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Revisiting Color in Markup #2054

Description

Activity

perlygatekeeper commented on Apr 24, 2026

BraianS commented on May 24, 2026

bakano69-del commented on Jul 7, 2026

asclepiadae commented on Jul 7, 2026

github-actions commented on Sep 6, 2026

Atemo-C commented on Sep 6, 2026

perlygatekeeper commented on Sep 7, 2026

Atemo-C commented on Sep 7, 2026

perlygatekeeper commented on Sep 27, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions