Diskuze: Ochrana obrázku před stažením

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

David

Člen

David:3.7.2020 9:36

Ahoj, hledám způsob jak zabránit stažení obrázku z webu. Narazil jsem na tohle .
Tady mi to ale nefunguje. Ale i na stackoverflow je obrázek přímo ve funkci a nijak ho tam předtím nedefinuje.
Nevíte prosím co můžu mít špatně?
Děkuji

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator">
  <title></title>
  </head>
  <body>

  <img src="dog.jpg">

  <?php
$('dog.jpg').mousedown(function (e) {
  if(e.button == 2) { // right click
    return false; // do nothing!
  }
}
?>

  </body>
</html>

Odpovědět

3.7.2020 9:36

Radek Veverka

Tvůrce

Radek Veverka:3.7.2020 9:59

Doporučuji přečíst si pár článků a naučit se alespoň základy, než začneš něco programovat sám. A řešení ze stackoverflow používej jen pokud rozumíš kontextu, jinak můžeš být dost překvapen.
Kód který máš ohraničen php blokem není php, ale javascript, navíc knihovna jQuery, kterou nemáš načtenou. K tomu je navíc špatně selektor, pokud chceš vybírat dle atributu elementu, použij třeba:

$('img[src="dog.jpg"]')

Editováno 3.7.2020 10:00

Nahoru Odpovědět

3.7.2020 9:59

David

Člen

David:3.7.2020 14:36

Díky, myslíš že je to query uvedeno správně?

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>
$('img[src="dog.jpg"]').mousedown(function (e) {
  if(e.button == 2) { // right click
    return false; // do nothing!
  }
}
  </script>

  </head>
  <body>

  <img src="dog.jpg">

  </body>
</html>

Nahoru Odpovědět

3.7.2020 14:36

Radek Veverka

Tvůrce

Radek Veverka:3.7.2020 16:59

Už je to lepší, ale pozor. Tím že más skript před samotným obrázem, tak se spustí ještě před tím než je načtena samotná struktura DOM.
Tady máš kód který by už opravdu měl fungovat:

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>

    <script>
        $(function() {

            $('img[src="dog.jpg"]').on("contextmenu", () => false);

        });
     </script>

  <img src="dog.jpg">

 </body>
</html>

Takto se totiž v jQuery dá zajistit, že kód se spustí, až je celá struktura dokumentu načtena:

$(function() {
    // Tvůj kód, spustí se jakmile je načten dokument
});

Dále jsem použil jinou událost - oncontextmenu - dává to podle mě větší smysl. Zakáže to otevření kontextového menu (toho po kliku pravým tlačítkem).

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

3.7.2020 16:59

David

Člen

David:3.7.2020 20:03

Díky

Nahoru Odpovědět

3.7.2020 20:03

David

Člen

David:5.7.2020 14:19

Přidal jsem ještě ochranu před tím, aby obrázek někdo prostě "nepřetáhl". jakmile ale z obrázku udělám odkaz, toto přetažení obrázku je opět možné...
Lze mu nějak zabránit i v případě, že je obrázek odkazem nebo ne?
Díky

*Mimochodem, bude lepší, pokud to někdo z adminů zařadí do JS. s PHP jsem se spletl.

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>

  <body>

    <script>
        $(function() {

            $('img[src="dog.jpg"]').on("contextmenu", () => false);
            $('img[src="dog.jpg"]').attr('draggable', false);

        });
     </script>

  <a href = "http://www.seznam.cz"><img src="dog.jpg"></a>

 </body>
</html>

Editováno 5.7.2020 14:21

Nahoru Odpovědět

5.7.2020 14:19

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):5.7.2020 14:31

Nejsem si jistý, ale mám pocit, že stažení obrázku úplně zamezit nejde. Aby se mohl obrázek zobrazit na web stránce, musí (myslím) být URL obrázku veřejná, což mimo jiné znamená, že se dá otevřít i v samotné záložce a stáhnout.

Kontrola v JS se dá nejen obejít, ale i přímo vypnout (zamítnutím JS na stránce). Napadá mě jediná drobná ochrana, a to přidat k URL obrázku i nějaký parametr, např. časovou stopu, že půjde obrázek zobrazit jen do určité doby (s daným parametrem). Tuším, že to nějak podobně řeší například FB. Nicméně by pro to bylo potřeba přidat i validaci té časové stopy atd. a řekl bych, že by s tím bylo spíš víc práce než užitku Na co potřebuješ zamezit stahování obrázků z webu?

Nahoru Odpovědět

5.7.2020 14:31

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Radek Veverka

Tvůrce

Radek Veverka:5.7.2020 16:29

K čemu ti to pomůže? Stejně to půjde najít ve výjářských nástrojích na kartě "Network", kde jsou zaznamenány datové výměny se serverem.

Nahoru Odpovědět

5.7.2020 16:29

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):5.7.2020 16:38

Pro ruční stahování v podstatě nijak, víceméně to zamezí jen nějaké intervalové tahání toho obrázku z třetí strany jak jsem psal v příspěvku výše, myslím si, že stažení obrázku zcela zamezit nejde.

Nahoru Odpovědět

5.7.2020 16:38

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Radek Veverka

Tvůrce

Radek Veverka:5.7.2020 16:38

Možná zkus místo nastavování draggable atributu zneškodnit dragstart event:

$('img[src="dog.jpg"]').on("dragstart", () => false);

Nahoru Odpovědět

5.7.2020 16:38

David

Člen

David:6.7.2020 18:47

To jsem také zkusil a stále se obrázek přetáhnout dá. Pokud to teda nejde, nic s tím neudělám :-D Prostě jsem chtěl ochránit mnou vtvořené obrázky.

Nahoru Odpovědět

6.7.2020 18:47

Martin Konečný (pavelco1998)

Tvůrce

Martin Konečný (pavelco1998):6.7.2020 19:05

Pokud se nemýlím, pak vytvořením díla automaticky vzniká autorské právo, jinými slovy že nikdo nemá právo tebou vytvořené obrázky použít, buď bez tvého souhlasu nebo s odkazem na autora (tzn. neuvádět obrázek jako svůj vlastní).

Nahoru Odpovědět

6.7.2020 19:05

Aktuálně připravuji browser RPG, FB stránka - https://www.facebook.com/AlteiraCZ

Jan Kerhart

Člen

Jan Kerhart:8.7.2020 15:07

Ahoj,
úplně stažení nikdy nezabráníš. Ať se budeš snažit sebevíc, tak vždy minimálně bude možné udělat screenshot z obrazovky. Ale jako "nejbezpečnější" řešení mě napadá jedině vykreslit ten obrázek na canvas, zablokovat uložení obsahu canvasu a pro přenos mezi serverem a klientem využít nějaké atypické kódování nebo jej zašifrovat, aby k němu nešlo přistoupit přímo. Obnášelo by to ale dost práce jak na straně serveru tak na straně klienta.
Nevím, o jaké obrázky se jedná, ale ber taky v potaz, že jakýmikoliv takovýmito omezeními znemožníš například i otevření v nové kartě apod., což je pro běžné uživatele maximálně otravné a kdo bude chtít obrázky získat, tak je stáhne bez ohledu na to, jak dobře je zabezpečíš.

Osobně bych se na jakékoliv ochrany tohoto typu vykašlal a věnoval bych čas raději do věcí, které uživateli prohlížení webu zpříjemní.

Nahoru Odpovědět

8.7.2020 15:07

Naučíme tě pracovat na home-office.

Zjistit více...

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 13 zpráv z 13.

Nejčastěji vyhledáváné

Diskuze: Ochrana obrázku před stažením