Question

I have a small widget. I want only a few websites to embed my widget through an iFrame.

_________________
| Friend         |
|   __________   |
|   | Widget  |  |
|   |_________|  |
|________________|

“Easy!”, you say. Just put this in the beginning of your widget code:

if (!/^http:\/\/([a-z0-9]+\.)?friend\.com)/.test(document.referrer)) {
   alert('hacker detected');
   return;
}

But this code will fail to protect us if a hacker does this:

_____________________
| Hacker             |
| _________________  |
| | Friend         | |
| |   __________   | |
| |   | Widget  |  | |
| |   |_________|  | |
| |________________| |
|____________________|

Through clever CSS, the hacker can chop off Friend’s layout and only show the widget. No one would suspect any kind of hacking was going on. So you say again, “Easy, lets do this:”

if (!/^http:\/\/([a-z0-9]+\.)?friend\.com)/.test(top.location.href)) {
   alert('hacker detected');
   return;
}

But this still doesn’t work. You get a permission denied error when reading top.location.href. Hacker, Friend, and Widget all have different domains so this is a cross-site scripting error.

Before you laugh and say “no hacker is going to go through all this trouble doing this”, I want to say that I’ve already found people doing this. The widget in question has sensitive data that I’m only legally allowed to show on certain websites.

Answer 1

You gotta ask your friend to implement code that will keep his site from being used as an iframe.

if(top != self){
   alert('Hacker Attack');
}