![]()
![]() ![]() ![]()
![]() ![]()
|
![]() 26 Apr 2006 Create a Fake HTML Link in Your Site![]() ![]() ![]() ![]() ![]() Buat Link HTML Palsu di Situsmu Karena mengandung kode2 dalam Bahasa Inggris, jadi harusnya pengunjung yang mau mencoba ini tau Bahasa Inggris. Jadi cukup versi itu saja ya, kali ini. This page has been mentioned in Digg. Click here if you like this page! By the way, the methods described below is for educational purposes only. Maybe somehow can let web-browser makers know another security measures that can be taken with this kind of trick. Introduction Hi! This is a demonstration on how links can deceive you. Try to click any link on the box below. See your status bar or right click and select properties if you still don't believe. Best Web Browser Best Operating System Best Office Suite Best Search Engine Place your mouse on those links. What do you see in the status bar of your browser? Right-click on the link and select copy to clipboard or similar. What do you get on the clipboard? Is it different from the address you arrive at when you click the link? It has been tested on IE 6, Firefox 1.5 and Opera 8. The Trick The trick is quite simple. Just place an onmousedown event that sets the link address to the new one. So when the user clicks on the link, he/she will go to the new address. Before: <A href="http://www.microsoft.com/ie"> After: <A href="http://www.microsoft.com/ie" onmousedown="this.href = 'http://mozilla.org'" > Problem 1 When the user goes back to this page, or cancels the loading of the new page, he/she will see the new link address in his/her status bar. So we need to change it back to the old address after the user clicks it. <A href="http://www.microsoft.com/ie" onmousedown="this.href = 'http://mozilla.org'" onclick="this.href = 'http://www.microsoft.com/ie'" > Does it work? No! Because the old address will be set again just before the user goes to the new page. So doing this is useless. Hmm, what to do? Apparently adding a very small delay solves the problem. <A href="http://www.microsoft.com/ie" onmousedown="this.href = 'http://mozilla.org'" onclick="setTimeout(function() { this.href = 'http://www.microsoft.com/ie'; }, 1)" > The "1" above means that the link address will be restored 1 millisecond after the user clicks on the link. Hurray, the problem is solved! Problem 2 It's not good to have the old link string mentioned twice. It would be nice if we can just specify it once. Fine, lets just store the old address before setting the new one. Before that, let's move the event handler outside for more convience. We also add the onclick handler on-the-fly. linkMap = new Map(); // code is below function down(obj, e, url) { linkMap.put(obj, obj.href); obj.href = url; obj.onmouseup = obj.onclick = function () { up(this); }; After that, we can make our link much more simple. That is: <A href="http://www.microsoft.com/ie" onmousedown="down(this, event, 'http://mozilla.org')" > Problem 3 When the user right-clicks, the new address is shown instead of the old address. Hmm, seems we need to filter which click triggers the address change. Just modify the down() function to be like this, which supports left-click and middle-click: function down(obj, e, url) { linkMap.put(obj, obj.href); if (!e || !e.which || e.which <= 2) obj.href = url; obj.onmouseup = obj.onclick = function () { up(this); }; The !e, !e.which etc is done for the BAD IE browser. Problem 4 How about keypresses, like for users who navigate links using keyboard? Fortunately this is not too complicated, just add a onkeydown event that calls the same function as the onmousedown event if the key pressed is 13 (enter) or 32 (space). function key(obj, e) { And for the link: <A href="http://www.microsoft.com/ie" onmousedown="down(this, event, 'http://mozilla.org')" onkeydown="key(this, event)" > 1. Insert this code inside <script> tags in your page. function Map() { this.keys = []; this.values = []; this.count = 0; this.put = function (key, value) { with (this) { for (i=0; i<count; i++) if (keys[i] == key) { values[i] = value; return; } keys[count] = key; values[count] = value; count++; } } this.get = function (key) { with (this) for (i=0; i<count; i++) { if (keys[i] == key) return values[i]; } } } var linkMap = new Map(); function key(obj, e) { if (e.keyCode == 13 || e.keyCode == 32) obj.onmousedown(obj); } function down(obj, e, url) { linkMap.put(obj, obj.href); if (!e || !e.which || e.which <= 2) obj.href = url; setTimeout(function () { 2. Create your links. To create it, use this HTML tags: <a href="the displayed URL" onmousedown="down(this, event, 'the actual destination URL') onkeydown="key(this, event)" > (Replace the italicized text above with the actual values) Known Problems
Anyway, majority of the user will only left-click it normally, right? Conclusion What is it used for? DON'T FOLLOW THESE SUGGESTIONS!
Written by: yuku ![]() ![]() |