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
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    MooTools Fun with Fx.Shake

    Adding movement to your website is a great way to attract attention to specific elements that you want users to notice. Of course you could use Flash or an animated GIF to achieve the movement effect but graphics can be difficult to maintain. Enter...

  • By
    Facebook-Style Modal Box Using MooTools

    In my oh-so-humble opinion, Facebook's Modal box is the best modal box around. It's lightweight, subtle, and very stylish. I've taken Facebook's imagery and CSS and combined it with MooTools' awesome functionality to duplicate the effect. The Imagery Facebook uses a funky sprite for their modal...

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!