Az én kódom, az én váram

Az én kódom, az én váram... De szép is lenne, ha valóban így lenne. Számos esetben tapasztaltam már olyat, hogy az általam üzemeltetett weboldalról valaki átmásolt szöveges tartalmat, vagy épp egy forráskód részletet. Mivel ezeken a szellemi alkotásokon sokáig dolgoztam, így szerettem volna megvédeni őket. Tökéletes megoldás nincs, de amik közel állnak hozzá azokat most bemutatom neked.

Forráskód nézet letiltása

A "CTRL + U" gomb kombinációval bárki megtekintheti az éppen látható weboldal lerenderelt forráskódját. Ilyenkor lehetőségünk nyílik belenézni más weboldalak HTML, CSS és JavaScript megoldásaiba. Ezt a funkciót teljesen kikapcsolni nem lehet, de elvehetjük a kedvét pár ifjú kalandornak a kódunkban való böngészéstől. Ehhez annyit kell tennünk, hogy megvizsgáljuk, hogy történt-e gomb lenyomás. Ha történt a control gomb megnyomása mellett még milyen gombot nyomtak le. Ha az esetünkben az "u" betűt, akkor egyszerűen megszakítjuk az eseményt.

JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		$(document).keydown(function(event) {
			//ctrl+u (forráskód nézet) tiltása
			if ((event.ctrlKey == true) && (event.keyCode == 85)) {
				event.preventDefault();
			}
		});
	});
</script>

És honnan lehet tudni a lenyomott gomb keyCode értékét?

Minden gomb, amit lenyomunk a billentyűzeten egy keyCode értéket ad át. Ezt természetesen nem kell találgatással kipuhatolni, az alábbi táblázat segtséget nyújt a megértésében.

Amennyiben szeretnéd végigtesztelni a lehetőségeket a keyCode.info oldalon megteheted.

Ez így rendben van, de kicselezhető

Habár a billentyűzet gombkombinációját ezzel megszűrtük és egyben kizártuk, ennek ellenére ez nem nyújt teljes mértékű biztonságot, de jelentős mértékben eltántoríthat pár kezdő titánt. A kikerülése roppant egyszerű: Az aktuális URL elé írd be, hogy view-source:

Ezzel a megoldással direkt kényszertíjük a böngészőnket arra, hogy felfedje a kérdéses weboldal lerenderelt forráskódját, függetlenül attól, hogy milyen védelmet hivatott ellátni egy JavaScript kód. Forráskód nézetben ugyanis a JavaScript kód nem fut le.

Egyéb más mód lehet még egy HTML DOM Parser alapú bot, amit képes végigjárni egy weboldal összes aloldalát, megnyitni annak forráskódját és tetszőlegesen kielemezni azt. Ebben az esetben szintén nem lesz hatásos a JavaScript alapú védelem.

A másolást, kivágást és beillesztést is lehet tiltani?

Természetesen igen. Méghozzá az alábbi módon:

JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		$(document).keydown(function(event) {
			//ctrl+c (másolás) tiltása
			if ((event.ctrlKey == true) && (event.keyCode == 67)) {
				event.preventDefault();
			}

			//ctrl+x (kivágás) tiltása
			if ((event.ctrlKey == true) && (event.keyCode == 88)) {
				event.preventDefault();
			}

			//ctrl+v (beillesztés) tiltása
			if ((event.ctrlKey == true) && (event.keyCode == 86)) {
				event.preventDefault();
			}

			//ctrl+a (minden kijelölés) tiltás
			if ((event.ctrlKey == true) && (event.keyCode == 65)) {
				event.preventDefault();
			}
		});
	});
</script>

Erre létezik egy másik megoldás is:

JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		//másik megoldás a másolás, kivágás, beillesztés tiltására
		$(document).on({
			copy : function(event) {
				event.stopPropagation();
				event.preventDefault();
			},
			paste : function(event) {
				//event.preventDefault();
			},
			cut : function(event) {
				//event.preventDefault();
			}
		});
	});
</script>

Mi a helyzet a jobb klikk tiltásával?

Még az egér gombnyomásának eseményét is nyomon lehet követni. Az alábbi módon megakadályozhatjuk, hogy ne jelenjen meg a jobb egér gomb lenyomásakor az úgynevezett "contextmenu", mellyel képeket lehetne letölteni.

JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		//jobb klikk tiltás
		$(document).on('contextmenu', function(event){
			event.preventDefault();
		});
	});
</script>

Ez sem teljes értékű védelem, inkább csak elriasztás, vagy nehezítés értékű. Hiszen az F12 gomb lenyomásával előhozható a böngésző konzol nézete, amiben szabadon lehet böngészni a forráskódot és a kép hivatkozására kattintva le is tölthetjük azt. Az viszont mindenképp gátló tényező, hogy a jobb kttintási lehetőség tiltásával a HTML DOM-ban nem fogja automatikusan kikeresni megfelelő sort a böngésző konzolja, tehát mindet végig kell nézni ahhoz, hogy eljusson az illető a kívánt elemhez.

Másolás védelem

Az ebay.com webáruháznál talán már te is észrevetted, hogy ha megpróbálsz kijelölni egy termék nevet és bemásolni azt bárhová, akkor fura mód beleilleszti a termék URL-jét is. Most ezt a kis trükköt fogom bemutatni az előzőleg bemutatott másolásvédelem kód kibővítésével.

JavaScript

<script type="text/javascript">
	$(document).ready(function() {
		//másik megoldás a másolás, kivágás, beillesztés tiltására
		$(document).on({
			copy : function(event) {
				event.stopPropagation();
				event.preventDefault();
				
				event.originalEvent.clipboardData.setData('text/plain', 'Elé fűzött tartalom '+window.getSelection()+' Mögé fűzött tartalom');
			},
			paste : function(event) {
				//event.preventDefault();
			},
			cut : function(event) {
				//event.preventDefault();
			}
		});
	});
</script>

Az "event.originalEvent.clipboardData.setData" függvény segítségével módosíthatjuk az aktuális vágólapot. Akár törölhetjük a tartalmát is. Ezzel azt érnénk el, hogy hiába nyom valaki másolás parancsot, a vágólap beillesztéskor mindig üres lesz. Avagy megtehetjük azt, hogy a meglévő vágólap tartalmát lekérdezhetjük a "window.getSelection()" függvény segítségével és akár hozzáfűzhetünk egyedi tartalmat, ahogyan a példakódban is látható. Webáruházaknál, vagy magazinoknál praktikus megoldás lehet.

Demo letöltése

Leírásaink azon kezdő és haladó programozóknak nyújtanak segítséget, akik már minimális szinten foglalkoztak weboldalkészítéssel. Ha szeretnél jobban elmélyülni a témában, vagy elsajátítani alapokat, még tovább fejlődni, akkor nézz körbe tanfolyam kínálatunkban, ahol a kezdőtől a profi szintig nyújtunk képzéseket a számodra.