Ochrana web stránky pred kopírovaním

Ako zabrániť kopírovaniu textu a obrázkov, vytlačeniu a uloženiu webovej stránky? Toto samozrejme nie je možné, ale dá sa k tomu priblížiť a neskúseného používateľa rýchlo odradiť. Jednotlivé ochrany nemusia fungovať na všetkých prehliadačoch rovnako, preto prinášam viac tipov.

CSS ochrany

Ochrana pred tlačou. Niekde do štýlu, alebo môže byť aj samostatný CSS súbor pre tlač, vložte nasledujúci kód. Malo by fungovať na všetkých moderných prehliadačoch.


@media print {
  body {
    display: none;
  }
}

Ochrana pred označením a následným kopírovaním textu. Prvá vlastnosť patrí do CSS 3, ďalšie sú pre prehliadače od Mozilly, pre Operu a pre prehliadače založené na jadre WebKit (Safari, Chrome, Konqueror)

body {
  user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -webkit-user-select: none;
}

Pre Internet Explorer treba použiť HTML atribút unselectable.

...
<body unselectable="on">
...

Javascript ochrany

Nevýhoda Javascript ochrán je, že sa dajú vypnúť zakázaním Javascriptu. Možné riešenie je zobraziť stránku iba keď je Javascript povolený, v opačnom prípade zobraziť používateľovi správu, že stánka vyžaduje Javascript.

Zákaz zobrazenia kontextového menu s ponukou Uložiť obrázok ako. Kód bol testovaný pre Firefox 3.5 a Arora (WebKit).


$(function() {
  // Naviaže niektoré udalosti na funkciu disabled()
  $("body").click(disabled).mousedown(disabled)
    .mouseup(disabled).bind("onselectstart", disabled)
    .bind("ondragstart", disabled).bind("oncontextmenu", disabled);
  document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
  document.oncontextmenu = disabled;
});

function disabled(e)
{
  // Ak ide o kliknutie ľavým tlačidlom myši (kliknutie na odkaz), povolí pokračovanie
  if (e.type == "click" && e.button == 0)
    return true;
  // Ak ide o formulárové prvky, tiež urobí výnimku
  if (e.target == "[object HTMLInputElement]" || e.target == "[object HTMLSelectElement]"
    || e.target == "[object HTMLTextAreaElement]")
    return true;
  // Inak zakáže pokračovanie propagácie udalosti
  return false;
}

Prekrytie obrázkov priehľadným DIVom v prípade, že by sa používateľovi nejako podarilo kliknúť.


img = 0;
// Pre každý obrázok
$("img").each(function () {
  // Zistí rozmery a umiestnenie
  top = $(this).offset().top;
  left = $(this).offset().left;
  width = $(this).width();
  height = $(this).height();


  // Ošetrenie odkazových obrázkov a pridanie prekrývacieho DIVu
  cover = "cover-" + img++;
  if ($(this).parent("a").attr("href"))
    $("body").append("<a style=\"display: block; padding: 0; margin: 0;\"
      class=\"cover\" id=\"" + cover + "\" href=\"" +
      $(this).parent("a").attr("href") + "\"></a>");
  else
    $("body").append("<div class=\"cover\" id=\"" + cover + "\"></div>");

  // Nastavenie umiestnenia nového prekrývacieho DIVu
  $("#" + cover).css("position", "absolute");
  $("#" + cover).css("top", top);
  $("#" + cover).css("left", left);
  $("#" + cover).css("width", width + 1);
  $("#" + cover).css("height", height + 1);
} );

Zabránenie uloženiu stránky. Nikde som nenašiel spôsob, ako by sa dala Javascriptom priamo ovplyvniť táto možnosť prehliadača. Natrafil som na jeden návrh, ktorý vyzeral sľubne – zo servera so pošle len Javascript kód, ktorý neskôr ajaxovo načíta zvyšok stránky. Metóda bohužiaľ hneď na prvom testovacom prehliadači Firefoxe 3.5 nefungovala – Firefox neukladá stiahnutú stránku, ale aktuálny DOM strom so všetkým zmenami, ktoré vykonal Javascript, preto sa stránka vždy uložila. Vymyslel som však ešte jeden spôsob, ktorý sa zdá, že funguje.


// Niekde na konci body
<script type="text/javascript">
  // Premenná timestamp obsahuje čas na serveri a current aktuálny čas
  var timestamp = "<?php echo time(); ?>";
  var current = new Date().getTime() / 1000;
  /* Pri uložení sa timestamp nezmení, ale current bude závisieť od času otvorenia uloženej   stránky. Preto ak sa stránka vykresluje 5 minút od stiahnutie zo servera (čo je viac než   dostatočný čas aj pre tie najpomalšie počítače), Javascript skryje body. */
  if (current - timestamp > 300)
    document.body.style.display = "none";
</script>

Týchto ochrán sa síce skúsenejší používateľ nezľakne, ale na väčšinu použití to stočí. Myslím že už nič viac sa pre ochranu obsahu stránky, samozrejme v rozumnej miere, urobiť nedá.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s