Alfredo's blog

How to Edit Any Website Using Javascript

Here's how you can edit any website using some easy javascript.
1. Use your browser to open the website you want to edit.

2. Copy and paste this in your browser's address bar:
JavaScript:document.body.contentEditable='true'; document.designMode='on'; void 0;

3. Start editing the website.

Of course, you are the only one who can see the changes. Useful, when you want to play pranks on someone by modifying a news site. :)

Facebook setInnerFBML and fb:swf fails the second time

I just found out there is a problem with Facebook's setInnerFBML when using it to replace an <fb:swf>. In my Facebook app Hola, users click on images and can see their corresponding Flash animation at the top within a <div id="divflash"> element. This was working, but within the past month or so something changed in Facebook that somehow broke that behavior. The first time you click on an image, the Flash animation displays correctly. If you click on that same image again, no animation is displayed. As far as I can tell, this problem occurs only for <fb:swf>. I have a work around for this Facebook setInnerFBML and <fb:swf> problem.

This is my app stripped down to its core functionality: clicking on an image and displaying an animation of that image:

<?php
require_once("../fbplatform/php/facebook.php");
require_once("../fbplatform/secrets.php"); // APP_APIKEY and APP_SECRET are here
$facebook = new Facebook($APP_APIKEY, $APP_SECRET);
$user_id = $facebook->require_login(); // PROMPT USER TO LOGIN, IF HE'S NOT LOGGED IN

echo "<div id='test'><div id='divflash'><fb:swf imgsrc='http://mywebsite.com/image1.jpg' swfsrc='http://mywebsite.com/animation1.swf' width='150' swfbgcolor='#ffffff' height='150' wmode='opaque' waitforclick='false'/></div></div>";

echo "<img class='gift_img' src='http://mywebsite.com/image1.jpg' onclick='displayFlash()' />";

echo "<fb:js-string var='anim'><fb:swf imgsrc='http://mywebsite.com/image1.jpg' swfsrc='http://mywebsite.com/animation1.swf' width='150' swfbgcolor='#ffffff' height='150' wmode='opaque' waitforclick='false'/></fb:js-string>
<script type='text/javascript'>
<!--
function displayFlash() {
document.getElementById('divflash').setInnerFBML(anim);
};
//-->
</script>";
?>

As you can see the displayFlash() function, just replaces what's between <div id='divflash'> with an <fb:swf> element. It used to work, but now it only works the first time the image is clicked and not after that. I don't know why that happens.

The work around is to create an <fb:swf> each time the user clicks on the image and then replace what's in <div id='divflash'> with it. This code does that:

<?php
require_once("../fbplatform/php/facebook.php");
require_once("../fbplatform/secrets.php"); // APP_APIKEY and APP_SECRET are here
$facebook = new Facebook($APP_APIKEY, $APP_SECRET);
$user_id = $facebook->require_login(); // PROMPT USER TO LOGIN, IF HE'S NOT LOGGED IN

echo "<div id='test'><div id='divflash'><fb:swf imgsrc='http://mywebsite.com/image1.jpg' swfsrc='http://mywebsite.com/animation1.swf' width='150' swfbgcolor='#ffffff' height='150' wmode='opaque' waitforclick='false'/></div></div>";

echo "<img class='gift_img' src='http://mywebsite.com/image1.jpg' onclick='displayFlash()' />";

echo "<fb:js-string var='anim'></fb:js-string>
<script type='text/javascript'>
<!--
function displayFlash() { document.getElementById('divflash').setInnerFBML(anim); // this clears the old animation

// this creates the animation <fb:swf and puts it between the <dif id='divflash'>

var swf = document.createElement('fb:swf');
swf.setId('my_swf_id');
swf.setWidth('150');
swf.setHeight('150');
swf.setSWFSrc('http://mywebsite.com/myflash.swf');
document.getElementById('divflash').appendChild(swf);
};
//-->
</script>";
?>

That's my work around for that problem. A problem with this code is that there is no swf.setWmode = "opaque" parameter, so I will have to give a background color to my animations. Please, post a better solution in the comments if you have it. I hope this helps one of you out there that has the same problem.

Four Online Security Tools

To surf securely on a Windows XP machine I use:

  1. Firefox (http://www.mozilla.com/en-US/firefox/personal.html) a browser that allows you to include several useful add-ons.
  2. NoScript (https://addons.mozilla.org/en-US/firefox/addon/722). A Firefox add-on that prevents Firefox from running JavaScript and Flash on a website unless you give it permission to run JavaScript or Flash on that website.
  3. Ad Block Plus (https://addons.mozilla.org/en-US/firefox/addon/1865). Removes all ads from a website.
  4. Sandboxie (http://www.sandboxie.com/). A sandbox from which you can run Firefox.

Sandboxie creates a virtual area on your computer (in computer terms that's called a sandbox) from which you can run programs. Programs run in the sandbox thinking they are running on your computer. When a program wants to read a file from your computer the sandbox gives them a copy to read. When a program wants to create or modify a file on your computer, the sandbox creates that file in the sandbox. So if a program in the sandox wants to put a virus on your computer it ends up putting it in the sandbox.

Now, this is important to know. A sandbox protects your computer from getting permanently infected by malware, but it doesn't protect your information from being read. So, if a virus gets into your sandbox it will do its viral things, but once you delete that sandbox instance the virus will be completely gone and any changes it tried to do to your computer will be gone. A sandbox is not an anti-virus program. A sandbox runs programs as if they were running from your computer, but without allowing the program to make permanent changes to the computer. To make all or some of the changes permanent, you have to manually allow them by righ-clicking on the files created or modified and selecting "Recover to Same Folder" or "Recover to Any Folder".

By running Firefox from Sandboxie, any changes a website does to your computer or to Firefox stays in the sandbox and doesn't get to your computer. This prevents malware coming from a website to permanently infect your computer or Firefox.

JavaScript is a computer language used in websites that makes a website behave like an application. The problem with JavaScript is that in the wrong hands it can be used to infect your computer. NoScript allows you to control which websites can run JavaScript and which ones can't. For trusted sites you can tell NoScript to always allow JavaScript, like Amazon and Google. For non-trusted websites, e.g. one someone sent you on an email or that you clicked for curiosity, you can just let NoScript disallow JavaScript until you can decide if it should be trusted or not.

Flash is a computer program that can also run from your browser. This is what makes it so powerful and so dangerous in the wrong hands. NoScript can also prevent Flash from running on a website unless you allow it.

There have been several infections caused by advertisement on reputable websites. Ad Block Plus prevents ads from running on a website. You won't see the ads anymore on a website unless you allow the ads to show. It's not as important as NoScript, but it gives you that extra security until the day ad agencies can determine if an ad carries malware or not.

If you have to choose only one of the tools above, choose Sandboxie. It will prevent malware to make permanent changes to your computer. If you want to be safer, use all four tools. Be aware that these tools are a little complicated to use at first, so make sure you read their user manuals. Once you get used to them you will feel naked browsing without them.

Pages

Subscribe to RSS - Alfredo's blog