Degradable Flash inclusion
I thought I’d start posting little tips and tricks that I’ve found or come up with in the course of my web monkey activities. The aim is to share ideas and who knows, maybe improve on my own humble efforts through discussion 
I’ll start with something that I cooked up and used on John Bishop Online and John Smith's Bitter. Not so much something new as a combination of a couple of techniques, this is how I currently include Flash content on web pages.
This technique uses the SWFObject script. This script has advantages over typical object embed techniques because it is more concise and doesn’t present the”click to activate control” message in Internet Explorer 7.
I’ve uploaded an example page.
The technique
To use the “progressive enhancement” approach that Yahoo! promote, we start with a H1:
<h1 id="swapme"><span>This header will be replaced</span></h1>
With CSS and JavaScript turned off (or the specified version of Flash unavailable), this header text will be shown.
CSS is used to swap the header text for an image. The contents of the span are made invisible, and the H1 is set to a size and background:
h1 span {
display: none;
visibility: hidden;
}
#swapme {
width: 300px;
height: 300px;
background: #ff0000 url(image.gif) no-repeat;
}
After that, the SWFObject script is used to replace the contents of the H1 with the Flash object.
Room for improvement
- I’m going to remove the JavaScript to an external file.
- #swapme isn’t ideal semantically speaking… you’d have to give it an appropriate id for your site.
Recent Posts RSS
December 18th, 2006 at 3:58 pm
Nice, but promoting JS rewriting HTML pages isn’t wise and the reason why a lot of people have JS disabled.
Stuff like this, IMO should be handled by the server and should form part of the HTTP request. Quite how that’d look or work, I don’t know, but mangling the already formed HTML response on the client side just doesn’t sit right with me. It is bad from a security stand point (”if it can mangle the code to do this, what else could someone do? best turn it off”) and also for the search engines.
Still, an elegant solution to a common problem, just a shame we need it.
December 18th, 2006 at 4:04 pm
I wonder if its possible to check for an installed version of Flash on the server side… I’m going to look into that.
I understand your reservation about using JS to rewrite HTML, but isn’t that what all sites that use AJAX do?
December 19th, 2006 at 2:32 pm
[EDITED]
Indeed it is.
So sure, just Javascript to rewrite your pages, but bare in mind the recent MySpace/Quicktime worm [link]. Apple (rightly or wrongly) are laying the blame at MySpace’s door and saying the problem is with them allowing JS to perform such actions. If on the other hand we’re pushing AJAX, then that will become JS’ primary usage.
So which is it? Security flaw or Expected usage? If you use AJAX and it gets hijacked to open up your site to attack, who’s to blame?
Herein lies the problem, doing this crap at the server level eliminates all this and also ensures, the page you send, is the page they receive. A point of paramount importance when you have a brand to protect.
December 19th, 2006 at 3:12 pm
If my understanding of this worm is on the money, it is a clever misuse of the integration of QuickTime and JS. I’d be inclined to lay the blame at Apple’s door - perhaps if QuickTime required the host site to “white-list” certain kinds of activity (like Flash requiring policy files for cross domain data retrieval), then this exploit wouldn’t be possible.
I looked into detecting Flash versions on the server side, but it appears that PHP can’t do it. It can establish that the user can view the MIME type for SWF files, but not which version - which makes it effectively useless.
I’ll keep an eye out for better solutions - that’s part and parcel of why I’m going to put techniques on the site. This technique will have to suffice for the time being though.
There’s no danger of my own project suffering an attack through AJAX vulnerabilities! I’m interested in learning a bit of AJAX, but it’s a low priority. How ‘Web 1.0′ of me…
December 19th, 2006 at 5:18 pm
it is a clever misuse of the integration of QuickTime and JS.
It is malicious JS tacked onto a QT movie. While Apple are (rightly) being blamed for running this JS behind the scenes without a user aware, the problem is mainly in JS itself having the ability to send this crap (and in Myspace).
If more and more of this ‘client side rewrite’ is encouraged through JS, it encourages more opportunity for people to hijack this methodology and inject their own code to do whatever they like. Especially given JS strong support of OOP practises like Method Interception, allowing you to effectively change the code run by any particular named Method/Function.
That’s a huge risk and me, I wouldn’t expose that at the client level without extremely compelling reasons.
but not which version - which makes it effectively useless.
Not at all. That in itself tells you if they have 6.0 or later. Combine that with a flash movie that uses its own internal version checking to either show the movie or show an upgrade screen (skipping it if the MIME type is in the header).
That takes care of Flash 4.0 and upwards. Sure 2 & 3 won’t work, but that’s because of the respective versions AS support at the time.
Still, a very elegant solution and one that doesn’t require hi-jacking a page and rewriting content.
There’s a pretty good article explaining the bits and pieces here :
http://www.sitepoint.com/article/techniques-unearthed/5
December 19th, 2006 at 5:58 pm
That article looks good and I’ll definitely read it.
Personally though, I’d think I’d only prompt the user to upgrade their Flash player if the Flash component of my site was essential rather than just decorative.
Otherwise I’d just have alternative imagery (as we did on the John Bishop site).