Contribute to this guideReport an issue

guideDisallowed Content

The Disallowed Content feature was introduced in CKEditor 4.4 as a part of the Advanced Content Filter system which was introduced in CKEditor 4.1.

The Disallowed Content feature complements the existing Allowed Content feature in that it lets you explicitly blacklist elements that you do not want to have in your CKEditor 4 content. You can use it to limit the features that would otherwise be available in the fully automatic Advanced Content Filter mode.

Disallowed content can be defined in the CKEDITOR.config.disallowedContent setting or may be dynamically added with the CKEDITOR.filter.disallow method. It has a higher priority than content allowed automatically or by the CKEDITOR.config.allowedContent setting, hence it is possible to correct automatic settings or achieve more complex results like “allow all attributes except those starting with on*”.

It is not possible to disallow content when the Advanced Content Filter is disabled by setting CKEDITOR.config.allowedContent to true. A similar solution can be achieved by allowing all HTML elements.

# Disallowed Content Rules

Disallowed content rules are very similar to the allowed content rules. They can be specified in two formats (string and object), however, it is not possible to specify required properties (which simply would not make any sense in this case).

When only element names are defined, a rule disallows entire elements (and thus these elements will be removed). When a rule also contains property names, only these properties (attributes, styles, classes) will be removed, not elements (unless some required property was removed).

Best to see it in examples.

  1. Disallowing entire elements.

    config.allowedContent = 'h1 h2 h3 p';
    config.disallowedContent = 'h2 h3';
    // Input:    <h1>Foo</h1><h2>Bar</h2><h3>Bom</h3>
    // Filtered: <h1>Foo</h1><p>Bar</p><p>Bom</p>
    
  2. Disallowing attributes, classes, and styles.

    config.allowedContent = 'p[*]{*}(foo,bar)';
    config.disallowedContent = 'p[on*](foo)';
    // Input:    <p>Foo</p><p onclick="..." data-foo="1" class="foo bar">Bar</p>
    // Filtered: <p>Foo</p><p data-foo="1" class="bar">Bar</p>
    
  3. Disallowing a required property.

    config.allowedContent = 'p; img[!src,alt]';
    config.disallowedContent = 'img[src]';
    // Input:    <p><img src="../assets/img/..." alt="..."/></p>
    // Filtered: <p/>
    
  4. Disallowing properties on all elements.

    config.allowedContent = 'p em{*}';
    config.disallowedContent = '*{font*}';
    // Input:    <p style="color: red; font-size: 12px"><em style="font: 'Arial'">Foo</em></p>
    // Filtered: <p style="color: red"><em>Foo</em></p>
    
  5. Tweaking automatically allowed content.

    // Enabled plugins: image and table.
    config.disallowedContent = 'img{border*,margin*}; table[border]{*}';
    

    With this code implemented, open the Image Properties dialog window and see that the Border, HSpace, and VSpace fields were hidden. You can also open the Table dialog window and see that the Border, Width, and Height fields were hidden, too.

# How to Allow Everything Except…

A popular requirement is to allow all HTML features except a few specific ones. In this case setting CKEDITOR.config.allowedContent to true is not a solution, because this completely disables the Advanced Content Filter, so CKEDITOR.config.disallowedContent will not work either.

Therefore the only solution is to write an allowed content rule allowing all elements. Fortunately, this can be done easily by using the object format of allowed content rules and the CKEDITOR.dtd object.

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = 'script; *[on*]';

The above code sample will allow everything except for the <script> elements and attributes starting from 'on'.

Please note that enabling all possible HTML will pose a security threat to your application. It is recommended to only enable essential HTML that content creators need. Read more about best security practices.

# Further Reading

Refer to the following resources for more information about content filtering: