Sometimes you want to use CKEditor in a page where you can't fully trust the users, so they will have a restricted version with just some basic features: headings, bold, maybe links and images...
Of course it's easy to adjust the toolbar to show only those options, and with a good filter at the server you can be quite safe to accept the situation, but it would be even better if anything that will be stripped out at the server couldn't be added to the editor for example by pasting.
The fact is that using the dataProcessor of CKEditor it isn't too hard to setup something basic to perform the task: listen for each element and reject the ones that aren't whitelisted.
I've created a little plugin that does that job. It comes preconfigured with just some basic elements and attributes, but it's possible to modify that as it's just a simple javascript object that you can define in the CKEditor configuration.
Download: Whitelist plugin for CKEditor 1.1
Please, remember that you must use a filter at the server to perform at the very least the same filtering (or better) because this is not a real security option.
For PHP you can use HTML Purifier, in the case of Asp.Net previously the solution was the Microsoft AntiXss library but in January they released a broken version and haven't fixed it despite the complains. (Does anyone know an alternative solution)
This sample uses the default whitelist so it won't allow most HTML elements, and only basic attributes on links or images.
Edit: 20/01/13
Updated to version 1.1 to fix the attributes bug mentioned by Chris Hough
13 comments:
if you trigger the source button after creating a link i.e. pointing to google you will see it breaks the anchor tag?
ups, yes, it seems that there's a bug down there but I thought that I tested and it worked correctly when I created it.
Don't worry, there's a new feature that it's being worked on for CKEditor 4.1 that will make you laugh at how simply this plugin is.
do you have a git hub repo for this? I just fixed a part of it and would like to post it for you?
just saw your reply, while 4.1 is coming out soon do you happen to know the final release date? we need to fix our setup asap.
Hi Chris
I've created this repository https://github.com/AlfonsoML/whitelist but I'm still fighting trying to understand how to properly use GitHub so don't worry if you try to request a pull and see something wrong on my side. Just let me know about the problem and I'll keep on trying until it's fine :-)
With regards to 4.1, that's supposed to be released on February according to their roadmap: http://dev.ckeditor.com/roadmap
The feature that you're looking for is http://dev.ckeditor.com/ticket/9829
You can try to follow the description and code that it's being worked on. If you're able to understand and follow what they're talking about (I gave up sometime ago as it seems to me as a monster feature that it's being crafted based mostly on ideas instead of smaller steps that are easier to improve little by little) they'll be glad to hear your comments about your requirements and the way that the current code looks like.
Hi
I just installed ckeditor and the whitelist plugin but I get the following error:
Unhandled exception at line 180, column 249 in http://localhost:6641/ckeditor/ckeditor.js
0x800a138f - JavaScript runtime error: Unable to get property 'icons' of undefined or null reference
If I remove "config.extraPlugins = 'whitelist';" from the config.js then the ckeditor loads ok but of course no whitelist functionality.
Please advise how to resolve.
You can start by stating which is your browser and your version of CKEditor.
If you have made any other customizations to CKEditor, if you're using the sample pages or you're in a big page with lots of other javascript libraries.
And of course, an URL to check the problem would be nice.
aha I found the problem, at least it is not erroring now - typo on my part :)
But it does not remove any tags not in the whitelist. I am free to go into "source" mode in ckeditro and type div and script tags, but when I switch back from source mode it does not strip any tags not on the whitelist.
At what point are the tags stripped? do I need to invoke the stripping process somehow?
I am using ckeditor 4.0.1 downloaded yesterday in a dev/eval environment with no customisation, and a very simple test page.
Thanks
thank again @Alfonso
I posted the snippet here: https://github.com/AlfonsoML/whitelist/issues/1
Hi Again
On further testing, I discovered that using
config.extraPlugins = 'whitelist';
in the ckeditor config.js does not load the "whitelist" plugin.
The only way to get the plugin to load is to add it to the field like this
CKEDITOR.replace('Notes', { extraPlugins: 'whitelist' });
Is this a bug or an oversight? or is my config.js line bad?
I am using ckeditor 4.0.1 with ie10
thanks
@Chris
Thanks again, the 1.1 version fixes that problem
@Ian
Then the problem isn't the plugin but the way that you're integrating CKEditor. You might be forcing it to ignore the config.js file and use a different one instead, or no extra config file, or maybe you're getting a cached copy,... Follow the basic tutorials on CKEditor about how to change the configuration.
Hi @Alfonso
I checked everything and the config.js is being picked up as I can change the colour as follows:
config.uiColor = '#A1CFF3';
The ckeditor is just a vanilla copy with only the colour above set and the whitelist adddin included.
It is in its default installation folder with no changes.
Please advise.
Thanks
Post a Comment