diff options
| author | friendica <info@friendica.com> | 2012-05-12 17:57:41 -0700 |
|---|---|---|
| committer | friendica <info@friendica.com> | 2012-07-18 20:40:31 +1000 |
| commit | 7a40f4354b32809af3d0cfd6e3af0eda02ab0e0a (patch) | |
| tree | a9c3d91209cff770bb4b613b1b95e61a7bbc5a2b /lib/htmlpurifier/docs/enduser-youtube.html | |
| parent | cd727cb26b78a1dade09d510b071446898477356 (diff) | |
| download | volse-hubzilla-7a40f4354b32809af3d0cfd6e3af0eda02ab0e0a.tar.gz volse-hubzilla-7a40f4354b32809af3d0cfd6e3af0eda02ab0e0a.tar.bz2 volse-hubzilla-7a40f4354b32809af3d0cfd6e3af0eda02ab0e0a.zip | |
some important stuff we'll need
Diffstat (limited to 'lib/htmlpurifier/docs/enduser-youtube.html')
| -rw-r--r-- | lib/htmlpurifier/docs/enduser-youtube.html | 153 |
1 files changed, 153 insertions, 0 deletions
diff --git a/lib/htmlpurifier/docs/enduser-youtube.html b/lib/htmlpurifier/docs/enduser-youtube.html new file mode 100644 index 000000000..87a36b9aa --- /dev/null +++ b/lib/htmlpurifier/docs/enduser-youtube.html @@ -0,0 +1,153 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<meta name="description" content="Explains how to safely allow the embedding of flash from trusted sites in HTML Purifier." /> +<link rel="stylesheet" type="text/css" href="./style.css" /> + +<title>Embedding YouTube Videos - HTML Purifier</title> + +</head><body> + +<h1 class="subtitled">Embedding YouTube Videos</h1> +<div class="subtitle">...as well as other dangerous active content</div> + +<div id="filing">Filed under End-User</div> +<div id="index">Return to the <a href="index.html">index</a>.</div> +<div id="home"><a href="http://htmlpurifier.org/">HTML Purifier</a> End-User Documentation</div> + +<p>Clients like their YouTube videos. It gives them a warm fuzzy feeling when +they see a neat little embedded video player on their websites that can play +the latest clips from their documentary "Fido and the Bones of Spring". +All joking aside, the ability to embed YouTube videos or other active +content in their pages is something that a lot of people like.</p> + +<p>This is a <em>bad</em> idea. The moment you embed anything untrusted, +you will definitely be slammed by a manner of nasties that can be +embedded in things from your run of the mill Flash movie to +<a href="http://blog.spywareguide.com/2006/12/myspace_phish_attack_leads_use.html">Quicktime movies</a>. +Even <code>img</code> tags, which HTML Purifier allows by default, can be +dangerous. Be distrustful of anything that tells a browser to load content +from another website automatically.</p> + +<p>Luckily for us, however, whitelisting saves the day. Sure, letting users +include any old random flash file could be dangerous, but if it's +from a specific website, it probably is okay. If no amount of pleading will +convince the people upstairs that they should just settle with just linking +to their movies, you may find this technique very useful.</p> + +<h2>Looking in</h2> + +<p>Below is custom code that allows users to embed +YouTube videos. This is not favoritism: this trick can easily be adapted for +other forms of embeddable content.</p> + +<p>Usually, websites like YouTube give us boilerplate code that you can insert +into your documents. YouTube's code goes like this:</p> + +<pre> +<object width="425" height="350"> + <param name="movie" value="http://www.youtube.com/v/AyPzM5WK8ys" /> + <param name="wmode" value="transparent" /> + <embed src="http://www.youtube.com/v/AyPzM5WK8ys" + type="application/x-shockwave-flash" + wmode="transparent" width="425" height="350" /> +</object> +</pre> + +<p>There are two things to note about this code:</p> + +<ol> + <li><code><embed></code> is not recognized by W3C, so if you want + standards-compliant code, you'll have to get rid of it.</li> + <li>The code is exactly the same for all instances, except for the + identifier <tt>AyPzM5WK8ys</tt> which tells us which movie file + to retrieve.</li> +</ol> + +<p>What point 2 means is that if we have code like <code><span +class="youtube-embed">AyPzM5WK8ys</span></code> your +application can reconstruct the full object from this small snippet that +passes through HTML Purifier <em>unharmed</em>. +<a href="http://repo.or.cz/w/htmlpurifier.git?a=blob;hb=HEAD;f=library/HTMLPurifier/Filter/YouTube.php">Show me the code!</a></p> + +<p>And the corresponding usage:</p> + +<pre><?php + $config->set('Filter.YouTube', true); +?></pre> + +<p>There is a bit going in the two code snippets, so let's explain.</p> + +<ol> + <li>This is a Filter object, which intercepts the HTML that is + coming into and out of the purifier. You can add as many + filter objects as you like. <code>preFilter()</code> + processes the code before it gets purified, and <code>postFilter()</code> + processes the code afterwards. So, we'll use <code>preFilter()</code> to + replace the object tag with a <code>span</code>, and <code>postFilter()</code> + to restore it.</li> + <li>The first preg_replace call replaces any YouTube code users may have + embedded into the benign span tag. Span is used because it is inline, + and objects are inline too. We are very careful to be extremely + restrictive on what goes inside the span tag, as if an errant code + gets in there it could get messy.</li> + <li>The HTML is then purified as usual.</li> + <li>Then, another preg_replace replaces the span tag with a fully fledged + object. Note that the embed is removed, and, in its place, a data + attribute was added to the object. This makes the tag standards + compliant! It also breaks Internet Explorer, so we add in a bit of + conditional comments with the old embed code to make it work again. + It's all quite convoluted but works.</li> +</ol> + +<h2>Warning</h2> + +<p>There are a number of possible problems with the code above, depending +on how you look at it.</p> + +<h3>Cannot change width and height</h3> + +<p>The width and height of the final YouTube movie cannot be adjusted. This +is because I am lazy. If you really insist on letting users change the size +of the movie, what you need to do is package up the attributes inside the +span tag (along with the movie ID). It gets complicated though: a malicious +user can specify an outrageously large height and width and attempt to crash +the user's operating system/browser. You need to either cap it by limiting +the amount of digits allowed in the regex or using a callback to check the +number.</p> + +<h3>Trusts media's host's security</h3> + +<p>By allowing this code onto our website, we are trusting that YouTube has +tech-savvy enough people not to allow their users to inject malicious +code into the Flash files. An exploit on YouTube means an exploit on your +site. Even though YouTube is run by the reputable Google, it +<a href="http://ha.ckers.org/blog/20061213/google-xss-vuln/">doesn't</a> +mean they are +<a href="http://ha.ckers.org/blog/20061208/xss-in-googles-orkut/">invulnerable.</a> +You're putting a certain measure of the job on an external provider (just as +you have by entrusting your user input to HTML Purifier), and +it is important that you are cognizant of the risk.</p> + +<h3>Poorly written adaptations compromise security</h3> + +<p>This should go without saying, but if you're going to adapt this code +for Google Video or the like, make sure you do it <em>right</em>. It's +extremely easy to allow a character too many in <code>postFilter()</code> and +suddenly you're introducing XSS into HTML Purifier's XSS free output. HTML +Purifier may be well written, but it cannot guard against vulnerabilities +introduced after it has finished.</p> + +<h2>Help out!</h2> + +<p>If you write a filter for your favorite video destination (or anything +like that, for that matter), send it over and it might get included +with the core!</p> + +</body> +</html> + +<!-- vim: et sw=4 sts=4 +--> |