After Orlando upgrade TinyMCE is stripping the 'style' attribute irrespective of the HTML Sanitizer


Description

After upgrading to Orlando, TinyMCE is stripping the 'style' attribute irrespective of the HTML Sanitizer. This is occurring due to the various TinyMCE versions integrated with ServiceNow versions.

Steps to Reproduce

1. Go to an Orlando instance.
2. Go to kb_knowledge.list and open any article.
3. In the article content field open the source code and add the following:
<p><iframe src="https://www.google.com" width="400" height="400" style="border: none;"></iframe></p>
4. Save the source code content, but not the kb article record.
4. Reopen the source code and notice the style tag is not present anymore.

Workaround

This problem has been fixed. If you are able to upgrade, review the Fixed In section to determine the latest version with a permanent fix your instance can be upgraded to.
 
A possible workaround on older versions is to set/append system property ‘glide.ui.html.editor.extended_valid_elements’ to the value:
 
Element/tag
glide.ui.html.editor.extended_valid_elements value
<style>
+style[id|accesskey|class|dir|lang|style|tabindex|title|role|contenteditable|contextmenu|draggable|dropzone|hidden|spellcheck|translate|xml:lang|media|type|scoped|xml:space]
<span>
+span[id|accesskey|class|dir|lang|style|tabindex|title|role|contenteditable|contextmenu|draggable|dropzone|hidden|spellcheck|translate|xml:lang]
 
'+' Makes the element open if no child nodes exists. For example, '+a'. Otherwise, empty elements (those without child nodes or attributes) will be removed.
 
Workaround details:
 
If the TinyMCE html editor is removing required elements or attributes when the editor saves, it could be due to the valid_elements property as set during initialization of the editor. To add multiple rules or for more information, See tinymce docs here: https://www.tiny.cloud/docs/configure/content-filtering/#extended_valid_elements
 
The editor removes unnecessary or unknown elements for safety purposes to avoid cross-site scripting attacks due to inputs. The rules on the default valid_elements property can be extended by adding rules to the extended_valid_elements property (system property: ‘glide.ui.html.editor.extended_valid_elements’). However, if there is an existing rule for an element, extending the rule will override it. So, in order to maintain and extend the existing rule, the user must include the existing rule and add the new rule to it.
 
Example: To allow empty <span> elements, you could set the system property to ‘+span[*]’
However, that will allow span elements with any attributes. For safety, it’s encouraged to specify which attributes to allow for an element. The default rule(s) for an element/attribute is set during initialization of the editor.
 
To get the current rule, the user would need open the browser developer console and run  tinymce.activeEditor.schema.getElementRule(<element name>)
 
Ex. For the default rule for <span> use: tinymce.activeEditor.schema.getElementRule('span')
 
This returns an object with attributes, attributesOrder, removeEmpty, and removeEmptyAttrs
You can replace the * with the contents of attirubtesOrder or attributes
For example: tinymce.activeEditor.schema.getElementRule('span').attributesOrder.join('|')
will return "id|accesskey|class|dir|lang|style|tabindex|title|role|contenteditable|contextmenu|draggable|dropzone|hidden|spellcheck|translate|xml:lang”, which is the rule for the span element.
 
This modifies extended_valid_elements only, affecting the attributes of the span, not for nested child elements.
 
For this example, the new rule to allow empty span elements would prepend a ‘+’ sign to allow empty <span> elements:
+span[id|accesskey|class|dir|lang|style|tabindex|title|role|contenteditable|contextmenu|draggable|dropzone|hidden|spellcheck|translate|xml:lang]
 
So, you would set the above string as the Value for the system property glide.ui.html.editor.extended_valid_elements, and refresh the browser page with the tinymce editor to see the results on save or other action, such as source code view.
 
Please refer to the TinyMCE documentation for details on the rules and syntax.

 


Related Problem: PRB1400559