Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Adding dynamic watermark to images

I'm trying to add dynamic watermarks to images. This specific case is for a MaxDiff, but I would need to implement it across any future question types where I'm including images.

By dynamic, I mean I would like to use pass-through information (such as a unique ID or email address) and apply this to the watermark. That way, the images in a respondent's survey are all watermarked with their unique ID or email address.
asked Jun 20 by helsadig (120 points)
retagged Jun 20 by helsadig
JavaScript could be used to display text on top of images, but it should be understood that this would not be a watermark.  Any decently tech-savvy respondent could remove the text and get the image itself.  For a secure option, you will have to have the watermarked images on your server.
Thanks, I get what you're saying (other articles I've read mention it as watermarking). Would something like adding additional javascript to prevent right-clicking options be enough, or would the original, non-watermarked image still be accessible through source code?
With how information is passed between a web server and the client browser, it is fundamentally impossible for any JavaScript solution to totally prevent access to the source image.  Scripts that make it more difficult to use the context menu (right click) and similar limitations do exist, though.  I have helped some users on this forum implement them and can offer to help you do the same, but want to be totally transparent that no such solution can ever be 100% secure.
I appreciate the transparency and I can definitely pass along the same caveats to the team. If it can make source image access harder (though not impossible), that will help us as we find a long-term solution. Would love the help if you can spare it.

On a separate note, if a JavaScript solution is not ideal, do you have alternate suggestions of how I could implement some sort of image protection within Lighthouse?
Great.  I presented a few possibilities to a user here that you might be interested in as a starting point:

https://sawtoothsoftware.com/forum/33843/

That post also included a "pseudo watermark" that displays the respondent number (or any other identifier) across the page.  That might be something your team would be interested in.

It may be possible to write a server script that would automatically watermark images before sending them to the client, but it would be a big job if it were possible at all.  If your expected number of respondents isn't too massive, a more reasonable option may be to watermark all the images on your machine (there may be image apps out there that can be used to rapidly watermark images with different identifiers), then only show respondents the image that belongs to them.  So respondent 1 sees an image watermarked with a "1," respondent 2 watermarked with a "2," and so on.

I'm not a security expert by any means, but if I were going to go this route, I wouldn't want my images to be named something like "brand1," "brand2," "brand3," etc.  It wouldn't be hard for a respondent to replace their "brandX" with "brandX+1" to get someone else's image to share.  To prevent this, you'd need to map respondent numbers to some more obscure IDing system and show images with those IDs in the name.  That part wouldn't be too hard if you were able to produce the images with those names.

As an entirely tangential possibility, would your team be more comfortable with the survey if it involved an NDA?
This is incredible, I've spent days on end trying to piece this together, and your solution got me where I needed to go in about 5 minutes. Thank you!! We are definitely going to add specific NDAs (we work with large CRM files as well as panel sample, so while I don't think the NDAs are enforceable, they are a bit of a useful "scare tactic").

The only issue I'm having right now is that this only seems to be working correctly on the first question. I had set up a dummy test project, and the watermarking appears on the first question as desired. However, when I go to the next question, it disappears. If I refresh the page, the watermarking then appears.

What's weird is the other pieces you mentioned (disabling right-click, disabling ctrl+c) work when I go to the next question - so it's just the watermarking that doesn't appear. Any thoughts on that?
That's peculiar.  If you repeat your test while the browser console is open (press F12 and look for a tab labelled "Console"), do any error messages appear when the problem occurs?
It did throw one issue:

A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced.
To fix this issue, replace the usage of navigator.userAgent, navigator.appVersion, and navigator.platform with feature detection, progressive enhancement, or migrate to navigator.userAgentData.
Note that for performance reasons, only the first access to one of the properties is shown.
1 source
adblock-functions.js:1
I haven't seen that before.  What code did you end up calling for the watermark?  "[% IPAddress() %}"?
No, I actually used a pass-in variable I added which contains a version of a unique ID that's tied to our CRM.

I found a solution, though I'm not sure how well it'll work in the long run. I ended up adding this code to an ".addOnUnload" to force the page to refresh on unload and then stop:

    window.location.reload();
    return false;

    try {
    window.stop();
} catch (exception) {
    document.execCommand('Stop');
}

I should mention that I'm trying to figure out this watermarking solution on two survey platforms in parallel, so that solution may not necessarily be the correct one for Sawtooth. With that said, it's possible that your original implementation will work in Lighthouse without needing this additional code.

Thanks again, you were a huge help!

Your solution to the original question

Please only use this to answer the original question. Otherwise please use comments.
Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:

To avoid this verification in future, please log in or register.
...