Welke technieken zijn er om te voorkomen dat er iemand met een afbeelding in een website/webapp aan de haal gaat?

Tot nu toe ben ik de volgende tips tegengekomen:
- copyright melding onder of naast de afbeelding om te attenderen
- watermerk aan afbeeldingen toevoegen om misbruik achteraf aan te kunnen tonen
- rechtsklik (contextmenu) afvangen met al dan niet een transparante overlay image,
- meta tags per social platform (dat het ondersteunt) aan HTML toevoegen (bv. <meta name="pinterest" content="nopin" />)
- lage resolutie of afwijkende aspect ratio gebruiken (bv. geen 16:9)
- e-mails sturen naar misbruikers om ze er op te wijzen dat ze illegaal bezig zijn ("cease and desist")
- misbruik monitoren met online tools als Pixsy

Geen van deze oplossingen vind ik nou echt handig, omdat de preventie werking uitgaat van het gedrag van de gebruiker, of bij de uitvoering van een derde partij zoals een social media platform. Achteraf iets oplossen met online tools vind ik als mosterd na de maaltijd.

Ik zoek naar een zo sluitend mogelijk technische OOTB oplossing, of een combinatie van technieken.
Hoe kan je een afbeelding laten zien zonder dat iemand er een screenshot van kan maken en het verder kan verspreiden alsof het om het origineel gaat?
Binnen een tiende van een seconde heb ik mijn Knipprogramma van Windows al geopend. Maar dergelijke maatregelen met Javascript en Canvas voorkomt wel dat iemand geautomatiseerd alles staat te kopiëren. Zorg tevens voor een niet herleidbare URL. Dus geen 1.jpg, 2.jpg, en hash deze desnoods met md5() met een geheime salt.
Hier een andere mogelijkheid om beschermde afbeeldingen te kopieren.

Met Pinterest.

Ga in Pinterest naar de webpagina met plaatjes van je keus
Pinterest toont alle afbeeldingen voor zover ze in een IMG staan.
Selecteer de afbeeldingen en bewaar ze in een verzameling.
Vanuit de verzameling kan je de afbeeldingen bewaren waar je wilt.

Lukt ook met afbeeldingen die zo zijn 'beschermd' :

img {
    pointer-events: none;
}
Als je de pagina opslaat als html heb je direct alle foto's. Dus altijd mogelijk.

off topic
Ad Fundum op 29/07/2020 16:07:47

[quote="- SanThe - op 29/07/2020 15:34:05"]
Onmogelijk.

Dat is niet echt out of the box.[/quote]
bullshit bingo
https://www.buzzwordbingogame.com/cards/bullshit/
Ik ben nog steeds benieuwd ... om wat voor foto's gaat het???

Gaat het om huis-tuin-en-keuken kiekjes, of zijn het professionele foto's die jij verkoopt en waarmee jij geld verdient? En op welke manier ondervind je op dit moment schade?
Adoptive Solution op 29/07/2020 18:04:40

Hier een andere mogelijkheid om beschermde afbeeldingen te kopieren. Met Pinterest.
Dat is opgelost met een meta tag: https://help.pinterest.com/en/business/article/prevent-saves-to-pinterest-from-your-site

Jan R op 29/07/2020 19:48:36
Als je de pagina opslaat als html heb je direct alle foto's. Dus altijd mogelijk.
off topic
[quote="Ad Fundum op 29/07/2020 16:07:47"][quote="- SanThe - op 29/07/2020 15:34:05"]Onmogelijk.
Dat is niet echt out of the box.[/quote]bullshit bingo
https://www.buzzwordbingogame.com/cards/bullshit/[/quote]Zal pagina opslaan ook werken met afbeeldingen die speciaal via JavaScript worden geladen en getoond?
OT: het is geen bullshit, maar een buzzword volgens jouw link..

Ozzie PHP op 29/07/2020 21:43:52

Ik ben nog steeds benieuwd ... om wat voor foto's gaat het???
Gaat het om huis-tuin-en-keuken kiekjes, of zijn het professionele foto's die jij verkoopt en waarmee jij geld verdient? En op welke manier ondervind je op dit moment schade?
Als ik dat typ ben ik mijn anonimiteit kwijt, dat is nogal een prijs voor alleen een technische vraag. Ik hoop dat je er mee kan leven met de omschrijving dat de foto's een waargebeurd verhaal vertellen, en dat het mij niet om geld gaat, maar om ethiek.
>> Als ik dat typ ben ik mijn anonimiteit kwijt, dat is nogal een prijs voor alleen een technische vraag. Ik hoop dat je er mee kan leven met de omschrijving dat de foto's een waargebeurd verhaal vertellen, en dat het mij niet om geld gaat, maar om ethiek.

Ik probeer alleen wat duidelijkheid te krijgen om in te schatten waar je juridisch gezien staat. Als je het niet wil zeggen ook prima hoor.
Er is een artikel uit 2014 met een proof of concept (jaja, weer een buzzword) van interlacing, zodat de afbeelding wel wordt weergegeven maar niet kan worden opgeslagen:
https://www.patrick-wied.at/talks/image-protection/demos/demo-interlacing.html

Het gaat mij hier om het idee om een afbeelding dusdanig aan te passen dat het wel zichtbaar is, maar niet kan worden opgeslagen op zo'n manier dat het kan worden hergebruikt. De afbeelding door de browser laten opslaan werkt niet, het maken van een screenshot werkt niet, en de pagina opslaan werkt ook niet.

Natuurlijk kan je er voor kiezen om een minder heftig effect te kiezen dan het overslaan van beeldlijnen, het gaat er om dat het idee werkt.
Dat zou kunnen voor die demo, ik zie dat ik ben vergeten om een link naar het hele artikel te plaatsen:
https://www.patrick-wied.at/blog/image-protection-on-the-web

Daarin staat ook een simpel idee van encryptie tussen de browser en de server waardoor je niet zomaar de URI kan opgeven van de afbeelding.
Misschien is dit een idee :
<script>
wo = window.onload;
window.onload = function()
{
	wo && wo.call(null);
	// Get the image
	var sampleImage = document.getElementById("ringoImage"),
	canvas = convertImageToCanvas(sampleImage);

	// Actions
	document.getElementById("canvasHolder").appendChild(canvas);
	document.getElementById("pngHolder").appendChild(convertCanvasToImage(canvas));

	// Converts image to canvas; returns new canvas element
	function convertImageToCanvas(image)
	{
		var canvas = document.createElement("canvas");
		canvas.width = image.width;
		canvas.height = image.height;
		canvas.getContext("2d").drawImage(image, 0, 0);
		return canvas;
	}

	// Converts canvas to an image
	function convertCanvasToImage(canvas)
	{
		var image = new Image();
		image.src = canvas.toDataURL("image/png");
		return image;
	}
};
</script>

<div id="promoNode"></div>

	<p>The images below include the original image (jpg), the canvas version, and a conversion from canvas to PNG.</p>

	<h2>Original Image</h2>
	<p>
		<img src="ringo.jpg" id="ringoImage" />
	</p>

	<h2>Canvas Image</h2>
	<p id="canvasHolder"></p>

	<h2>Canvas -&gt; PNG Image</h2>
	<p id="pngHolder"></p>

</div>


Vergelijkbare code hier :
https://www.w3schools.com/tags/canvas_drawimage.asp

Reageren