Commit b1b3c0f3 authored by krisahil's avatar krisahil
Browse files

Issue #3265054 by krisahil: CKEditor should be aware of (dis)allowed HTML tags

parent 0f03f264

README.md

+46 −0
Original line number Diff line number Diff line
@@ -121,6 +121,52 @@ sending it to the pattern's template (e.g., to a Twig file). Even though you 
select a Text format in order to load CKEditor, Patternkit will not process the

contents of a WYSIWYG field through that text format's filters.



##### CKEditor content filtering



If using CKEditor as the wysiwyg plugin, you can configure the schema to allow

or disallow certain HTML tags and attributes. This feature uses [CKEditor's

content filtering

system](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html).



###### Setting allowed content



To set which content is allowed, use property `allowedContent` in the `options`

key of your schema. The property's value will be passed as-is to CKEditor's

`allowedContent` configuration ([expected

format](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_allowed_content_rules.html)).



###### Setting disallowed content



Conversely, to prevent certain content, use property `disallowedContent` in the

`options` key of your schema. The property's value will be passed as-is to

CKEditor's `disallowedContent` configuration ([expected

format](https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html)).



###### Example



In this example, only links, bold/strong, and italic/emphasis tags are allowed.

You can use any attributes on these elements (including class, style, and other

attributes), except ones prefixed with `data-`.



```json

    "formatted_text": {

      "title": "Formatted Text",

      "type": "string",

      "format": "html",

      "options": {

        "wysiwyg": true,

        "allowedContent": "a b strong em i[*](*){*}",

        "disallowedContent": "*[data-*]"

      }

    },

```



_Security note_: Filtering content at the CKEditor layer (i.e., at content

entry) does not filter it when rendered. For example, if you disallow `onclick`

attributes in CKEditor but the pattern's template (e.g., Twig) does not strip

those attibutes, a user might possibly save content with an `onclick` attribute,

and that attribute would be rendered to the page.



### Other settings

The following settings are not available for configuration in the UI, so you must set

them in config item `patternkit.settings` manually:

js/patternkit.jsoneditor.ckeditor.es6.js

+12 −0
Original line number Diff line number Diff line
@@ -32,6 +32,16 @@ class DrupalCKEditor extends JSONEditor.defaults.editors.string { 
        format: this.options.ckeditor_config.selected_toolbar,

      };



      // The schema can determine which HTML tags are allowed and disallowed.

      // These settings are passed as-is to CKEditor's ACF (content filtering)

      // system. See https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html.

      if (this.schema.options.allowedContent) {

        this.options.ckeditor_config.allowedContent = this.schema.options.allowedContent;

      }

      if (this.schema.options.disallowedContent) {

        this.options.ckeditor_config.disallowedContent = this.schema.options.disallowedContent;

      }



      // @see Drupal.editors.ckeditor._loadExternalPlugins

      const externalPlugins = this.options.ckeditor_config.drupalExternalPlugins;

      if (externalPlugins) {
@@ -109,6 +119,8 @@ class DrupalCKEditor extends JSONEditor.defaults.editors.string { 
    if (this.always_disabled) {

      return;

    }

    // @TODO Fix this because, when the form is initially loaded, this throws a

    // JS error.

    if (this.ckeditor_instance) {

      this.ckeditor_instance.setReadOnly(false);

    }

js/patternkit.jsoneditor.js

+15 −2
Original line number Diff line number Diff line
@@ -82,7 +82,18 @@ var DrupalCKEditor = /*#__PURE__*/function (_JSONEditor$defaults$) { 








        this.options.ckeditor_config.drupal = {









          format: this.options.ckeditor_config.selected_toolbar









        }; // @see Drupal.editors.ckeditor._loadExternalPlugins









        }; // The schema can determine which HTML tags are allowed and disallowed.









        // These settings are passed as-is to CKEditor's ACF (content filtering)









        // system. See https://ckeditor.com/docs/ckeditor4/latest/guide/dev_acf.html.

















        if (this.schema.options.allowedContent) {









          this.options.ckeditor_config.allowedContent = this.schema.options.allowedContent;









        }

















        if (this.schema.options.disallowedContent) {









          this.options.ckeditor_config.disallowedContent = this.schema.options.disallowedContent;









        } // @see Drupal.editors.ckeditor._loadExternalPlugins

























        var externalPlugins = this.options.ckeditor_config.drupalExternalPlugins;
















@@ -161,7 +172,9 @@ var DrupalCKEditor = /*#__PURE__*/function (_JSONEditor$defaults$) {







    value: function enable() {









      if (this.always_disabled) {









        return;









      }









      } // @TODO Fix this because, when the form is initially loaded, this throws a









      // JS error.

























      if (this.ckeditor_instance) {









        this.ckeditor_instance.setReadOnly(false);