Allow Youtube iFrame from ckeditor

Jers

Hi,

Is there a way to allow the youtube iFrame tag from the ckeditor plugin? I've added https://ckeditor.com/cke4/addon/youtube to the ckeditor but everytime I try to save a page the iframe tag gets sanitized/purified/removed.

Thanks in advance.

admin

Take a look at the fuel/application/config/purifier.php settings. By default, there should be a couple iframe specific rules that are commented out:

'HTML.SafeIframe'          => TRUE, // For iframes
'URI.SafeIframeRegexp'     => '%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%',

You may also need to add iframe to HTML.Allowed

Jers

Thanks for your reply,

I don't think it's the purifier. I've already disabled it completely and the iframe is still deleted.

This is my purifier.php

$config['settings'] = array(
'default' => array(
    'HTML.Doctype'             => 'XHTML 1.0 Strict',
    'HTML.Allowed'             => 'div,b,strong,i,em,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
    //'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
    'AutoFormat.AutoParagraph' => false, // This will cause errors if you globally apply this to input being saved to the database so we set it to false.
    'AutoFormat.RemoveEmpty'   => true,
),
'comment' => array(
    'HTML.Doctype'             => 'XHTML 1.0 Strict',
    'HTML.Allowed'             => 'p,a[href|title],abbr[title],acronym[title],b,strong,blockquote[cite],code,em,i,strike,iframe[src|width|height|class|frameborder]',
    'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
    'AutoFormat.AutoParagraph' => true, 
    'AutoFormat.Linkify'       => true,
    'AutoFormat.RemoveEmpty'   => true,
),
'youtube' => array(
    'HTML.SafeIframe'          => 'true',
    'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%",
)

);

Can it be that it is in the regular sanitizer?

admin

Oh... CKEditor will automatically remove iframes. You may have to use a MarkItUp field type instead.

Jers

Hi,

I've done everything to stop CKEditor remove the iframes. The iframe tags are in the post to the /fuel/pages/edit controller. I cannot figure out why the tags are still removed.

Is there a way to disable purifier and sanitzer completely? Just to check.

This is my editor.php

// An example of the above as simply a JSON string
$config['ckeditor']['default'] = "{
toolbar:[
        ['Bold','Italic'],
        ['Format','Styles'],
        ['FUELImage','HorizontalRule','Youtube'],
        ['NumberedList','BulletedList'],
        ['FUELLink','FUELUnlink'],
        ['Undo','Redo','RemoveFormat'],
        ['PasteFromWord','PasteText'],
        ['Preview'],
        ['Maximize']
    ],
contentsCss: '".WEB_PATH."assets/utrecht/css/style.css',
protectedSource: [/\{fuel_\w+\(.+\)\}/g, /<\?[\s\S]*?\?>/g],
htmlEncodeOutput: false,
entities: false,
bodyClass: 'ckeditor',
toolbarCanCollapse: false,
removeButtons: 'Subscript,Superscript',
extraPlugins: 'fuellink,fuelimage,youtube',
removePlugins: 'link,image',
extraAllowedContent: 'iframe(*)[*]{*}',
allowedContent: true,
youtube_related: false,
youtube_controls: true,
youtube_autoplay: false
}";

admin

Is this field in the Pages module or your own Simple Module? If it's in your own Simple Module, you can try setting the sanitizing options like so:

In MY_fuel_modules.php

$config['modules']['my_module'] = array(
     ....
     'sanitize_input' => array('template','php'),
);

This has a little documentation on that option under the "Additional Configuration Parameters":
https://docs.getfuelcms.com/modules/simple

almostcompletely

Youtube iframes can be used with CKEditor, the Youtube plugin and Purifier.
You need to use the latest Fuel version that has HTML5_Purifier support.

./config/editors.php

$config['ckeditor']['default'] = array(
   'toolbar' => array(
      ...
      'htmlEncodeOutput' => FALSE,
      'entities' => FALSE,
      'bodyClass' => 'ckeditor',
      'protectedSource' => array('/\{fuel_\w+\(.+\)\}/g', '/<\?[\s\S]*?\?>/g'),
      'toolbarCanCollapse' => FALSE,
      'extraPlugins' => '...,youtube',
      'format_tags' => 'p;h1;h2;h3;h4;pre',
      'allowedContent' => TRUE,
   );

./config/purifier.php

$config['settings'] = array(
    'default' => array(
        //'HTML.Trusted'             => TRUE, // For Javascript... must also add 'script' to HTML.Allowed
        'HTML.SafeIframe'          => true, // For iframes
      'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(www.youtube.|player.vimeo.|maps.google.|www.slideshare.)%",
        'Attr.EnableID'            => true,
        'Attr.AllowedFrameTargets' => array('_blank'),
        'HTML.Allowed'             => 'div[id|class],
            section,
            span[class|style|id],
            b,strong,
            i[style|class],em,
            a[href|title|target|class|data-toggle],
            blockquote[id|class|cite],
            ul[class|role],
            ol[class|role],
            li[class|role],
            p[style|class],
            br,hr,
            span[style],
            img[id|width|height|alt|src|class],
            table[style|class],tbody[style|class],thead[style|class],tr[style|class|align],th[style|class|align],td[style|class],
            iframe[src|name|width|height|class|allow|style],
            h1[style|class],h2[style|class],h3[style|class],h4[style|class],h5[style|class],h6[style|class]',
        //'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
        'AutoFormat.AutoParagraph' => false, // This will cause errors if you globally apply this to input being saved to the database so we set it to false.
        'AutoFormat.RemoveEmpty'   => false,
      //'HTML.Doctype' => 'HTML 4.01 Transitional',
      'HTML.Doctype' => 'HTML5',
      'HTML.IframeAllowFullscreen' => true,

      'URI.DisableExternalResources' => false,
      'Attr.AllowedFrameTargets' => '_blank, _self, _target, _parent',
      'Attr.EnableID'=> true,
      'AutoFormat.Linkify'=> false,
    ),
    'comment' => array(
        'HTML.Doctype'             => 'XHTML 1.0 Strict',
        'HTML.Allowed'             => 'p,a[href|title|target],abbr[title],acronym[title],b,strong,blockquote[cite],code,em,i,strike',
        'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,float,margin',
        'AutoFormat.AutoParagraph' => TRUE,
        'AutoFormat.Linkify'       => TRUE,
        'AutoFormat.RemoveEmpty'   => false,
    ),
    'youtube' => array(
        'HTML.SafeIframe'          => TRUE,
        'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%",
    )
);

// This provides a simpler way of adding custom attributes not currently supported by Purifier then by extending the config class
// More information about adding custom attributes can be found here:
// http://htmlpurifier.org/docs/enduser-customize.html
$config['custom_attributes'] = array(
   ['a', 'data-toggle', 'CDATA'], // Array format
   ['ul', 'role', 'CDATA'], // Array format
   ['ol', 'role', 'CDATA'], // Array format
   ['li', 'role', 'CDATA'], // Array format
   ['iframe', 'allow', 'CDATA'], // Array format
    //'ul|role|CDATA', // String format
);

$config['config_class'] = 'HTMLPurifier_HTML5Config'; // For HTML 5 compatibility issues, try installing https://github.com/xemlock/htmlpurifier-html5 (requires composer install)
//$config['config_class'] = 'HTMLPurifier_Config';

// Determines where to cache the definitions files.
// Set to FALSE if you don't want to cache (like during testing)
$config['cache_path'] = APPPATH.'/cache';

//$config->set('Cache.DefinitionImpl', null); //switches off caches

Jers

Thanks @almostcompletely,

You're a livesaver.