Restrict access to a webpage with jQuery
Is there a way to restrict access to a specific webpage such as http://www.example.com/subpage with jQuery?
I know there are many other feasible ways to accomplish that via PHP and .htaccess
but in our case, we don't have access to the .htaccess
file. However jQuery is installed.
I was thinking to try to read 开发者_如何学Gothe window.location.href
and add a hash to the URL. But I am not sure if this can be exposed if a user view the source code of the page in question.
I implemented Felix Kling's idea and wrote a node.js script to automate the process. Basically it takes your (original) HTML page and a password as input, and generates an HTML page that embeds an encrypted copy of the original one. When you browse to this generated HTML page, it prompts you for a password to unlock it.
This is just a proof of concept, so there's a lot you would have to do to make this production-ready. You'd definitely want some friendly error messages if you put in the wrong password, for example. And it would probably be really irritating to enter the password every time you move between pages on the site, so you might consider saving the password in a cookie or passing it along in the URL every time. Also, as currently designed you can only have one password that everyone shares. This is a solvable problem, just re-encrypt the main key once for each unique username/password pair and put all that data right in the web page.
Anyway, here's a demo (the password is "ItWorks"). I put the code for the tool on GitHub.
There are lots of reasons why this approach is not particularly secure, but if you really cared about security you'd pony up for web hosting with .htaccess and script support, right? :)
Restricting access on the client side is risky and there are probably many ways to get around it. You may not have access with .htaccess, but can't you use php?
No warranty for this idea:
You need to use javascript to load the parts of the page you would not otherwise display via ajax. If you don't, the parts of the page you want to prevent the user from seeing can easily be seen if they disable javascript. You can of course do that ajax load conditionally based on whatever data the page needs to have to signal that the user is authentic, but this can be spoofed very easily. At this point, you have to talk to the server anyway, so why not just restrict access there?
If you're only worried about keeping dumb (i.e. non-developer) users out the above will probably work.
From my comment:
You could load parts of the page with Ajax, as @tandu suggests it, but store them encrypted on the server.
On the client side, let the user type in the password and use a JavaScript implementation of the crypto algorithm you used to decrypt the received data. Just make sure you use some well tested implementation and don't create one on your own!
This also might not be perfectly secure, but there are two advantages:
- The password is not contained in the source code (plain or obscured).
- Direct access the parts loaded via Ajax don't reveal any information (they are encrypted).
The disadvantages are:
- There is some pre-processing involved, to encrypt the pages (parts) (which could be automated, see @Joe Cheng's comment to your question).
- Client has to perform decryption (which might have impact on the performance).
In addition, you have to determine whether the decryption was successful or not.
Short answer: No, you can't.
Slightly longer answer: All your javascript is sent to the user, to see. You can't hide any of your source code from them. With PHP/htaccess, all of your source code is hidden, so they can't tell how you process the data.
Since lots of people are already saying no. I might as well post this answer using PHP.
If those files are only meant to be included, then you can use define()
in your including file. You included files will then check for the defined constant and exit immediately if not found. This way, you can be sure that the rest of the code will only be interpreted within an include.
If we are simply talking about user access levels (i.e. these files may be called via HTTP but restricted within users, then you have to use sessions
for that and set the appropriate access level for the user which every page will check and act accordingly
To do this in JavaScript (with a bit of jQuery as you mentioned that you're using it), you can simply check the value of a password
input whenever you need to, and compare it with a predefined password.
Disclaimer I would never, ever recommend this. I'm only even posting an answer because you've specifically said that it doesn't matter if users can see the source.
Having said that, assume some HTML as follows:
<input type="password" id="pass">
<input type="button" id="b" value="Login">
<span id="err"></span>
You can use some JS similar to this:
$("#b").click(function() {
var password = "password";
if($("#pass").val() !== password) {
$("#err").text("Incorrect password");
}
else {
$("#err").text("Password correct! Do whatever you need to do here.");
}
});
See it in action here (also notice how easy it is to see the password!).
精彩评论