Behind The Blog

Earlier today while fixing another problem here on the site, it was pointed out to me that the “Submit Comment” button was almost on top of the Seesmic raccoon logo for video comments:

This fix was relatively straightforward. I just headed into <WPMU>/wp-content/plugins/seesmic-wp-plugin and then found my way down to lines 179 and 180:

<div id="see_buttons_div" style="display:block; width:100%; clear:both">
                <a onclick="see_set_comment_mode('videoRec','comment')" style=

where, yes, indeed, I simply inserted two <br>’s on line 180:

<div id="see_buttons_div" style="display:block; width:100%; clear:both">
                <br/><br/><a onclick=”see_set_comment_mode(’videoRec’,'comment’)” style=

And yes, the irony of adding BR tags after today’s earlier exercise was not lost on me. In any event, the little racoon is now not practically on top of the Submit Comment button:

And yes, it’s a kludgy hack that will undoubtedly be blown away if I ever upgrade the Seesmic plugin… but hey, the beauty of it all was that I could tweak it to fit our site.

Technorati Tags: wordpress, wordpressmu, wpmu, plugins, seesmic, video

Today we had a wee bit of fun with HTML tables… Jeremy, a member of our support team, published a post on our Voxeo Developer’s Corner blog that had an HTML <table> in it. Now it turned out that this was the first time in the 10 months that we’ve had this blog site up that anyone has used a <table> tag… and WordPress MU wasn’t terribly happy about it! What happened is that WPMU inserted a <br/> tag at the end of every line of HTML in the table. Annoyingly, the BR tags were inserted outside of the <TD> tags with the result being that a browser bizarrely interpreted the BRs to be a bunch of blank lines before the table.

Naturally I blamed Rick’s CSS file for lacking some table handling and he of course blamed all my plugins for messing up the formatting. A Google search helped us find out that the answer was neither but instead was actually WordPress itself.

This web page started out with the key heading “Disabling WordPress’ slap-happy approach to <br /> tags” and provided the answer. That web page is for WordPress 2.0.2 and we’re now running the equivalent of WP 2.5, so the file is no longer functions-formatting.php but instead simply formatting.php. As before it lives in <WPMU>/wp-includes.

Inside the file starting at line 62 was this:

function wpautop($pee, $br = 1) {
        $pee = $pee . "\\n"; // just to make things a little easier, pad the end
        $pee = preg_replace('|<br />\\s*<br />|', "\\n\\n", $pee);

One simple change of “$br = 1″ to “$br = 0″:

function wpautop($pee, $br = 0) {
        $pee = $pee . “\\n”; // just to make things a little easier, pad the end
        $pee = preg_replace(’|<br />\\s*<br />|’, “\\n\\n”, $pee);

and… ta da… the BR tags went away and the table no longer had this mass of white space before it.

Fun, fun, fun…. (well, not really)

Technorati Tags: wordpress, wordpressmu, wpmu

Okay, so this was a serious way to waste a morning! At 8:00am this morning I put up the post about my OSCON 2008 presentation and immediately noticed that the embedded SlideShare slide show was not visible. The problem was fairly simple to figure out. Here’s the embed code from the SlideShare page for my presentation that I had diligently copy and pasted into MarsEdit before sending to WPMU via the API:

<div style=”width:425px;text-align:left” id=”__ss_525876″><a style=”font:14px Helvetica,Arial,Sans-serif;display:block;margin:12px 0 3px 0;text-decoration:underline;” href=”http://www.slideshare.net/danyork/oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml?src=embed” title=”OSCON 2008: Mashing Up Voice and the Web Using Open Source and XML”>OSCON 2008: Mashing Up Voice and the Web Using Open Source and XML</a><object style=”margin:0px” width=”425″ height=”355″><param name=”movie” value=”http://static.slideshare.net/swf/ssplayer2.swf?doc=oscon2008voicemashups-1216853182252884-9&stripped_title=oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml” /><param name=”allowFullScreen” value=”true”/><param name=”allowScriptAccess” value=”always”/><embed src=”http://static.slideshare.net/swf/ssplayer2.swf?doc=oscon2008voicemashups-1216853182252884-9&stripped_title=oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”355″></embed></object><div style=”font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px;”>view <a style=”text-decoration:underline;” href=”http://www.slideshare.net/danyork/oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml?src=embed” title=”View OSCON 2008: Mashing Up Voice and the Web Using Open Source and XML on SlideShare”>presentation</a> (tags: <a style=”text-decoration:underline;” href=”http://slideshare.net/tag/oscon2008″>oscon2008</a> <a style=”text-decoration:underline;” href=”http://slideshare.net/tag/oscon”>oscon</a> <a style=”text-decoration:underline;” href=”http://slideshare.net/tag/microblogging”>microblogging</a> <a style=”text-decoration:underline;” href=”http://slideshare.net/tag/identi-ca”>identi.ca</a>)</div></div>

However, when I did a “View -> Page Source” in Firefox, this was all that was visible:

<div style=”width:425px;text-align:left” id=”__ss_525876″><a href=”http://www.slideshare.net/danyork/oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml?src=embed” title=”Mashing Up Voice and the Web Using Open Source and XML”>OSCON 2008: Mashing Up Voice and the Web Using Open Source and XML</a> <div style=”font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px”>view <a href=”http://www.slideshare.net/danyork/oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml?src=embed” title=”Mashing Up Voice and the Web Using Open Source and XML on SlideShare”>presentation</a> (tags: <a href=”http://slideshare.net/tag/oscon2008″>oscon2008</a> <a href=”http://slideshare.net/tag/oscon”>oscon</a> <a href=”http://slideshare.net/tag/microblogging”>microblogging</a> <a href=”http://slideshare.net/tag/identi-ca”>identi.ca</a>)</div>

Without even looking through the code I could just see visually that there was a chunk of code missing.

Oops.

I thought I knew what it was and, sure enough, closer examination of the code showed that the <object> element was being stripped entirely out:

<object style=”margin:0px” width=”425″ height=”355″><param name=”movie” value=”http://static.slideshare.net/swf/ssplayer2.swf?doc=oscon2008voicemashups-1216853182252884-9&stripped_title=oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml” /><param name=”allowFullScreen” value=”true”/><param name=”allowScriptAccess” value=”always”/><embed src=”http://static.slideshare.net/swf/ssplayer2.swf?doc=oscon2008voicemashups-1216853182252884-9&stripped_title=oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”355″></embed></object>

Based on past experience with WPMU (documented here and here), I knew immediately this was an issue with the <WPMUHOME>/wp-includes/kses.php file which, for very valid security reasons, strips out unknown tags when a post is created on the site (either via the web editor or posted through the API).

What confused me, though, was that SlideShare embeds worked perfectly fine in previous posts. So I had no idea why they weren’t working now. However, since that earlier post, I’ve upgraded to WPMU 1.5.1 and for whatever reason something has changed. It’s strange, though. <object> was NOT in the kses.php file before (I checked a backup) and it’s not in there now. Which makes me wonder how I posted those earlier entries with SlideShare embeds and others with YouTube videos.

In searching the WordPress MU forums, I found this post from a year ago that was seeking a solution to embed YouTube and Google videos. On the second page of responses, I found a great solution from a developer named Hendy Irawan.

WARNING: THIS CAN BE A SERIOUS SECURITY RISK IF YOU DO NOT TRUST YOUR AUTHORS!

In our case (for blogs.voxeo.com), we tightly control who can post to this site, so this security concern is not a major one for us. However, if you are operating a WPMU site where you let anyone sign up and create a new WPMU blog, I would very STRONGLY recommend you be extremely careful (as in “Don’t do it!”) with this as you can allow for the embedding of all sorts of content.

Basically, Hendy’s plugin simply adds <object> and <embed> to the list of allowed tags in kses.php. The nice aspect, though, is that it is in a separate file in the plugins directory so that it will survive upgrades. This seems an obvious thing to do but was not something I had seen previously. Great idea.

So following the instructions, I created the file <WPMUHOME>/wp-content/mu-plugins/embed_allower.php with Hendy’s code in it and tried another upload with the SlideShare embed in it. The result was almost there (new code in red):

<div style=”width:425px;text-align:left” id=”__ss_525876″><a href=”http://www.slideshare.net/danyork/oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml?src=embed” title=”Mashing Up Voice and the Web Using Open Source and XML”>OSCON 2008: Mashing Up Voice and the Web Using Open Source and XML</a><object width=”425″ height=”355″><embed src=”http://static.slideshare.net/swf/ssplayer2.swf?doc=oscon2008voicemashups-1216853182252884-9&stripped_title=oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml” type=”application/x-shockwave-flash” width=”425″ height=”355″></embed></object> <div style=”font-size:11px;font-family:tahoma,arial;height:26px;padding-top:2px”>view <a href=”http://www.slideshare.net/danyork/oscon-2008-mashing-up-voice-and-the-web-using-open-source-and-xml?src=embed” title=”Mashing Up Voice and the Web Using Open Source and XML on SlideShare”>presentation</a> (tags: <a href=”http://slideshare.net/tag/oscon2008″>oscon2008</a> <a href=”http://slideshare.net/tag/oscon”>oscon</a> <a href=”http://slideshare.net/tag/microblogging”>microblogging</a> <a href=”http://slideshare.net/tag/identi-ca”>identi.ca</a>)</div>

If you compare to the <object> snippet above, you’ll notice that the <param> element is missing and there are some other attributes on the <embed> object that aren’t there, either.

To accomplish this, I need to modify Hendy’s code, which is now shown below:

<?php
/*
* Plugin Name: Embed Allower 2 
* Plugin URI: http://blogs.voxeo.com/behindtheblog/wp-plugin-embed-allower-2/
* Description: Allows embed, object, and other security risks tags. LGPLv3.
* Version: 1.0
* Author: Dan York
* Author URI: http://blogs.voxeo.com/behindtheblog/
**/
/*
* Based on Embed Allower from Hendy Irawan at http://hendyirawan.com/
*
* WARNING: THERE ARE SERIOUS SECURITY RISKS with allowing these object and
* embed tags, especially in multi-author environments where you don't trust
* your users.  Please make sure you know what you are doing before using
* this.
*
* Dan York and Voxeo Corporation assume absolutely no liability if you have any
* security issues as a result of using this plugin. USE AT YOUR OWN RISK!
*/

// For more info see wp-includes/kses.php
if (!CUSTOM_TAGS) {
	$allowedposttags['embed'] = array(
		’style’ => array(),
		‘type’ => array (),
		‘id’ => array (),
		‘height’ => array (),
		‘width’ => array (),
		’src’ => array (),
		‘object’ => array(
			‘height’ => array (),
			‘width’ => array (),
			‘param’ => array (
				‘name’ => array (),
				‘value’ => array ()
			)
		)
	);
	$allowedposttags['object'] = array(
	        ’style’ => array (),
		‘height’ => array (),
		‘width’ => array (),
		‘param’ => array (
			‘name’ => array (),
			‘value’ => array ()
		),
		‘embed’ => array(
			’style’ => array(),
			‘type’ => array (),
			‘id’ => array (),
			‘height’ => array (),
			‘width’ => array (),
			’src’ => array (),
			‘allowfullscreen’ => array (),
			‘allowscriptaccess’ => array ()
		)
	);
	$allowedposttags['param'] = array (
	        ‘name’ => array (),
		‘value’ => array ()
	);
}
?>

I’ve now created a specific page for this plugin. If you put it in your <WPMUHOME>/wp-content/mu-plugins directory it should now let you upload objects like SlideShare slide shows and other embedded objects.

If you do have any comments about this, please feel free to leave them here.

And again, please understand the security risks of using this. I would again strongly recommend NOT using this if you do not trust your authors. (On the other hand, if you run a corporate blog portal like we do, this may be perfectly fine.)

Technorati Tags: wordpress, wordpress mu, wpmu, plugins, wordpress plugins