Search code examples
ckeditorxss

How can I disable the Preview button while in Source Mode with CKEditor 4?


We are using the latest version 4.7.3 of CKEditor (Full) available from nuget. We've tried a number of suggested solutions to disable the Preview toolbar button while in Source Mode, but could not get it to work. There are cases when there are more than one editor on a page, and they are added as user controls (.ascx) due to some unrelated logic. For example we've tried the below:

CKEDITOR.on('instanceReady', function (instance) {
    instance.editor.addCommand('preview', {
        modes: { wysiwyg: 1, source: 0 }
    });
});

We configure the toolbar buttons via config.js.

CKEDITOR.editorConfig = function (config) {
    config.toolbar_CMToolbar =
        [
            { name: 'sourcedialog', items: ['Source', '-', 'Preview'] }
        ];
};

The reason we need this is to avoid a security issue when malicious script has been added while in Source Mode and the Preview was immediately requested, causing javascript to execute. Ordinarily the wysiwyg mode would clean this up and the malicious scripts would have been validated.

Below is the sample script that triggers the issue, for reference. (include everything from double-quote to tag close)

"><img src=x onerror=alert(7)>

Granted this is just evading the main issue rather than fixing it, but this workaround would be handled quicker.

Hoping to hear suggestions on how to correct this. Thanks!


Solution

  • You can change properties of commands like this:

    CKEDITOR.on('instanceReady', function(evt) {                
        evt.editor.commands.preview.modes.source = 0;
    });