Youtube Embed code changed to iframe.

Hi Edward, been a while since i last posted.

great work on the latest releases as usual.

think we have a problem with youtube videos.

the embed code for youtube videos has changed from embed/object to now be an iframe (for compatibility with iphone & ipad users)

a typical youtube embed code is now

<iframe title="YouTube video player" class="youtube-player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/LXEOESuiYcA" frameborder="0" allowFullScreen></iframe>

any ideas on how to allow these? i'm not sure a filter would work or would it?

i certainly don't want to allow iframes to be posted, they're an even bigger risk than object/embed.

That's... hilarious. I assume the old embed code still works (otherwise millions of websites would break); I guess we can add a filter that manually transforms the iframes into old-style code. Another possibility is to get SafeIframe with domain whitelisting working, though I'm not super-enthused about having to do that specifically for YouTube.

yes the old embed code works (for now), whether they plan to remove it in future i don't know. but the iframe method is now set as default.

i can see webmasters wanting this more too due to the iphone/ipad take up, as the iframe player works on those devices as you're aware flash doesn't play easily on iphones/ipads, so i expect webmasters to start utilising that for a greater audience on their sites. this may get extended by other video sites if they see it as enabling their users to reach ipad users aswell.

there's also an added feature on youtube for enhanced security of embed, basicly it stops cookies etc..

it's exactly the same object code except the domain is changed from youtube.com to youtube-nocookie.com

not a problem to create a custom filter for as it's the same except for the domain. just in case you get swamped with people saying their youtube filters no longer work & haven't noticed the different domain if the enhanced security is ticked..

i've worked out a temp solution for wordpress/impresscms for now which don't allow iframes.

have to create a new bbcode tag. [youtube]hdghdfhhrtds[/youtube]

and then treat it the same as [code] tag, before purify, we do the conversion, but base64 encode it, then do the filtering, and decode afterwards. think that would work in our situation for now as a temporary alternative.

I ran into this issue with youtube and vimeo today. My short fix was to search for the iframe tag in the html, get the src, and only allow these domains (whitelisting): http://www.youtube.com/ http://player.vimeo.com/

If there are sections of the html string before and after the iframe tags, they are run through html purifier.

Definitely not ideal, and I'm worried that the rest of the iframe tag isn't checked even if the src is ok. Can you see any major flaws in this so far? I'd also love to hear any further discussion or solutions for this.

Thanks!

I ran into this issue with youtube and vimeo today. My short fix was to search for the iframe tag in the html, get the src, and only allow these domains (whitelisting): http://www.youtube.com/ http://player.vimeo.com/

If there are sections of the html string before and after the iframe tags, they are run through html purifier.

Definitely not ideal, and I'm worried that the rest of the iframe tag isn't checked even if the src is ok. Can you see any major flaws in this so far? I'd also love to hear any further discussion or solutions for this.

Thanks!

the iframe definitely wouldn't be secure that way, even if the domain is whitelisted, it would be easy for a malicious user to use that whitelisted domain to pass the filter, but then use some trickery to break out of the iframe itself.

what you could try is as Edward, suggested. before filtering with purifier, you convert the youtube/vimeo iframe to it's object equivalent, then filter with htmlpurifier. whilst that won't help ipad users, it will allow the iframe use.

i suppose if you want ipad users to be able to use the videos, you could probably run a 2nd filter after purifying to change the object code back to the correct iframe, though it's an extra step.

this will not work, but here's a quick rough example of the process (i will try and get a working version soon)

	function iframeConvertObj($var) {
		$iframe = array();
		$replace = array();
		
		$iframe[] = '<iframe title="YouTube video player" class="youtube-player" type="text/html"
			width="480" height="390" src="http://www.youtube.com/embed//\[([a-zA-Z0-9]*)\\1]" frameborder="0" allowFullScreen></iframe>';
		$replace[] = '<object width="480" height="385">
			<param name="movie" value="http://www.youtube.com/v/\\1?fs=1&amp;hl=en_GB"></param>
			<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
			<embed src="http://www.youtube.com/v/\\1?fs=1&amp;hl=en_GB" type="application/x-shockwave-flash"
			allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>';
		$var = preg_replace($iframe, $replace, $var);
		return $var;
	}

$var = iframeConvertObj($var);

$purifier = new HTMLPurifier($config);
$var = $purifier->purify($var);

$var = objConvertIframe($var);

where function objConvertIframe($var) does the exact opposite of function iframeConvertObj.

messy but is doable, though as i say, the above probably needs some tweaking, my regex isn't too great.

Here's a quick and dirty custom filter to turn the youtube iframe code into the old embed code, which someone might find useful. It's just a simple modification of the core YouTube filter. Hope it's safe!

<?php

class HTMLPurifier_Filter_YouTubeIframe extends HTMLPurifier_Filter
{

    public $name = 'YouTubeIframe';

    public function preFilter($html, $config, $context) {
        $pre_regex = '#<iframe\b[a-zA-Z0-9/"=-\s]+?\bsrc="http://www.youtube.com/embed/([A-Za-z0-9]+)"[a-zA-Z0-9/"=-\s]*?></iframe>#';
        $pre_replace = '<span class="youtube-iframe">\1</span>';
        return preg_replace($pre_regex, $pre_replace, $html);
    }

    public function postFilter($html, $config, $context) {
        $post_regex = '#<span class="youtube-iframe">([A-Za-z0-9]+)</span>#';
        return preg_replace_callback($post_regex, array($this, 'postFilterCallback'), $html);
    }

    protected function postFilterCallback($matches) {
        return '<object width="480" height="385">'.
            '<param name="movie" value="http://www.youtube.com/v/'.$matches[1].'?fs=1&amp;hl=en_US"></param>'.
            '<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>'.
            '<embed src="http://www.youtube.com/v/'.$matches[1].'?fs=1&amp;hl=en_US" type="application/x-shockwave-flash"'.
            'allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>';
    }

}

This is my first time commenting here in the forums so I wanted to start by saying Thank You to everyone involved with html purifier. This is an amazing collection of code. I just started looking into html purifier a couple weeks ago so I wanted to offer a little information to those who are new to this library and in particular getting the youtube video filter to work with iframe tags.

Richards Code from Above. (I can’t speak on the safety of this code either but thank you Richard for providing it)

<?php

class HTMLPurifier_Filter_YouTubeIframe extends HTMLPurifier_Filter
{

  public $name = 'YouTubeIframe';

  public function preFilter($html, $config, $context) {
      $pre_regex = '#<iframe\b[a-zA-Z0-9/"=-\s]+?\bsrc="http://www.youtube.com/embed/([A-Za-z0-9]+)"[a-zA-Z0-9/"=-\s]*?></iframe>#';
      $pre_replace = '<span class="youtube-iframe">\1</span>';
      return preg_replace($pre_regex, $pre_replace, $html);
  }

  public function postFilter($html, $config, $context) {
      $post_regex = '#<span class="youtube-iframe">([A-Za-z0-9]+)</span>#';
      return preg_replace_callback($post_regex, array($this, 'postFilterCallback'), $html);
  }

  protected function postFilterCallback($matches) {
      return '<object width="480" height="385">'.
          '<param name="movie" value="http://www.youtube.com/v/'.$matches[1].'?fs=1&amp;hl=en_US"></param>'.
          '<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>'.
          '<embed src="http://www.youtube.com/v/'.$matches[1].'?fs=1&amp;hl=en_US" type="application/x-shockwave-flash"'.
          'allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>';
  }

}

What I was left wondering was what to do with the code and how to put it into action

1.) First thing you need to do is save the code above as a .php file (Use a plain text editor or equivalent) with the filename: YouTubeIframe.php (Pay attention to the case. I’m guessing it matters.)

2.) Save that file to your filter directory which should be located in the following: ../htmlpurifier-4.2.0/library/HTMLpurifier/Filter/

3.) If you plan on implementing more than one filter you have to use the following format for your code: Let’s say you want to use the standard YouTube filter and the supplied code from Richard above; you would do the following:(HTMLpurifier forum I discovered this in)

 $config->set('Filter.Custom', array( new HTMLPurifier_Filter_YouTubeIframe(), new HTMLPurifier_Filter_YouTube() )); 
//This is calling the custom filters YouTube.php and YouTubeIframe.php (The file you created earlier)

4.) Let’s put this into context:

    
<?php  // This is your webpage
require_once '../htmlpurifier-4.2.0/library/HTMLPurifier.auto.php';
$config = HTMLPurifier_Config::createDefault();
$config->set('HTML.DefinitionID', 'Comments');
$config->set('HTML.DefinitionRev', 1);
$config->set('Core.Encoding', 'WINDOWS-1252'); //replace with your charset
$config->set('HTML.Doctype', 'XHTML 1.0 STRICT'); // replace with your doctype
$config->set('HTML.Trusted', true);
$config->set('HTML.TidyLevel', 'medium');
$config->set('Cache.DefinitionImpl', null); // remove this later!
$config->set('Filter.Custom', array( new HTMLPurifier_Filter_YouTubeIframe(), new HTMLPurifier_Filter_YouTube() ));
$def = $config->getHTMLDefinition(true);


$purifier = new HTMLPurifier($config);

   // untrusted input HTML
$pureContent = “Your Dirty, Nasty, Filthy Content”;

   // end of defined content to be purified. Can be more than one variable!
           
   // begin purification of content
$pure_Content = $purifier->purify($pureContent);

   // end purification. Must call each variable to complete.

5.) Now you would call your clean content: Using the example above:

<?php echo $pure_Content; ?>  
//Somewhere on your webpage after the purification has taken place.

I hope this helps some newbies like myself figure out how the filters work and hopefully you’ll be up and running with youtube iframe videos on your website! If I have anything wrong please correct me.

@Ryan, don't use HTML.Trusted if you're allowing ordinary users to post html, you should reserve that directive for admin use only.

Maybe I should rename %HTML.Trusted to %HTML.UnsafePerformIO :-)

Thanks for the heads up. I removed the HTML trusted; definitely a bit of confusion on my part. Thanks.

@Ryan, no probs :) good work on the filter btw & the instructions for newbies.

@Ambush, nah i think it's fine named as HTML.Trusted, just need a Warning notice in the http://htmlpurifier.org/live/configdoc/plain.html#HTML.Trusted document to make sure people understand that it should only be used for Admin or People you trust & not everyday users. :) maybe i'm biased (or a bit selfish lol) as if you change it's name, i'll have to change the DB & config setup in our CMS lol

Is there any chance that the HTMLPurifier_Filter_YouTubeIframe filter will be pulled into HTML Purifer core? I checked out the git repo and couldn't find any sign of it in there.

Edit: And I resurrected a dead topic before searching as thoroughly as I should have... Sorry. I found this: http://htmlpurifier.org/phorum/read.php?5,5319,5319#msg-5319 So it looks like iframes will be supported eventually.

I'm read this topic, but I don't understand how add youtube video into purifier!?

Please can you help me i don't understand all this; this is what the code is now with the iframe format:

How do i include this with your code, it put it all together?

Many thanks,

Kathryn

i see my code didn't come though here is the link: ( https://www.youtube.com/watch?v=aaBrF6TqdsE )

Please use %HTML.SafeIframe

HTML Purifier, Standards-Compliant HTML Filtering

the old embed check box is not there