6

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?

Improve this question
9
  • 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, 2017 at 14:49
  • 4
    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, 2017 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, 2017 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, 2017 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, 2017 at 20:05

2 Answers 2

Reset to default
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

Improve this answer
6
  • 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, 2017 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, 2017 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, 2017 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, 2017 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, 2017 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.

Improve this answer
5
  • Interesting concept. Would this work if the browser is not focused?
    – Gavriil Pascalau
    Mar 28, 2017 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, 2017 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, 2017 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, 2017 at 0:55
  • This does not work when someone is using an external device like a mobile phone to take a picture of a screen. This is how I would do it, if I needed to. It's also how early video copying of copy-protected DVD's worked.
    – Marcel
    Jul 10 at 11:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .