CKEditor automatically removes style attribute and add xss attribute 'removed' like if I put a style attribute in a element:

<div class="text-center" style="text-align: center;">Test Heading</div>

After save I got the following output:

<div class="text-center" xss="removed">Test Heading</div>

My configuration is:

var toolbar_custom=[
    { name: 'document', items: [ 'Source' ] },
    { name: 'editing', items: [ 'Scayt' ] },
    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ]}

];

jQuery(function(){
        CKEDITOR.replace('template_editor_custom',{
            uiColor:'#2778a7', 
            toolbar:toolbar_custom,
            autoParagraph:false,
            enterMode:CKEDITOR.ENTER_DIV,
            allowedContent:true,
            extraAllowedContent:'*{*}'
        })
    });

Html:

<textarea class="form-control textbox-style" id="template_editor_custom" name="page[content]" placeholder="Page content"><?php echo set_value('page[content]', $content); ?></textarea>

CKEditor automatically removes style attribute and add xss attribute 'removed' like if I put a style attribute in a element:

<div class="text-center" style="text-align: center;">Test Heading</div>

After save I got the following output:

<div class="text-center" xss="removed">Test Heading</div>

My configuration is:

var toolbar_custom=[
    { name: 'document', items: [ 'Source' ] },
    { name: 'editing', items: [ 'Scayt' ] },
    { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
    { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
    { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
    { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
    { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ]}

];

jQuery(function(){
        CKEDITOR.replace('template_editor_custom',{
            uiColor:'#2778a7', 
            toolbar:toolbar_custom,
            autoParagraph:false,
            enterMode:CKEDITOR.ENTER_DIV,
            allowedContent:true,
            extraAllowedContent:'*{*}'
        })
    });

Html:

<textarea class="form-control textbox-style" id="template_editor_custom" name="page[content]" placeholder="Page content"><?php echo set_value('page[content]', $content); ?></textarea>

• javascript
• php
• html
• ckeditor

4 Answers 4

I'm using CKEditor in CodeIgniter

It's worked using 2nd argument of $this->input->post('filed_name', FALSE)

Input Text

<div style="background-color:#eee; padding:15px">
    <span style="font-size:16px;"> <u>Friendly Reminder</u> </span>
</div>

Example 1

<?php
    echo html_escape($this->input->post('template_editor_custom'));
?>

Output

<div xss=removed>
    <span xss=removed> <u>Friendly Reminder</u> </span>
</div>

Example 2

<?php
    echo html_escape($this->input->post('template_editor_custom', FALSE));
?>

Output

<div style="background-color:#eee; padding:15px">
    <span style="font-size:16px;"> <u>Friendly Reminder</u> </span>
</div>

It's no an issue of CKEditor.
I suspect you are using CodeIgniter 2.x and you have enabled 'Global XSS Filtering'. You need to turn it off in you config file:

$config['global_xss_filtering'] = FALSE;

xss=removed is typical sanitizing method used in CodeIgniter.

I solve my problem by changing the core/Security.php file. Just go to _sanitize_naughty_html function and remove style tag from these two static array:

static $naughty_tags    = array(
            'alert', 'prompt', 'confirm', 'applet', 'audio', 'basefont', 'base', 'behavior', 'bgsound',
            'blink', 'body', 'embed', 'expression', 'form', 'frameset', 'frame', 'head', 'html', 'ilayer',
            'iframe', 'input', 'button', 'select', 'isindex', 'layer', 'link', 'meta', 'keygen', 'object',
            'plaintext', 'style', 'script', 'textarea', 'title', 'math', 'video', 'svg', 'xml', 'xss'
        );

        static $evil_attributes = array(
            'on\w+', 'style', 'xmlns', 'formaction', 'form', 'xlink:href', 'FSCommand', 'seekSegmentTime'
        );

I solved the problem like this way without promising my entire site security. In future if you want to upgrade your CI version then after upgrading find these two array inside _sanitize_naughty_html function in Security.php and remove the style tag from these two list.

Thank You.

There is no any issue with CKEDITOR

Turn off from config file as below it will work

$config['global_xss_filtering'] = FALSE;