Tip: How to modify WordPress MU to allow embed objects (specifically for SlideShare)
August 1st, 2008 by Dan YorkOkay, 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
Related posts:
- Slides now online for OSCON talk: “Building a Corporate Blog Portal using WordPress MU”
- How to embed XML and source code in WordPressMU/WPMU using the SyntaxHighlighter plugin
- Adding video comments to WPMU using Seesmic’s new plugin
- Adding the “Unfiltered MU” plugin to WordPress MU to allow all embeds
Tags: Plugins, WordPress, wordpressmu, WPMU
If you found this post interesting or helpful, please consider either subscribing via RSS, becoming a fan on Facebook, or following us on Twitter.
RSS Feed
August 1st, 2008 at 7:47 pm
The unfiltered-mu plugin (by Automattic, released on WordPress Extend) is also a very quick and easy way to remove these content restrictions from WPMU.
August 15th, 2008 at 1:08 pm
Wow thanks…
Didn’t realize someone else actually found it useful
Hey I guess I can claim myself open source developer now =))
August 18th, 2008 at 8:09 pm
hello,
I been tried to use it to embed a js script and other script flash codes, but seems it is not working..
September 18th, 2008 at 7:15 pm
Hendy, I was just about to recreate your plug-in. I figured out that kses.php was stripping the tags and ran across your previous comment on mu.wordpress.org while I was writing my own plug-in to do the same. Like Dan, we have very tight control over who can post and found the rights capable method of unfiltered_html to be too restrictive to work for our purposes since that would needlessly prevent our contributors and authors from posting videos.
Dan, I expect we will be using your version of this plug-in in the near future since you have further refined the list of tags and paramaters that might become a problem.
Thank you to you both.
September 18th, 2008 at 8:14 pm
Noli, I hope you have figured out in this past month that this plugin will not allow you to post script tags… not without some modification. If you choose to allow javascript, you may be opening yourself up to even more security risks. Please make sure you are aware of the implications before you continue.
If you do wan’t to allow script tags, you will have to use a similar technique and add them in a fashion similar to the above. You will need to use something like: $allowedposttags['script'] = array and then also add any parameters that may be in the script tag.
September 19th, 2008 at 4:26 pm
Dan, I should point out that the Plugin URI that you list in the above source doesn’t match the location you link to on this page. The difference is wp-plugin… vs. plugin….
September 25th, 2008 at 11:37 am
Thanks Dan and Hendy! I’ve been trying to find a way to customize my kses file. This is just what I needed. Much obliged. Dave.
October 1st, 2008 at 6:13 pm
Leaving some long-overdue responses (I’ve been watching the comments come in, but just hadn’t replied here):
@Jeff – Thanks for the pointer to the unfiltered-mu plugin. I may take a look at it because I’ve found some more tags that I need to add in here… and so I’m wondering at what point it makes more sense to just allow *any* tags – since I have tight control over who is going to be putting up posts (mostly me!).
@Hendy – Yes, you can now say you are an open source developer! Many thanks for the work you did!
@Noli – As Ryan indicated, this plugin only allows through a subset of possible tags. To allow through JavaScript, you’d need to modify it to allow through additional tags, like the script tag. But as Ryan said, be VERY sure you want to do that because if you don’t have tight control over who is posting to your site, you could wind up with someone posting JavaScript code that could compromise your site.
@Ryan – Thanks for your various comments and the correction on the Plugin URI. It actually *was* what I put in the code, but with our column layout that wrapped to two lines so I removed the “WP” from the beginning and WPMU seems to have very helpfully modified the URL! Oops. I’ll modify the plugin text when I do an edit.
@Sugar Web Design – Very glad you found it useful!
October 1st, 2008 at 6:16 pm
I’d note that I probably *will* be making some changes to the plugin because I found some other embeds that failed through the kses.php stripping operation. As I noted in my previous comment, though, I’m starting to wonder whether it makes sense to continue to do this or to just find a plugin that stops the kses.php-unknown-tag-stripping operation (such as the unfiltered plugin Jeff mentions).
Given that various video sites seem to be periodically updating their embed codes and adding new parameters – and I then need to update this plugin to accommodate those new parameters – it seems a bit of a losing battle. Given that I tightly control who can post here, I’m thinking I may be better with something that just tells kses.php to leave my code alone and let it all through.
October 10th, 2008 at 10:20 pm
From http://markteipe.com/2008/08/25/brightcove-and-youtube-embed-code-in-wordpress-mu/ :
The fix: Edit wp-include/kses.php. In that file search for “Post filtering” and then comment out the following lines:
// Post filtering //add_filter(’content_save_pre’, ‘wp_filter_post_kses’);
It’s easy and it works – But I’m glad I’m the only one using my Wordpress Mu
October 20th, 2008 at 12:29 am
I’ve added this to GitHub:
http://github.com/ceefour/embed_allower
So everybody can fork happily as necessary.
October 20th, 2008 at 12:30 am
The current GitHub has been modified to include Dan York’s modifications.
October 20th, 2008 at 3:12 am
Hendy,
Cool! Now I finally gave a reason to use Github! I was just saying to someone the other day that I was increasingly impressed by what was being done with Github and that I needed to come up with some reason to try it out. Now I have one! Thanks for setting it up.
Mikael,
Thanks for the note about how to completely disable filtering. I may consider that approach as well given that authors on our site are restricted to people I know and trust.
Thanks to both of you, Dan
December 15th, 2008 at 8:53 pm
Great solution, thanks once again – I was really searching for plugin to accomplish this task
January 13th, 2009 at 5:20 am
Hello everyone. I have an script for counter code, as people can add this script for counter in their websites and wp. I want permanent solution, so that people cant edit certain things in wordpress without modify any script. can it be possible?
January 20th, 2009 at 4:24 pm
[...] high. For instance, only certain types of embeddable objects are allowed by default. As I have written about previously, there are ways to extend the list of embeddable objects but the problem is that people out on the [...]
October 23rd, 2009 at 2:56 pm
When I have the object tag and I try to embed a video, for some reason the “clsid:” part of the classid parameter is removed. Does anyone else encounter this?
October 23rd, 2009 at 3:31 pm
Jon, Hmmm… I don’t know offhand. I’ve not had that happen to me before. I actually stopped using this plugin because there was just no way that I could keep up with all the changes and switched instead to using the “unfiltered-mu” plugin:
http://blogs.voxeo.com/behindtheblog/2009/01/20/adding-the-unfiltered-mu-plugin-to-wordpress-mu-to-allow-all-embeds/
However, I did so because on this site I have a limited set of authors, all of whom I trust, so I had no issue removing the filtering of plugins. Depending upon your site, you might not be able to have that same level of trust and might want to use a plugin like this one to allow your users to embed videos, but not other kinds of files.
November 3rd, 2009 at 12:11 pm
I think for the purposes of my site, this embed plugin is perfect. There’s only one hang up though– I’m still not sure why the “clsid:” part of the classid parameter is getting removed. Is it possible that it’s getting removed from the kses.php file? I am checking the code in that file, but so far I haven’t found anything that looks like it would be responsible…
November 18th, 2009 at 6:02 pm
@Jon
I solved the problem you are referring to with regards to the “clsid:” getting stripped from the front of the classname value in the object tag.
The problem resides in line 359 of the file wp-includes/kses.php…the part where the function wp_kses() is defined.
It looks like this:
function wp_kses($string, $allowed_html, $allowed_protocols = array (‘http’, ‘https’, ‘ftp’, ‘ftps’, ‘mailto’, ‘news’, ‘irc’, ‘gopher’, ‘nntp’, ‘feed’, ‘telnet’)) { … }
The problem is that wp_kses think “clsid:” is being used as a protocol (like “mailto:” or “javascript:). It doesn’t like any protocols that are not part of the list in $allowed_protocols; hence it is stripping that out.
The solution is just to add ‘clsid’ to the $allowed_protocols list as follows:
function wp_kses($string, $allowed_html, $allowed_protocols = array (‘http’, ‘https’, ‘ftp’, ‘ftps’, ‘mailto’, ‘news’, ‘irc’, ‘gopher’, ‘nntp’, ‘feed’, ‘telnet’, ‘clsid’)) { … }
That should solve the problem for you. Unfortunately, there’s no way to accomplish this via plugin…you have to edit the source code directly.
Good luck. I stumbled upon this post when I was trying to figure out what was going on, so I figured I’d post the solution here.
December 1st, 2009 at 3:16 pm
[...] some Googling I found several interesting articles, most of them repeated themselves and said “well.. edit the ksas.php file in [...]
December 2nd, 2009 at 12:15 pm
Thanks Jim!!
December 2nd, 2009 at 12:46 pm
Jim, Thanks for providing that solution. I had to do something similar to allow the use of “skype:” and “sip:” URLs:
http://blogs.voxeo.com/behindtheblog/2008/06/11/enabling-skype-and-sip-urls-in-wordpress-mu-151/
and this is now one of the steps I have to do *every* time that I upgrade WPMU. So Jon, you’ll want to plan for this to be part of your upgrade process as well.