CODEWITHSUNDEEP
javascripthtmlcss
Hammad
Hammad

Reputation: 2137

Is there a way to have immutable css property?

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

Upvotes: 0

Views: 1286

Answers (4)

Harry Bomrah
Harry Bomrah

Reputation: 1668

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.

Upvotes: 0

Alex Kirko
Alex Kirko

Reputation: 466

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.

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1075149

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.)

Upvotes: 3

Khalid T.
Khalid T.

Reputation: 10567

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

Upvotes: 0

Related Questions