Is there a way to have immutable css property? - javascript

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

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

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.

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.

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

Related

Prevent the creation of certain tags in TinyMCE on the server and user side

I'm using TinyMCE plug in to create a text editor. The thing is, I want my users to control the positioning, weight, and list/no list of their document, but not font, font-color, or font-size. I'm looking for a TinyMCE property which will stop the program from adding those tags to the css. Also, I need to implement this on the server side. I'm using django, so is there any function that will do that as well?
One may specify exactly which HTML tags and related attributes are allowed using 'valid_elements' configuration setting:
http://www.tinymce.com/wiki.php/Configuration:valid_elements
I believe that as long as you don't provide the buttons for font-related stuff (using the theme_advanced_buttons_1/2/3 parameters), and also don't give them the HTML button, the users won't be able to change fonts/color/etc.
But if they were to paste in some text created elsewhere, which happens to be HTML, they might still do it. To get rid of that, you'd probably have to filter what the server receives - I have no insight into any ready-made way to do that.

how to hide text in html page source?

I wanna show some text (and images) in browser but this text shouldn't be able to select in page preview or page source :
At first i tried to use canvas, but managing text and also images in canvas is not easy and for this case i can't use canvas.
I tried to use image but in this case, image is too slow to load.
I used ROT13 encryption in Aptana studio, but ROT13 just encrypt page source with JS and when you click on 'inspect element' in chrome or opera you can see decrypt text and html yet.
Question: Is there any way in jquery or anything else?
No, whatever you display as text in webpage can be found by digging into the source of the webpage (including js). What would this be useful for btw.?
Edit: This looks useful but ends up using canvas or flash I believe. Still might be tuned to be fairly fast and therefor useful:
http://eric-blue.com/2010/01/03/how-to-create-your-own-personal-document-viewer-like-scribd-or-google-books/
You most likely won't find a way to do this easily, as when the browser downloads the page, in order to show the text to the user it has to be decoded or decrypted. So no matter what, if the user can see it, they can copy it. If all you want is to block selection in the browser, this answer should help
No, if you want to place something on the page a browser need to know what you want to place on the page. And everything what was sent to the browser is readable for a user. So you cannot do this.
The answer is very simple: If you don't want to publish something don't place it on the internet.
yes, this my logic check out
make you string in ascii code and write on document
check below link and find example may you help
Link W3School
I guess no one could do that.
Just use some image instead, old-style, but useful.

hide html page source

Is there is any way to hide asp.net page view source?
If you mean, can you hide your ASP.NET code: it's not visible in View Source.
If you mean can you hide your HTML: you can discourage casual peeking by creating your HTML on the fly via Javascript or AJAX, but a developer will always be able to see what you are doing, using simple tools like Firebug and Fiddler.
Edited to add:
I wasn't thinking of obfuscation (though that also discourages casual peeking), I was thinking of using javascript to pull down HTML. Doing a View Source will only show a bunch of <SCRIPT> tags.
But it appears his question has been revised to go in a different direction anyway, to can I keep people from downloading my images, and the answer to that is a simple no. Making money from small numbers of images is not a viable business model. (If you have thousands of images, that's another story.)
Edited to add:
The conventional way of making a catalog of photographs is to [a] show low-resolution previews, [b] put a watermark on each image (here's an example), or both.
Are you talking about ASP.NET or the result? Since ASP.NET is server-sided, it simply returns HTML. Basically, your ASP.NET file is processed by the server and variables and functions are converted into HTML. Your users can view the HTML but not the ASP.NET as it resides on server.
No, there is no way to hide the html source of a page. It's just not possible. There are tools that will promise the ability to do this, but don't believe them. Consider that it might not even be a traditional web browser that downloads the html.
What you can do is obfuscate it a bit, but even that is trivial to reverse.
No, you can't hide HTML, and there's no point either. There's nothing of value in the HTML. It would take maybe a couple hours for a skilled developer to replicate the look and feel of a website without even glancing at the HTML. In fact, it would probably be easier for him to do it his way.
The ASP/code-behind, however, already isn't visible. It's processed on the server and outputs HTML. Only the HTML (and CSS etc.) makes it to the client.
Reading the comments, it appears you want to prevent users from downloading your images. You can't really do that either. You can make it a lot more difficult for users to download them by embedding the images in Flash, or a Java applet, or something like that, but a determined thief could still decompile it and nab your image. Easier yet, he could just take a screenshot and save it out.
The best you can do is restrict access to the image to only certain users by making the image source point to a script instead that runs some validation before outputting the image.
This is not true you can hide source code. One way would be to write a loop that puts a 100k /n in the source code at the top. So it will push it so far down with white space that you can see it :-)
Where there is a problem there is a way.
And for all those who dont like this. Amazon used to hide there code somehow until sometime back.

Javascript context menu for images

I have a website where lots of people copy images off it, which is fine. What I do want to do, however, is help them embed it on the target website they are going to.
Ideally this would take the form where when a user right clicks the image a context menu will appear giving them easy options to embed or share the image.
What is the best way to do this?
P.s. I don't care about them hotlinking, or saving the images at all, all I want to do is provide the user with an easier way to share the images!
Don't send the image to their browser.
No. You can prevent the common user from bothering, but the fact is the URL is sent to the browser to download. So at the very least I could view the source and figure it out.
If you really want to try to annoy the user, though, you can attach an oncontextmenu event which will capture the right-click in some browsers.
edit:
In response to your comment..
Since you're using jQuery, you can use this plugin to detect right clicks. It has been tested on most browsers.
You can then use something like SimpleModal to display the modal box you want to show the user..
$('img').rightClick(function (e) {
$.modal(...);
});
You can actually render HTML as embedded mime data in all major browsers except for IE:
http://jimbojw.com/wiki/index.php?title=Data_URIs_and_Inline_Images
Another weird, but workable solution is to convert the image to CSS:
http://elliottback.com/wp/convert-image-to-css/
Neither is really that great a solution, but it highlights the fact that you need to be willing to lose an image by just putting on the web.
Even if you use a plug-in, people can just do a screen capture.

image protection in rails

I am looking for ways to protect my product images and I don't know if there's anything out there better than what I've already found: disable right click, use a transparent image in front of your picture and watermarking. Obviously none of them is perfect but I was curious if someone came up with a better solution to this problem.
Also is there any rails plugin to aid with that ?
Thanks
I really, really hate blocking right mouse click. It reminds me nineties when on right mouse click you get message that coping of this site is forbidden ;).
You can't protect your picture. For me the best way is just to put some copyright information and that's all.
There is no way you can do that at all, that is just smoke.
When you uses images in your website, they are downloaded to the client and they can be found in the cache, even if you try to block the user from right clicking and saving it.
They can even look at your html/css/javascript find the location for your picture and put that in their address bar.
You can't stop people from pinching images on the internet, so don't waste your time trying. Instead use a combination of strongly worded copyright messages underneath the image, and only store low-resolution files on the server.
For a photography site I've built in Rails, I have Paperclip trash the original high-resolution photo after it has generated a selection of smaller thumbnails. Combine it with a watermark in a corner of the image and you should have enough to make it a pain to steal a high-quality image, while not inconveniencing users.
Frankly, if I was to visit your website and you'd disabled right-click, I'd be gone in a matter of seconds.
I was looking for something similar, but for random images. I have not found anything so I thought I'd contribute here.
My last solution, using signatures, is something that could be applied here, though with some modification which I have also included at the bottom.
We should differentiate between (at least) two things:
A. Prevent someone saving images from within their browser.
B. Prevent someone writing a script to rip all of your images automatically.
Solutions:
A.
Pretty much impossible and also not what you want. Imagine a website that hassles you when you try to use your browser the way it was meant to be used. Right you'd be unhappy. There are perfectly legitimate reasons for someone to want to save an image, the most basic and flattering one would be to use it as a wallpaper on their computer or phone.
The best solution would be to include a watermark. That way people are reminded of where the images are from and they can still use them for private things.
I think this general rule applies on the internet: if you don't want it to spread outside of your control and you receiving credit: don't put it online.
B.
This is a less nice scenario. The most basic thing I've once done to make ripping images somewhat harder is to a. use unpredictable urls to images and b. create a script on your server that when called will fetch an image from your file system and then output this image. For example: http://example.com/some_image.php The code is really simple:
<?php
$name = './img/ok.png';
$fp = fopen($name, 'rb');
header("Content-Type: image/png");
header("Content-Length: " . filesize($name));
fpassthru($fp);
Source: SO answer on the topic
So what I have done once is I created a script like above, but added a timing option in there so that calling it (from the same session) twice within lets say 10 seconds would return the same image. This way an automated script could only go as fast as 1 image every 10 seconds. Additionally you could make the url contain some sort of timestamp hash:
http://example.com/some_image_$(md5(Time.now + "secret")_Time.now).png so for example:
`http://example.com/some_image_aihfio1n...oi12nof_1396723820.png
What you'd do to check if fetching the image is allowed is:
You take the requested file name, strip off 'some_image' and then the md5 hash. You then check if the given time ('1396723820') is within now and 10 minutes (allow for fluctuation). Then check if the hash is correct for that timestamp + 'secret'.
You can see this as a signature that is sometimes used in digital communication, although very basic and not very strong or anything.
Using this method for your production images could be something like this:
http://example.com/some_image$(md5($image_id, "secret",$timestamp))_$image_id_$timestamp.png
$image_id here is some sort of static identifier for your image (file_name, id of the product in your db, etc).
Please anyone, correct me if my assumption that this makes it harder to predict file paths is incorrect. In the end, the first rule to creating encryption patterns is "don't do it". So is the second. But this is a fairly innocent one to play around with.
have a look on how commercial image suppliers (like iStockphoto.com) protect their images that and see if that fits your need.

Categories