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

Author: chhill-redhat

README.md

@@ -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

@@ -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

@@ -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);

modules/patternkit_example/lib/patternkit/src/atoms/example_filtered/dist/example_filtered.css

@@ -0,0 +1,15 @@
+(function () {
+  'use strict';
+
+  import './src/example_filtered.scss';
+  import example_filtered from './dist/example_filtered';
+
+  var element = Object.create(HTMLElement.prototype);
+  element.createdCallback = function () {};
+  element.attachedCallback = function () {};
+  element.detachedCallback = function () {};
+  element.attributeChangedCallback = function (attr, oldVal, newVal) {};
+  document.registerElement('example_filtered', {
+    prototype: element
+  });
+}());

modules/patternkit_example/lib/patternkit/src/atoms/example_filtered/dist/example_filtered.min.js

@@ -0,0 +1,31 @@
+{
+  "$schema": "http://json-schema.org/draft-04/schema#",
+  "category": "atom",
+  "title": "Example with filtered content",
+  "type": "object",
+  "format": "grid",
+  "properties": {
+    "text": {
+      "title": "Text",
+      "type": "string",
+      "options": {
+        "grid_columns": 4
+      }
+    },
+    "formatted_text": {
+      "title": "Formatted Text",
+      "type": "string",
+      "description": "Only links, bold/strong, and italic/emphasis tags are allowed (assuming CKEditor is the wysiwyg plugin). You can use any attributes on these elements (including class, style, and other attributes), except ones prefixed with \"data-\". This field's schema uses the \"disallowedContent\" rule to instruct CKEditor to strip these attributes. However, there is no server-side process that strips them. See Patternkit's README for details.",
+      "format": "html",
+      "options": {
+        "wysiwyg": true,
+        "allowedContent": "a b strong em i[*](*){*}",
+        "disallowedContent": "*[data-*]"
+      }
+    },
+    "hidden": {
+      "title": "hidden",
+      "type": "string"
+    }
+  }
+}

modules/patternkit_example/lib/patternkit/src/atoms/example_filtered/index.js

@@ -0,0 +1,26 @@
+This is an example Web Component showing content filtered by CKEditor, implemented as a Twig UI Pattern.
+
+It includes the following files:
+
+## example_filtered.json
+The JSON schema file delineates the schema of the pattern. In some cases, libraries may generate these from the Twig Docblock of the pattern Twig template file.
+
+## example_filtered.md
+This file. The text here should appear as pattern documentation in any Style Guide, Pattern Library, or pattern developer tool.
+
+This documentation often will include Style Rulesets, brand guidelines, designer intention, as well as usage advice.
+
+## example_filtered.scss
+Optional SASS to be compiled to CSS
+
+## example_filtered.ts
+Optional Typescript file to be transpiled to the final JS module. In some libraries, vanilla JS or other variants are used.
+
+## example_filtered.twig
+The HTML template for the pattern. Some libraries may also use Nunjucks, JSX, or Handlebars.
+
+## example_filtered.yml
+Sample data for the pattern. This can be used to generate demo sites, style guide example_filtereds, or pre-fill schema editors.
+
+## index.js
+The Web Component entry point.