[5.x]: HTML purifier config not working

[KarelJanVanHaute]

What happened?

Description

I'm trying to be able to use custom data attribute on elements in a CKEditor field.

I've tried it with adding this to my app.php under config.

'components' => [
            'purifier' => function() {
                $config = HTMLPurifier_Config::createDefault();
                $config->set('HTML.AllowedAttributes', ['class', 'id', 'style', 'data-*']);
                return new \HTMLPurifier($config);
            }
]

Steps to reproduce

1. add some code in a ckeditor field like <div data-test="test"></div>
2. look at your rendered code

Expected behavior

the attribute should be there

Actual behavior

the attribute is gone

Craft CMS version

5.5.9

PHP version

8.3.12

Operating system and version

Linux 6.12.5-linuxkit

Database type and version

MySQL 8.0.36

Image driver and version

Imagick 3.7.0 (ImageMagick 6.9.11-60)

Installed plugins and versions

[i-just]

Hi @KarelJanVanHaute,

When working with CKEditor, you will have to ensure you allow certain tags/attributes in both the CKEditor config and the HTML Purifier config. The easiest way to do that is to first disable the HTML Purifier for the field you’re working on, ensure that on save CKEditor is not removing any of the HTML you wish to retain, then turn on the HTML Purifier and tweak its config.

This issue: #217 goes into more detail on it.

You can define multiple HTML Purifier configs in json files located in the config/htmlpurifier/ folder and then choose which one you want to use when you create a CKEditor field. That way, you can easily use different configs for different fields, if you wish to.

The data- attributes are a bit more tricky with the HTML Purifier.
You have to add them to the HTML definition, and then you might have to allow them via config.

For example, to add a definition to allow for data-title attribute on p element, you can create a custom module (or plugin) and add something along those lines to the main class:

use craft\base\Event;
use craft\ckeditor\Field;
use craft\htmlfield\events\ModifyPurifierConfigEvent;

Craft::$app->onInit(function() {
   Event::on(
      Field::class,
      Field::EVENT_MODIFY_PURIFIER_CONFIG,
      function (ModifyPurifierConfigEvent $event) {
         if ($event->config) {
            $def = $event->config->getDefinition('HTML', true);
            $def?->addAttribute('p', 'data-title', 'Text');
         }
      }
  );
}

If you’re already using “HTML.AllowedAttributes” in the purifier config used by the field, then you might need to add data-title to the list there, too.

Also, please note that the HTML Purifier will force you to explicitly specify the attributes you want to allow, so using an asterisk isn’t an option.

I hope this helps!

I'll close this now, but feel free to reply if anything's unclear or if you have any further questions.