How to Spoof an Apple.com Announcement

Or how to hack the appearance of any website...

After seeing what I think clearly to be a fake this morning, I started thinking about how I would go about faking an Apple product slip-up on Apple's website and how one could really do a bang-up job of it. I had a few ideas that I thought I'd share.

If you are only trying to fake out some friends, family members, or coworkers in the same network pool, you could set up DNS forwarding on your local router to redirect any requests to http://www.apple.com to a local page on your machine. This would be a lot of work, as you'd also have to spoof the address in the address bar. The pay off would be small as well, because it would be limited to a relatively small group of people.

The best way to do it is by having a screenshot of Apple's supposed slip-up on their webpage, but rather than quickly Photoshopping things together, I have an idea to make a much better fake screenshot. Read after the jump for more...

You need to be familiar with HTML to pull this off nicely. Follow these steps:

• In Safari, go to Apple's main page. Choose File—Save As... and select HTML, rather than Web Archive. Save the file as index.html
• Open the file you just saved in Safari. If your internet connection is active, you'll notice that the page that loads looks identical to Apple's site. Now all we need to do is some careful editing of the HTML to redirect some of the images involved. Keep the page open in Safari, so that you can refresh to check on your changes as you go along.
• Now open the page in your text editor of choice. I'm using SubEthaEdit, which is free for non-commercial use.
• The first thing you need to do is find the link to /main/css/global.css (which is on line 15) and /main/css/globalprint.css (which is on line 28) and replace them with http://www.apple.com/main/css/global.css and http://www.apple.com/main/css/globalprint.css respectively. Your basically just adding http://www.apple.com to the beginning of these links.
• After making the changes in the last step, the easiest thing to do is to simply change some of the text on the page, as it will all default to Apple's style sheet. In the screenshot below, I changed the text that normally reads "Important Safety Recall — Rechargeable Batteries for 12-inch iBook G4, 12-inch and 15-inch PowerBook G4" to "Apple offers $100 dollar to all purchasers of iPod's during the month immediately before the announcement of the new models." Remember, sometimes the simplest changes are the most convincing.

• If you want to spoof something more impressive however, you'll need to redirect some image requests in the index.html file. Lines 85-88 of the current Apple page read:

    

• Here you will want to replace http://images.apple.com/home/2005/images/itms500milliontop20050717.jpg with yourspoofimage.jpg.
• Now, if you refresh a big gray nothing and a ? will appear where that pic used to be. As you'll notice, the pic in question was only the top portion of the image. So, you could go into lines 89 and 90 and replace the pics linked to there with yourspoofimage2.jpg and then 3, 4, and 5. Then you could go back to Apple's main page and actually download all 5 of those images, renaming them as yourspoofimage.jpg, yourspoofimage2.jpg, yourspoofimage3.jpg, yourspoofimage4.jpg, and yourspoofimage5.jpg. And, finally, you could open each image in Photoshop or your image editing program of choice and cover the image with the new sections of an image you want. This will take a while.
• Instead, I recommend that you just add up the pixels created by all 5 images and recode the page so that only one large image loads at 680x400. Since this is honestly the easier way to handle this, it's the method I chose. Just delete all the code in lines 89 and 90 and adjust the height of your image in line 88 to 400 (so you will replace height="175" with height="400".
• Now, create whatever graphic you like in your graphics program of choice and set it at 680x400 pixels and save it in the same folder where you saved the index.html file, renaming it yourspoofimage.jpg.
• Reload the page. Your hack is nearly complete. Now go into the menu bar and type http://www.apple.com but do not hit RETURN. Take a screenshot of the window by hitting Apple (Command) + SHIFT + 4, then hit the space bar hover the floating camera over the Window and hit the mouse button.
• Take the screenshot sitting on your desktop, upload it to Flickr, and start pinging all the gullible rumor sites!

Nice Apple-hacking! My completed version is pictured below. Sure, this is quite possibly the most difficult way you could do this, but it's fun. You could always combine the DNS hack mentioned above alongside this hack to have a full spoofed version of Apple's site that would actually click over to the non-spoofed real Apple page. If you make your own, please add the links to your pics in the comments. Have fun!

UPDATE: Brian Alvey emailed me, pointing out the following:
Also, you can use a in your
document's section to get the style sheets and images to load as if
your local page was hosted on apple.com. Then relative paths like src="/logo.gif" will be treated like src="http://www.apple.com/logo.gif". Thanks, Brian!