Senin, 20 Mei 2013

Proteksi css Ala ZTO


protect css

Berawal dari sini aku sempat nyoba untuk menulis css dengan cara itu namun ternyata kodenya gak bisa untuk diterapkan jika kita membuat ID style sendiri, karena waktu aku coba-coba lagi kode yang bisa diterapkan hanya kode asli saja, contoh seperti h1, div, span dan lain-lain, intinya atribut global. setelah dipikir-pikir lagi, aku coba generate kode css itu menjadi base64 dan aku coba gabungin dengan trik itu dan berhasil. walaupun masih bisa diliat kodenya tapi jika di CTRL+U kodenya gak kelihatan karena kita memakai javascript untuk memanggilnya dan javascript ini sama seperti css kodenya langsung tereksekusi, jadi jika anda bertanya trik ini membuat loading lama atau tidak jawabannya tidak karena cara kerjanya sama saja seperti saat browser mengeksekusi kode css.

1. Anda sudah harus tau mengenai Data URIs
2. Masukan kode dibawah ini dibawah kode <head>

<script type="text/javascript">
function whatdepak(css){
var xdx = document.createElement("link");
xdx.href = "data:text/css;base64,"+css;
xdx.rel = "stylesheet";
document.head = document.head || document.getElementsByTagName('head')[0];
document.head.appendChild(xdx);
}whatdepak("kode css base64 anda")
</script>

3. Compress css anda ( cari di Google )
4. Generate css anda menjadi base64
5. Simpan kode hasil Generate tadi pada area javascript yang sudah saya tandai.

Ingat anda hanya perlu mengambil kode base64nya saja contoh dibawah ini.

data:text/css;base64,Ym9keXtiYWNrZ3JvdW5kOmJsYWNrfQ==

Kode yang saya tandai itu base64 jadi jangan mengambil kode didepannya yang seperti ini data:text/css;base64, karena kode itu telah kita tulis didalam javascript nya. Dan terakhir jika anda tidak ingin menampilkan kode aslinya tinggal palsukan menggunakan Js Obfuscator atau Js Encryptor

<script type="text/javascript">
function whatdepak(css){
var xdx = document.createElement("link");
xdx.href = "data:text/css;base64,"+css;
xdx.rel = "stylesheet";
document.head = document.head || document.getElementsByTagName('head')[0];
document.head.appendChild(xdx);
}whatdepak("Ym9keXtiYWNrZ3JvdW5kOmJsYWNrfQ==")
</script>