If you are planning to downvote me to oblivion, let me clarify what this question is about:

  1. I am not interested to prevent someone from copying my website. I know there are no foolproof method.
  2. My goal here is to merely make it more difficult for non-technical users who are ripping my site via right-click save-as on their browser.

I have tried out JSCrambler and it seems like their ability to obfuscate javascript files are pretty good. They even have domain locking which renders an obfuscated js file useless on a domain not specified at the time of compilation. The technology is pretty solid.

So that brings up another question:

Will it be possible to protect your CSS?

I thought about creating a <style> element via javascript and appending it to the document. On Chrome, saving this as a complete page will result in a page with the said <style> element included in the html itself.

This is where I am out of ideas. Is it possible to have a way of styling your elements through javascript that will not be saved by the browser?


Let me clarify what the exact use case is:

I run an affiliate marketing website specializing in advertising for Amazon products. There is someone on the internet, Joe, who is visiting my site and right click saving it to run as his own. Joe does not know CSS or Javascript, and he is lazy. He is not willing to spend more than a few minutes trying to figure out how to rip my website - this means that he will not bother to screenshot it and reconstruct it from scratch as it is too troublesome for him. Disabling right click save-as doesn't work anymore as a simple google search will reveal a solution available on the menu.

All I need is enough disincentive to discourage Joe from ripping my site. There are other affiliate websites he can rip. He is not interested to spend a long time trying to rip mine if there are alternative available. If Joe has to learn CURL from a command line to download my page, it is probably enough incentive to discourage him.

Right now, my affiliate website utilizes no javascript as it's purely html and css.

  • I'm sorry but that question still makes no sense. If you're only targeting people unable to do anything outside the simple UI provided by their browser, just disable right-click. For anyone else, you're wasting you time. – Stephane Mar 10 '17 at 15:11
  • @Stephane They are savvy enough to go to menu -> save as. I've tried disabling right click and I saw my page stolen. – Tinker Mar 10 '17 at 15:14
  • 1
    Again, it's wasting time. You'd need to enumerate everything you assume they are able to do and disable it independently to even start a proper analysis. On the other hand, there is an infinite number of way for users to bypass your "protection": printing to a PDF file, screenshotting the page, heck, taking a picture of the screen with a mobile phone. Don't waste your time on counter-measures that are trivial to bypass by anyone with a bit of imagination. – Stephane Mar 10 '17 at 15:16
  • I think this question is to unclear. You claim that you fear that a non-technical user can "rip" your site but I don't see a problem with that because a non-technical user has no use for this "ripped" version. A non-technical user instead probably just wants to print a specific page on your site or save it as PDF or just save it as document to read it later. A non-technical user would not understand what all this means when looking at the source code of the page even if it is not obfuscated. For me it instead looks more like you want to make it harder to copy a site for technical users. – Steffen Ullrich Mar 10 '17 at 15:41
  • 1
    Apart from that you could just use Javascript to apply CSS dynamically to your document in which case you can use the techniques of JS obfuscation you've already mentioned. – Steffen Ullrich Mar 10 '17 at 15:43

You could do this a few ways, here's some I'd suggest:

Use a CSS Obfuscator

This won't prevent people from stealing your css, but it will make working on it difficult.

Build with JavaScript (& obfuscate)

It's true that styles applied via element.style are added to the html and could be copied, but tools like element.appendChild could be a little trickier to copy.

Build a SPA

By creating your page as a single-page app (SPA) using Vue.js, React, Angular & compiling it before you deploy you can make it much more difficult to dig through your source-code because such web-pages are often loaded from an html-file which is empty except for a single script tag.

This will help, but it's not strong. You can detect the type of app running, then find tools to debug it with.

Use keys & control access

Give the users who can access the applications tokens. Randomize part of the request to css with a key and decipher it on the other side based on the tokens being valid. This secures against random attacks and (hopefully) limits derivations of your product to a source which has signed a contract.

Give Up

It's a big world. And you probably wouldn't have any idea how to code without code to learn from. Our society seems to be leaning towards favoring creatives who give back. So it's not even the best time to profiteer. Consider giving the project back & banking off the residuals. Also be aware that software doesn't last forever. If you're continually iterating on the work, the copies can be backtraced.

| improve this answer | |
  • 1
    Not to nitpick, but I believe "an" is grammatically correct because the pronunciation of the acronym begins with a vowel (/ɛs/). – forest Mar 23 '18 at 5:49

CSS obfuscation is mostly nonsense. It's machine readable no matter what you do, and the obfuscated styles are as stealable as the original.

If you really want to protect your styling (which I don't think is necessary, but it's your site), you're going to need to do your styling in Javascript (which is a bit of a chore).

Once your JS is finished, make the javascript unreadable with an obfuscator. (Jscrambler is premium, and the non premium options are going to be just as good in your case).

IMHO what you should do is leave off the javascript styling and simply position a few major page elements using javascript (or make them visible from a CSS display:none) and then domain-lock that js file.

| improve this answer | |
  • When promoting your own projects, it is important to disclose your relationship so that readers understand your bias. – schroeder Sep 23 '19 at 12:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.