Prevent XSS “on” Attribute Attacks in CKEditor 3.x

By  on  

CKEditor 3.x had issues with XSS /security issues with on attributes.  For example, you could trigger malicious code via an onerror attribute -- ouch!  Of course the problem has been fixed in CKEditor 4 but upgrading can be an issue if you have custom plugins.  Here's how the issue can be solved!

The JavaScript

We'll use prototype monkey-patching to accomplish this security fix:

// Prevent bad on* attributes (https://github.com/ckeditor/ckeditor-dev/commit/1b9a322)
var oldHtmlDataProcessorProto = CKEDITOR.htmlDataProcessor.prototype.toHtml;
CKEDITOR.htmlDataProcessor.prototype.toHtml = function(data, fixForBody) {
    function protectInsecureAttributes(html) {
        return html.replace( /([^a-z0-9<\-])(on\w{3,})(?!>)/gi, '$1data-cke-' + CKEDITOR.rnd + '-$2' );
    }
    
    data = protectInsecureAttributes(data);
    data = oldHtmlDataProcessorProto.apply(this, arguments);
    data = data.replace( new RegExp( 'data-cke-' + CKEDITOR.rnd + '-', 'ig' ), '' );

    return data;
};

The toHtml method of CKEDITOR.htmlDataProcessor is modified to remove the troublesome on attributes during HTML render within the editor, but the attributes are indeed kept within the editor contents value and will display when you switch CKEditor to source mode.  Problem solved!

Recent Features

  • By
    9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Discussion

  1. I also noticed that, so what next ????

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!