0

I am designing and developing a product designer for a client where can create the product design interactively. Any guest can design the product but only those users who have bought it can save it as PDF or image.

In order to prevent theft/misuse I applied watermark on the currently designed product using CSS so that if users take the screenshot of the the page then the watermark on the render page makes it useless for them.

But unfortunately a tech savvy user can easily edit the source and remove CSS style for that watermark.

Is there a way I can have immutable CSS property applied to the page for water?

Or is there any way to prevent theft/screenshot without purchase?

Thanks

Hammad
  • 2,097
  • 3
  • 26
  • 45
  • You can apply the watermark to pictures with php on serverside. You can generate temporary previews without deforming the original image. – Litestone Feb 18 '16 at 07:29
  • 1
    What leaves your server is no longer yours. So, the only thing is to have all image-assembly be performed on your server, and have the watermark injected at all times. The moment you send anything to the user without a watermark, it's his/her's to grab. – Yoshi Feb 18 '16 at 07:37

4 Answers4

3

No, you cannot have a CSS property that the tech-savvy end-user can't override or remove.

If what you're sending the user's browser can render the thing you don't want them grabbing without the watermark, no, there's nothing you can do about that.

You'd have to have the client send the rendering information to your server and have the server generate an image of the result, with watermark baked in, and send that back to the client. (With sufficient image editing expertise that can still be defeated, of course.)

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • But this is interactive tool. Rendering information will be sent to the server where PDF or image will be generated but user can misuse it and don't send rendering information to the server and keep taking screenshots using windows or mac snipping tool. My product designer is similar to this one: http://fancyproductdesigner.com/woocommerce/ – Hammad Feb 18 '16 at 07:32
  • 1
    @Hammad: You write the server so that it *always* includes the watermark. Doesn't matter what information the user manipulates the browser into sending it. Bottom line is if you do the rendering on the client, you cannot prevent people circumventing the watermark. If you do it on the server as an image, you *can*, and then to "steal" it they have to do pixel-level image editing (make sure the watermark is translucent, that's particularly hard to edit out). – T.J. Crowder Feb 18 '16 at 07:44
  • Yes I got your point.I can't have control what is done by the user on client side. Thank you very much for your insight. – Hammad Feb 18 '16 at 07:45
1

Check this answer. Basically put, you cannot prevent the user from taking a screenshot with an outside application from within the browser.

In order to accomplish what you need, you will have to intentionally worsen the preview for non-premium users: make the whole thing low-quality or add artefacts to design elements that make it pretty much unusable in production.

Basically, make the preview functionality enough to design a mock-up for the product but not enough to put the image into production.

Community
  • 1
  • 1
Alex Kirko
  • 446
  • 3
  • 8
  • Thank you. I can garble the print preview but user can take screenshot using windows snipping tool – Hammad Feb 18 '16 at 07:29
0

No you can't. You need to apply the watermark programmatically before preview.

Khalid T.
  • 10,039
  • 5
  • 45
  • 53
  • What do you mean by programmatically? Even if I apply it from server side code still it would be rendered on frontend as background property of div which user can remove – Hammad Feb 18 '16 at 07:25
  • You need to generate a new image that has the watermark (no CSS). – Khalid T. Feb 18 '16 at 07:27
  • The whole thing is not the image rather its HTML so any watermark on that can be removed. Product designer is similar to this one: http://codecanyon.net/item/fancy-product-designer-woocommerce-plugin/6318393 – Hammad Feb 18 '16 at 07:28
0

Css can be modified from browser and there is no way to have immutable css. What you can do is that, you can put watermark in the pdf or image while generating it. This way there will be no escape.

Update

Put an image in the background. so if the user tries to remove watermark, he removes the whole background, without which the thing he designed is useless, plus you can put a small script which observe the img tag. if the img is removed or source is changed, you can reload or stop it in whatever way you want.

Harry Bomrah
  • 1,658
  • 1
  • 11
  • 14
  • Actually there is the catch in the middle. What if user don't hit the save button and after designing whole page they take screenshot using some snipping tool – Hammad Feb 18 '16 at 07:34
  • I suggest you put watermark in the template in the first hand. So if user didnt pay then he can only design his stuff on a water marked template. if he has paid he can design on plane template. – Harry Bomrah Feb 18 '16 at 07:37
  • This is exactly what I am doing. But user can remove the watermark by editing the source html – Hammad Feb 18 '16 at 07:38
  • Put an image in the background. so if the user tries to remove watermark, he removes the whole background, without which the thing he designed is useless, plus you can put a small script which observe the `img` tag. if the img is removed or source is changed, you can reload or stop it in whatever way you want. – Harry Bomrah Feb 18 '16 at 07:41
  • o that is great. I can set up listener on that watermark div, if that changes I can garble the whole page or reload it. Thanks a lot for your suggestion. Not 100% perfect but still quite good solution. Please add this in your answer, so that I can accept your answer. Thanks again – Hammad Feb 18 '16 at 07:44
  • Done, glad I could help. – Harry Bomrah Feb 18 '16 at 07:46
  • Just for your reference https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver – Harry Bomrah Feb 18 '16 at 07:52
  • Thanks for that as well – Hammad Feb 18 '16 at 07:54