How to Protect CSS Files

How to prevent user to access css files and images via the url

Please following rules at the top of your htaccess rules file. You need not to create 3 separate rules for 3 conditions, you can use regex here and can do a 401 redirect for all of 3 strings(js/images/css) in a single rule itself.

Make sure to clear your browser cache before testing your URLs.

RewriteEngine ON
RewriteRule ^frontend/assets/(?:images|css|js) - [R=401,NC,L]

How to secure css and js files means end user could not download our css and js file?

For javascript I would suggest you to use Base62 encoding.
This will also reduce the size and thus boost the performance since there will be less loading time

You can do base 62 encoding here

Other than that you cannot host your javascript file into an non downloadable form!!
Same goes with CSS too.
Once someone enters the full link the css/js files will be shown. All the files be available in the clien machine!!

To put up a plain straight answer to your question, the answer is NO

How can I protect my application code?

This question has been answered before: How can I obfuscate (protect) JavaScript?

But anyway, here's my take on the question:

You don't need to protect your HTML/CSS code, unless that aspect of the app is what is so proprietary. If that is so, obfuscate your code (there are many websites online that will do this for you).

From the information you gave me, I can infer that it's not the styling or the UI you want to protect, it's the application's logic. In that case, you can obfuscate and then minify the JS code such that it's very hard to deconstruct (although some web browsers do pretty-print the code). To see an example of this, go to Google, open the dev tools, and look at any JS file under the Sources.

I also saw another interpretation to your question. If you meant "to protect the application from being downloaded and then reuploaded", that sadly isn't possible with web apps (unless you explicitly check the domain that the app is running on and restrict the app from running on domains other than yours).

An implementation of the domain-protection would look something like this:

if (window.location.hostname !== "yourwebsite.com") {
   alert("Invalid domain, redirecting to official app...");
   document.location = "http://www.yourwebsite.com/app/";
}

After adding this protection, you can stop it from being removed by minifying and obfuscating the JS code.

using import url will it protect my css code

There is no way to hide CSS from your users.

---

Related Topics