Dutch Design Week 2017
Dutch Design Week 2017

Content webpagina zekerstellen tegen ongewenst gebruik

Op linkedIn gepubliceerd op 19 december 2017

Tekst

Een tekst van internet jatten voor eigen gebruik is een fluitje van een cent. De tekst uit de webpagina markeren met Ctrl+c, in een teksteditor met Ctrl+v de tekst plaatsen en bewaren maar.

Zo heb ik een keer meegemaakt dat een cursustekst van mij van een stichtingswebsite gejat werd en door de bewuste persoon werd gebruikt voor eigen gewin. En ik zal niet de enige zijn die dit is overkomen.

Ter voorkoming van het gemakkelijk stelen van andermans tekst op een webpagina kun je CSS3-stylesheets inzetten.

Met @media print { body { display: none; }} kan een bezoeker de inhoud van een webpagina niet kopiëren naar bijvoorbeeld een PDF. De PDF is wel te maken maar blijft leeg. Met printen op papier krijg je ook een leeg blad.

Met body { -moz-user-select: none; -ms-user-select: none; -o-user-select: none; -webkit-user-select: none; user-select: none; } kan de tekst niet gemarkeerd worden en wordt daardoor kopiëren voorkomen.

Verder zijn er Javascripts beschikbaar die voorkomen dat een tekst gemarkeerd kan worden. Maar die werken in de ene browser wel, in de andere niet.

Maar al met al kun je uiteindelijk niet voorkomen dat een tekst wordt gekopieerd. Door de broncode te kopiëren krijg je de tekst alsnog in handen. Je verwijdert de HTML-code en de platte tekst blijft over voor (mis)gebruik.

Slotsom. Bij tekstbescherming is de beste remedie gebruik te maken van de beschreven CSS3-codes.

Grafische objecten

Met grafische objecten bedoel ik afbeeldingen in JPEG, PNG, GIF, BPG, FLIF en WebP, teksten in PDF, en video in MP4 en WebM.

Om misbruik van je eigendom te voorkomen kun je aan foto's een watermerk toevoegen. De foto die je toont wordt er echter niet mooier op.

Downloaden of anderszins gebruik maken van foto's op je website kun je niet voorkomen. Er zijn wel enkele methodes om ge-/misbruik minder interessant te maken cq. te bemoeilijken.

Klein formaat. Ten eerste kun je het beste een zo klein mogelijk formaat foto online plaatsen zodat de misbruiker niet het beste / mooiste exemplaar van je foto tot zijn beschikking heeft.

Hotlinking voorkomen. Het is mogelijk om een foto van een site te gebruiken op een andere site door de volledige url in de eigen webpagina te plaatsen. In feite is dat oneigenlijk gebruik maken van andermans hosting. Dit zogeheten 'hotlinking' kan simpel worden voorkomen door in het '.htaccess'-bestand in de root van je website de volgende regels te plaatsen:

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^https://(www\.)?website\.nl/.*$ [NC] RewriteRule \.(jpg|png|gif|bpg||flif|webp|pdf|mp4|webm)$ - [F]

Robots.txt gebruiken. Als je wilt voorkomen dat de grafische bestanden die bijvoorbeeld op de server in de map /images/ staan worden geïndexeerd (en daardoor gemakkelijker vindbaar en te misbruiken zijn), dan kun je gebruikmaken van het tekst-bestand 'robots.txt' dat in de root van je website staat. Daarin staat de volgende regel geschreven: User-agent: * Disallow: /images/.

Search Engine Indexing voorkomen. Je kunt ook in de head-sectie van een webpagina de volgende metatag plaatsen: <meta name="robots" content="noimageindex">. Hierdoor worden alle grafische bestanden op de pagina niet geïndexeerd door zoekmachines.

Opmerkingen. Het gebruik van robots.txt en <meta name="robots" content="noimageindex"> is geen 100% garantie dat de grafische bestanden niet worden opgenomen in de indexering van zoekmachines. Deze coderingen doen alleen een verzoek aan zoekmachines. Maar als de niet-indexering je afbeeldingen onvindbaar maakt op internet is de kans op misbruik een stuk minder.

HTML5 Canvas. Door het element Canvas in HTML5 te gebruiken wordt de url van de afbeelding (JPEG, PNG etc.) verborgen in een Javascript. Als een bezoeker van de webpagina via het Contextmenu de afbeelding wil oproepen, krijgt hij een url met Base64-code te zien. Een bezoeker met enige kennis van HTML kan de 'echte' url van de afbeelding vinden maar het kost wat moeite. Deze methode zorgt voor enige belemmering in het downloaden of 'hotlinken' van een foto.

Broncode

Door de HTML-broncode via een 'encrypt'-procedure onleesbaar te maken tegen kopiëren lijkt aantrekkelijk. Deze methode is echter op te heffen via een 'decrypt'-procedure. Dus je schiet er niets mee op. Je schrijft je webpagina, gaat hem dan encrypten om hem vervolgens weer te moeten decrypten als je de tekst wilt aanpassen. Alleen al om die reden zou ik deze methode afraden.

Tot slot

Voorbeelden: BESCHERM HTML5-CONTENT TEGEN KOPIEREN | gebruik CSS3 'media print' en 'user-select', BRONCODE HTML5 ENCRYPTEN | heeft het eigenlijk wel zin?, BESCHERM HTML5-CONTENT TEGEN KOPIEREN | gebruik canvas.

Bronnen: Tips and Techniques to Protect Images on the Internet: 2) Image Protection Using Low Resolution, Wikipedia - Hotlinken, How To Protect Your Website From Image Theft, De robots-metatag gebruiken, W3C - HTML5 Canvas, HTML Encrypter.

De geplaatste artikelen op LinkedIn zijn te vinden op mijn account: Joost van Meeteren | Developer & Designer bij ....

Voor een overzicht van de geplaatste artikelen op LinkedIn kun je ook terecht op de volgende pagina: LINKEDIN | Web Development and Web Design.

Joost van Meeteren, 19 december 2017