Proteksi CSS Dengan PHP

Gandara Fajar URL:https://www.tutorial-webdesign.com/va9Yt
September 16th, 2013 Tips & Tricks, Web Development 48 Comments

CSS yang merupakan kependekan dari Cascading Style Sheets adalah kumpulan kode yang digunakan untuk mempercantik tampilan website, css mengatur suatu objek harus seperti apa, berwarna apa, bentuknya bagaimana, ukurannya seberapa besar, dan lain sebagainya. CSS Biasanya digunakan di html, php, asp, dan lain lain.

Image Credit by Telegraph.co.uk

Membuat CSS itu tergolong gampang-gampang susah. Dan pada suatu hari saya pernah kecolongan CSS Saya, dimana seseorang dengan mudahnya melakukan copy paste kode css dengan fitur View Page Source yang ada di browser, saya mencari cara proteksi css di google. Akhirnya saya menemukannya :D. Okay kita mulai mempelajarinya disini.

Contoh saya gunakan css dibawah :

.class { key:value; }

filenamenya style.css

Kita Ganti nama filenya menjadi berakhiran .php ( contoh : style.css menjadi style.php )

Selanjutnya kita ganti kode diatas menjadi kode berikut

<?php
session_start();
header("Content-type: text/css");
if($_SESSION['NameSession'] != "Key" ){ die("CSS PROTECTED"); }
$_SESSION['NameSession'] = "AnotherKey";
?>
isi css disini

CSS Sudah diproteksi dengan bantuan session php, dimana jika session tidak ditemukan atau tidak cocok maka kode css tidak akan ditampilkan, namun browser hanya akan menampilkan tulisan “CSS PROTECTED”, sampai disini kode ini sudah oke, tetapi belum bisa digunakan.

:: Cara Penggunaan

Kalau ingin menggunakan kode berikut. ( Taruh di index.php / lainnya ), disini kita memprotek isi dari style.php yang isinya adalah kode css dengan menggunakan session di php.

<?php
session_start();
$_SESSION['NameSession'] = "Key";
?>
Isi index / header atau lainnya

:) Silahkan dicoba.

DEMO

Untuk demo silahkan lihat disini.

TIPS LAIN

Untuk menggunakan CSS nya cukup mudah. Namun jangan menggunakan link href, tetapi gunakan @import seperti berikut ini.

<style type="text/css">@import url(http://blablabla/style.css);</style>

Menyamarkan style.php menjadi style.css

dan sedikit lagi. Trik menghilangkan ekstensi .php dan menggantinya dengan .css agar kode dapat diproteksi kita menggunakan .htaccess ( mod_rewrite ). Bagaimana caranya?

Begini Caranya :

RewriteEngine on
RewriteRule style.css style.php

Bagaimana ? Anda bisa ? Coba dulu. Silahkan Berkomentar bila ada masalah, atau belum mengerti.

HASIL

DEMO | DOWNLOAD CODE

Berikut file CSS yang di protek:
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.css

Kelemahan

Tidak ada sistem yang sempurna, trik inipun tidak sepenuhnya memproteksi file css kita, misal dengan bantuan firebug kode css masih bisa dilihat, hal ini dikarenakan browser talah mendownload dahulu script css nya dan menyimpannya dikomputer kita untuk diproses oleh browser. Namun trik ini tetap ada gunanya, walaupun kita tidak bisa sepenuhnya membuat ini aman, setidaknya dengan ini sudah cukup menyulitkan orang untuk melakukan copy-paste kode seenaknya, terutama yang belum mengerti tools seperti firebug.

Referensi: Bersumber dari teman, DozaCrack.org entah juga namanya doza crack. hehe Saya bertanya di facebook.

Follow @tut_web

Tags:

Sort URL https://www.tutorial-webdesign.com/va9Yt
Back To Top

Penulis :

Gandara Fajar

this all about 0 and 1 ~ http://gfajar.com/ http://gfajar.org/ View all posts by Gandara Fajar

http://www.gfajar.com/

Comments

48 thoughts on “Proteksi CSS Dengan PHP”

Surya Adi Sapoetra says:

September 16, 2013 at 15:35

saya sudah coba view-source, terus nemu import style.css, saya coba ganti index.php dengan style.css langsung di address url, sourcenya kebaca bos,.. :)

Reply
- TWD Editorial says:
  
  September 16, 2013 at 16:47
  
  URL nya yang mana?
  Ini saya copy kan URL nya, bagian mana yang bisa dilihat?
  
  http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.css
  atau ini
  http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
  
  Reply
  - Surya Adi Sapoetra says:
    
    September 21, 2013 at 12:02
    
    1. tahapannya gini bos, saya buka url http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/ yang ada di tutorialnya.
    2. saya klik kanan pilih view-source, nanti sourcenya kebuka tuh diwindow baru, kalau ngak salah dengan url view-source:http://view-source:tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/
    3. diaddress bar yang udah ada langsung saya tambahkan aja style.php pada akhir urlnya, jadinya view-source:tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php dan tekan enter.
    4. stylenya terlihat,.
    5. kalau direfresh baru dia protected,. :D
    
    Reply
    - SixmarcH says:
      
      November 30, 2013 at 21:03
      
      ya gan,,sama seperti yang dibilang,kalo direfresh baru protected dia -_-
      jadi gimana solusinya biar tanpa perlu direfresh sudah muncul tulisan protected? :D
      
      Reply
- Arrizal Amin says:
  
  October 4, 2013 at 16:06
  
  view-source:http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php
  
  Reply
  - dedy says:
    
    December 28, 2016 at 00:06
    
    nyimak aja, soalnya aku belum pernah khusus pemrograman
    
    Reply
- ano says:
  
  December 14, 2013 at 11:07
  
  css itu client side – pasti keliatan bagaimanapun juga
  
  Reply
rendybustari says:

September 16, 2013 at 15:47

pake inspect element juga masih bisa kok min :)

Reply
- TWD Editorial says:
  
  September 16, 2013 at 16:47
  
  Iya, kan sudah dikasih tau di artikel dan di demonya :)
  
  Reply
Taufik Nurrohman says:

September 17, 2013 at 01:38

Tahu tidak mas/om, tentang proteksi file font di hxxp://www.fontspring.com/

Dari tab Network Chrome Inspector bisa terlihat data yang ditransfer, tapi ketika dibuka file font tersebut isinya kosong. Jadi tidak bisa dicuri hehe…

Reply
Taufik Nurrohman says:

September 17, 2013 at 01:39

Tahu tidak mas/om, tentang proteksi file font di hxxp://www.fontspring.com/

Dari tab Network Chrome Inspector bisa terlihat data yang ditransfer, tapi ketika dibuka file font tersebut isinya kosong. Jadi tidak bisa dicuri hehe…

Reply
- TWD Editorial says:
  
  September 17, 2013 at 08:09
  
  iya, gimana tu om bikinnya?
  
  Reply
Ibrahim Vatih says:

November 3, 2013 at 07:01

Karya kita dicomot itu emang ngga enak, tapi kalo udah di ranah digital, saya pribadi coba tanamkan dalam diri bahwa kemungkinan itu udah jadi bagian di sini :D

Reply
str4what says:

November 16, 2013 at 02:08

gak work, coba ctrl+a dulu lalu ctrl+u

cek demonya tadi :v

Reply
As Sabiluna says:

November 22, 2013 at 07:07

bagi saya tidak perlu css itu dilindung. Yang penting adalah kandungan halaman itu mesti diprotek

Reply
- ano says:
  
  December 14, 2013 at 11:08
  
  bener.
  
  Reply
- gfjar says:
  
  April 9, 2014 at 18:16
  
  Memang, yang harus kita proteksi adalah Konten, bukan dengan proteksi anti copy paste. Tapi keaslian konten tsb
  
  Reply
qq says:

December 14, 2013 at 16:39

bisa dobaca dgn mudah kok di chrome terbaru..?

Reply
drimwiper says:

January 10, 2014 at 14:46

ga work… tutorial gagal..

Reply
- TWD Editorial says:
  
  January 10, 2014 at 14:59
  
  bagian mana yang gagal?
  
  Reply
Mawan says:

February 27, 2014 at 18:04

makasih mas, tapi masih belu paham :D

Reply
Edi Liu says:

April 2, 2014 at 07:24

Tutorialnya bagus, proteksi sederhana dan untuk melihat isi style.css yang diubah namanya ke style.php, sangat mudah, ketik saja
[code]
"view-source:http://tutorial-webdesign.com/labs/php/proteksi-css-dengan-php/style.php"
[/code]
di address bar Firefox, maka akan muncul source code CSS-nya.

Reply
- TWD Editorial says:
  
  April 2, 2014 at 11:36
  
  gak muncul kok, coba aja buka demo nya trus ketik view-source:URL kayak gitu. Gak keliatan source nya
  
  Reply
  - tes pack says:
    
    April 8, 2014 at 14:57
    
    Bisa gan, ini buktinya [IMG]http://i61.tinypic.com/9vfvrs.png[/IMG]
    
    Reply
Acep Miftah says:

April 9, 2014 at 16:27

kalau mengamankan css kayak tokobagus itu gimana ya??

Reply
- TWD Editorial says:
  
  April 11, 2014 at 09:24
  
  Di minify maksudnya? bisa pake ini http://cssminifier.com/
  
  atau jika kamu menggunakna sass maka bisa otomatis di kompres jika mau :)
  
  Reply
Harga Hp says:

April 10, 2014 at 01:13

Proteksinya masih kurang ketat masbro, ketika di inspect element masih kelihatan style.css nya. Btw, good job :D

Reply
tas mewah says:

October 7, 2015 at 16:16

thanks gan berhasil….

Reply
Navis Dwi Sucipto says:

November 16, 2015 at 13:48

cara yang paling ampuh bejimane ya bang ? biar gak bisa di colong css sama open source.. punya wap satu yang copy template nya jutaan.. pusing kalo karya sendiri di copy orang.. gak pada kreatif.. mending copy cssnya sama tampilannya.. tag tag nya jg dicopy itu yg paling nyebelin..

Reply
lagubagus says:

December 27, 2015 at 06:48

Nice share gan tp kayanya masih tetep bisa di copas :)

Reply
muvifly says:

December 29, 2015 at 15:19

lumayan buat nambah informasi

Reply
Sharelagu says:

February 8, 2016 at 20:12

thank atas artikelnya semoga ke depan tambah sukses

Reply
lagu mp3 gratis says:

February 10, 2016 at 17:21

wah jadi cara nya seperti itu ya gan
saya simak n pelajari dlu gan
tanks info yh

Reply
Mp3uc.net says:

April 23, 2016 at 13:12

Gan kok masih bisa di source cssnya?

Reply
gopena says:

September 19, 2016 at 13:03

masih belum bisa gan, ada plugin yang kerjanya seperti itu gak gan?

Reply
Oncom man says:

September 27, 2016 at 08:25

aku gagal gan heu.. gmna nih

Reply
muhammad arifudin says:

September 30, 2016 at 10:45

Proteksinya masih agak lemah, saat di inspect element masih kelihatan style.css nya. tapi bagus :D

Reply
yuzarsif says:

October 1, 2016 at 09:52

ane belum berhasil gan

padahal sudah mengikuti langkah-langkahnya

Reply
Putera dwi cahyo says:

October 2, 2016 at 12:43

masih belum ngerti, itu nyimpen kodenya dmana gan ?
atau adakah cara lain selain dengan kode, masih kurang faham dengan pemrograman.

Reply
masbidin says:

October 6, 2016 at 21:57

masih belum bisa Gan, ada cara yang lebih mudah ngga? hhehe

Reply
Hafidz Ihza Pratama says:

October 15, 2016 at 19:44

NIH ISI CSSNYA PROTEKSI PROTEKSI GUNDULMU NDUL
*{
margin:0; padding:0;
}
body{
background: #EB984F;
color: #34495E;
line-height:1.5em;
}
a{
color: #505F6E;
}
.container{
width: 800px;
margin:30px auto;
background: #F4D03F;
}

/* CSS TWD, Ini rahasia */

header{
padding: 30px 15px;
margin:10px;
border-bottom:1px solid #F4D030;
}

section{
padding: 30px 15px;
margin:10px;
}

Reply
- TWD Editorial says:
  
  October 23, 2016 at 12:47
  
  Jago bisa tau, gak banyak lho yang sehebat sampean mas :)
  
  Reply
  - Rahma says:
    
    October 31, 2016 at 10:32
    
    bismillah mulai belajar untuk bisa html-htmlan…
    
    Reply
  - Juancuk says:
    
    December 14, 2016 at 01:57
    
    Itu kompi lu yang kurang sehat gan makanya css nya ga keliatan. Di kompi ane yang sehat masih keliatan koq css nya :p
    
    Reply
pastiguna says:

December 5, 2016 at 20:31

itu tiggal copy ke css kan gan

Reply
- TWD Editorial says:
  
  December 6, 2016 at 21:22
  
  Iya
  
  Reply
poplagu says:

January 8, 2017 at 10:23

Ijin coba gan…

Reply
lagupedia says:

May 17, 2017 at 23:49

ijin praktek gan

Reply