4

I'm trying to embed a secret watermark in a website so that I can link any screenshots to the user who created them. The page looks something like this:

It has a custom background (user can change it by providing a link) on top of which there's a semi-transparent window. The window contains text and opaque tiles which also contain information. The color of the tiles can change based on the information it contains (about 4-5 possible colors).

I tried implementing subtle changes to the tiles with dynamic .css, but a .jpg screenshot would ruin it. I played with the transparent window as well: I assigned a 50x50 repeating, transparent .png background and made subtle modifications, but the background image beneath and the .jpg compression would ruin that as well.

What are my options?

  • This is likely impossible because screenshotters can just adjust the underlying HTML to remove any watermarks. Perhaps you can expand on what you're actually trying to solve for instead? – Steve Mar 28 '17 at 14:49
  • 3
    Make the changes less subtle and the JPG won't hide them completely. Use very large shapes in the background to encode the user's ID. E.g. Use a modified "checkerboard" where each cell is white (.) black (-) or gray (space) and corresponds to Morse code of the username / user ID. This would survive compression artifacts, resizing and grayscale conversion fairly well, and would likely be completely disregarded by the user as important information. – Dan Mar 28 '17 at 15:54
  • @Steve I'm hoping my users won't notice the site is watermarked, thus having no incentive to modify the HTML. – Gavriil Pascalau Mar 28 '17 at 18:54
  • 1
    I like the "checkerboard idea." Hiding in plain sight, as it were. Just work the pattern into your graphic design so that it's always on screen - for example, a border around the visible pane that moves with the scroll. – Steve-O Mar 28 '17 at 19:29
  • 1
    @GabiPascalau Even if they don't notice immediately, they'll figure it out eventually. And then they might be angry at you for trying to track them by their screenshots, it's very easy these days to automatically apply custom user CSS to handle that. (Personally, I find trying to trick your users to be unethical to begin with, but that's just me.) – JAB Mar 28 '17 at 20:05
3

You could take your screenshots as .PNGs? But if you mean you want a secret watermark to survive someone else taking a copy and choosing their compression then I'm afraid nothing will help, because pixels (see the image attached). Then you would need a big old banner at the bottom and they can still blur it out.

enter image description here

  • 1
    The thing is I can not control the screenshot format my users will choose, this is why I want to prepare for jpg compression as well. Hiding the watermark is important so that they don't know it's there to blur it. – Gavriil Pascalau Mar 28 '17 at 12:20
  • I should probably clarify that you can use JPGs for steganography but you have to be in charge of the creating of the files. For example you can have an original JPG, then change a few of the pixels and send that to yourself, and then subtract the original to see the changed pixels. This is useful because why would someone choose a PNG for an image with strange blotchy random noise on it? – daniel Mar 28 '17 at 12:21
  • Since my users will be taking the screenshots, I won't be in charge of creating the jpg files :S – Gavriil Pascalau Mar 28 '17 at 12:23
  • Yea if you cant control the creation of the JPG then you cant prepare for it really, just like someone posting a meme can't stop reposts losing quality, Do I look like I know what a JPEG is? – daniel Mar 28 '17 at 12:24
  • Maybe an error-correcting technique similar to QR codes? Since most screenshot-automatic upload tools like ShareX won't resize and compress the image too much. – Gavriil Pascalau Mar 28 '17 at 12:27
2

I'm thinking of something like this:

Using a script, scan for any known screenshotting combinations (like win+prtscr or fn+prtscr). When you detect these combinations, overlay a watermark, translucent image onto the screen instantly. Then when the user saves the screenshot, they'll have captured your site with the watermark overlayed.

This should be relatively simple to implement - but a word of caution - this is more of a weak deterrent. It's very simple for someone to disable the script or use software - in which case you won't be able to stop them.

  • Interesting concept. Would this work if the browser is not focused? – Gavriil Pascalau Mar 28 '17 at 18:08
  • 1
    someone using no-script would negate this completely. However, by making the image dependent on the script would resolve the issue. Something like...no script no image like policy. – user633551 Mar 28 '17 at 22:01
  • @user633551 yep. That's what I said - defeating this is trivial. It's only a deterrent not a foolproof mechanism. – thel3l Mar 29 '17 at 0:53
  • @GabiPascalau - I don't think so. Since scripts only execute when the window is in focus, this wood defeat the attempt. This is also what happens when you use software to screenshot the page - like snipping tool or grab. – thel3l Mar 29 '17 at 0:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.