admin
doz
fachprojekt
html2pdf_v4.03
htmlpurifier-4.10.0
art
benchmarks
configdoc
docs
dtd
entities
examples
specimens
dev-advanced-api.html
dev-code-quality.txt
dev-config-bcbreaks.txt
dev-config-naming.txt
dev-config-schema.html
dev-flush.html
dev-includes.txt
dev-naming.html
dev-optimization.html
dev-progress.html
enduser-customize.html
enduser-id.html
enduser-overview.txt
enduser-security.txt
enduser-slow.html
enduser-tidy.html
enduser-uri-filter.html
enduser-utf8.html
enduser-youtube.html
fixquotes.htc
index.html
proposal-colors.html
proposal-config.txt
proposal-css-extraction.txt
proposal-errors.txt
proposal-filter-levels.txt
proposal-language.txt
proposal-new-directives.txt
proposal-plists.txt
ref-content-models.txt
ref-css-length.txt
ref-devnetwork.html
ref-html-modularization.txt
ref-proprietary-tags.txt
ref-whatwg.txt
style.css
extras
library
maintenance
plugins
smoketests
tests
.gitattributes
.gitignore
.travis.yml
CREDITS
Doxyfile
INSTALL
INSTALL.fr.utf8
LICENSE
NEWS
README.md
TODO
VERSION
WHATSNEW
WYSIWYG
composer.json
phpdoc.ini
images
prints
prints3
Kennwortwechsel.php
hauptframe.php
index.php
index_alt.php
index_db.php
index_frame.htm
index_ldap.php
login.php
logout.php
menuframe.htm
styles_pc.css
topframe.php
154 lines
7.2 KiB
HTML
Executable File
154 lines
7.2 KiB
HTML
Executable File
<?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
|
|
-->
|