Color inline style inside <p> tag

Experience Manager (PaaS/OnPrem)
1

Hi,

Whenever I am adding color inline style inside

tag like the below, it removes the style attribute from the resulting html inside RTE. This works perfectly fine for any other inline style like “text-align:justify”

This is a paragraph.

The filteringHtmlCleanerService has the “style” attribute for

tag mentioned.

If i set allowedContent: true in ckeditor.config.overlayed.json then it allows the inline color style but i am worried about any other security implications if we allow everything

We are on hippo release 11.2.1. Any help is much appreciated!

Thx,
Prabu

2

Well, you’ve just disabled the client side html cleaning. You can be more specific. There is also server side html cleaning if you need or want more control. See the documentation.

3

Hi Jasper, thanks for the response. Sorry if i was not clear in my ask earlier. Without any setting change, the ‘style=“color:red”’ inline style was completely removed from the html from the p tag below.

<p style="color:red;">This is a paragraph.</p>

What should i do to retain this inline style in ‘p’ tag?

4

Hi,
The server side configuration of the <p> element is at /hippo:configuration/hippo:modules/htmlprocessor/hippo:moduleconfig/richtext/p but looks like the default already allows “style” attribute.

So it’s probably client side, then please tweak CK Editor config using allowedContent or extraAllowedContent in property ckeditor.config.appended.json property, either at /hippo:namespaces///editor:templates/default//cluster.options or for all HTML fields at /hippo:namespaces/hippostd/html/editor:templates/default/root.

There’s a link to CKEditor config documentation in the page Jasper provided.

HTH
Jeroen

5

I tried to set extraAllowedContent to ‘(*);{*}’ in ckeditor.config.appended.json property but that does NOT work. Basically this should allow all classes and inline styles for all the tags but its not working for some reasons. Setting the same pattern for p tag in the extraAllowedContent also doesn’t work either

6

Hi,

You could set debug level to org.onehippo.ckeditor.CKEditorConfig to see how your configuration is working out. Other than than that, it’s in CK and personally I don’t know how to approach this further.

HTH
Jeroen

7

Hi there,

I’m not 100% sure, but I think CKEditor is correcting this as invalid HTML [1].

CKEditor cannot process invalid HTML, so it corrects it. I’m not an expert on markup, so I’m not sure if inline styles on p tags is WSC or not, but if it isn’t that would explain the behaviour you are seeing.

HTH,

William

[1] - https://ckeditor.com/blog/Did-You-Know-CKEditor-Is-Web-Standards-Compliant/

8

Hi Prabu,

What you want is possible. The simplest fix is to use the following ckeditor.config.overlayed.json value:

{
extraAllowedContent: ‘p{*}’
}

Some background: the default configuration of rich text fields already contains the following ‘extraAllowedContent’ property [1]:

embed[allowscriptaccess,height,src,type,width]; img[border,hspace,vspace]; object[align,data,height,id,title,type,width]; p[align]; param[name,value]; table[width]; td[valign,width]; th[valign,width];

It specifies the ‘p’ tag with the allowed attribute ‘align’:

p[align]

Adding the attribute ‘style’ won’t work because CKEditor’s advanced content filter (a.k.a. client-side HTML cleaning) treats styling separately. You can specify the allowed CSS properties between curly braces. For example, to only allow the ‘color’ and ‘padding’ properties use:

p{color,padding}

It’s also possible to allow all CSS properties using p{*} .

More background: the long default extraAllowedContent property value primarily exists for backwards-compatibility. The ‘simple fix’ above overrides it completely. The safest fix is to extend the default value with the extra configuration for the ‘p’ tag. In Hippo 11, that’s only possible by re-specifying the whole extraAllowedContent property in ckeditor.config.overlayed.json:

{
extraAllowedContent: ‘embed[allowscriptaccess,height,src,type,width]; img[border,hspace,vspace]; object[align,data,height,id,title,type,width]; p[align]{*}; param[name,value]; table[width]; td[valign,width]; th[valign,width];’
}

In version 12 it has become easier to extend the default extraAllowedContent property using ckeditor.config.appended.json. The default config there uses the ‘object notation’ instead of the ‘string notation’. See [3] for more details.

BTW: spec-wise, a ‘style’ attribute is valid for any HTML element. It’s a ‘global’ attribute [3].

hth,

Mathijs

[1] https://code.onehippo.org/cms-community/hippo-cms/blob/hippo-cms-4.2.11/richtext/ckeditor/frontend/src/main/java/org/hippoecm/frontend/plugins/ckeditor/CKEditorNodePlugin.java#L80

[2] https://www.onehippo.org/library/upgrade-11-to-12/upgrade-the-cms.html#ckeditor-changes

[3] https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style