Password Protect HTML5 Offline Application Directory - javascript

I have an HTML5 app which is capable of running offline. However, I need to password protect the directory this app resides in to only allow access to authorized users. Initially I was using a PHP login page which set a cookie (outside of the app directory) then redirected to the app directory. The app (JavaScript) checks for the cookie and if it's there it lets the user run the app. If not, it redirects them back out of the app directory.
The problem with this method is that all of the files in the directory are still accessible if referenced directly (which I don't want). I do not want users to have to authenticate every time they hit the directory (it's a one-time authentication process; the cookie is there so that they never have to type their username/password again), and I also want to have a stylized login form (i.e. not using the default browser login box for http authentication).
Finally, because this is an offline HTML5 app, I can't include any PHP code in the app itself.
Any suggestions?

That doesn't sound like something you could do from Javascript. The script would need access to the file system to be able to restrict access to the folder, wouldn't it?
Unless this feature is exposed by the browser via a javascript API, I don't think it will be possible. It sounds like it would be a useful feature though.
Perhaps you could encrypt vital data, but apart from slowing down the application, I'm not sure what good it would do, since all the necessary keys would have to be stored locally as well...
Since the general rule of security on the web is that you can never ever rely on anything that happens client-side (e.g. in Javascript) without a double check on the server-side, this will of course pose a problem when the app is running offline and the server-side is not available :(
Looking at the "make Javascript redirect if the cookie exists" problem, unless I'm mistaken, it would be trivial for a malicious user to edit the Javascript, using for example Firebug, to redirect in any case.
EDIT: By the way, what level of security are you looking for? The "mom won't be able to accidentally access my account"-level (which it sounds like you already achieved), or the "no one, except maybe the NSA, should be able to hack it"-level?

Related

What are the ways to protect javascript code

Is there any way to prevent a web app from being stored and operated from local file system.
The app has proprietary front end work-space, built with JS & many other libraries, which must be available for usage only if the user is logged in over the domain with active internet.
If any user attempt to save the page and relevant files to local file system and try opening the workspace, it must be prevented.
Is there any possibility to achieve this
If someone really wants to look at the code that's being run, there's no way to prevent it, because it's running on their machine, and they can do anything they want with their machine, including examining network requests (such as from their browser, or from their OS).
If there is information that the client should not be able to access under any circumstances, the only solution is to not send that information to the client in the first place.
Now, there are methods to check whether a script is being run from a webpage or a file, eg:
if (window.location.href.startsWith('file:')) {
throw new Error();
}
But the user may still examine the script and tamper with it if they desire.

support to login with javascript or

I am developing a web application using Facelets and Entity-Controller-EJB structure. In the application, there are contents which are reachable only if you are logged. A bean checks the login state every time you click on a button/link for the restricted contents, and redirects you either to the selected page or to the login page.
I thought that this way is not safe, as you can write the link directly in the browser instead of generating it from a button that checks the bean. So what should I do? Is there a render option embeddable in each page or should I write a javascript function? In this case, what should I do? I have studied js fundamentals but don't really know how to implement this control!
Thank you for reading!
You cannot rely only on frontend to deny access to some parts of a web application.
This because all the HTML/CSS/Javascript is downloaded on users' browser, so they can read your code and your authentication mechanism, and understand how to bypass it (or just disable it).
More on this: Why are browsers allowed to display client-side source code?
What you need is implementing some security mechanism in the backed.
The simplest one is to delegate this to your webserver (here the instructions for Apache) and then use something similar to this to do login.
Another way is to have a proper backend: you send data to it (email/password) and it provides you a token that you use to access protected resources.
Or also, dinamically create your documents on server side, only if the user is authenticated.

assets pipeline behind login

I have developed a rails app that currently uses a lot of javascript.
Most of this javascript is code that I have generated myself, and is generally only used in a few places (all by authenticated users).
Basically, what I would like to do, is to be able to only allow a user access these js files if they are logged in and authorized (I use devise and cancan for authentication and authorization).
I would still like the files to be precompiled (concatenated and minimised) the same as the asset pipeline does, but these files should then be stored somewhere not accessible to the public, and served by rails (or similar) only when the user is authorized to access them.
I have tried and failed searching, but feel I must be missing something simple as this is surly common practice in a lot of rails apps.
Therefore, I was hoping to get some help finding information on this matter as I'm at a loss of what I can do other than compiling the js file manually and adding this to a view the user is authorized to access.
Any help would be appreciated!
Edit:
To Clarify what I'm asking:
I want to try to find something similar to the asset pipeline that will concatenated and minimize the js files as normal.
Then, when the user tries to access this js file:
1. If the user is logged in, the js file is served to the user as normal.
2. If the user is not logged in, the user is given a error message (or a 401 not authorized, or 404 not found, or similar), meaning a unauthorized user cannot access the script.
Basically, something similar as what happens when you try to access a json file you arn't entitled to view.
you could simply use different layouts for the logged-in users or render a partial, that includes your precompiled javascript.
e.g. in application.html.haml
- if current_user.
= javascript_include_tag "your_special_user_js"
I don't know, if this answers your question, but it was my understanding, that you are trying to achieve this behaviour.

Is it possible to Invalidate the .manifest Cache with Javascript?

The Webapplication we're currently building is using a .manifest file to make it available offline. In the top right of the application we display the username. All other context is requested through ajax.
Now the problem is that when the user log's out and a different one logs in the username field stays the same because the browser cached that page already.
So my question is: Is it possible to invalidate the manifest file upon logout with javascript?
I am aware that we could fill the username field through ajax too.
Thanks for your help
As much as I don't know a programmatically way to do it, a great common pattern for web apps is to use app cache for the resources that are common to all users and use other storage mechanisms (localStorage, indexedDB, etc) for specific user data.

How can I automatically answer a password prompt from an embedded item in an (X)HTML page?

I wrote a web page that displays images from several servers on my network via simple img tags with appropriate href values. The servers require authentication before they will send the images.
It works alright, except on first load the page presents the user with a series of password prompts (one for each server). The user can select the "Remember my password" checkbox, and then subsequent refreshes of the page work without prompting, with correctly updated images. That is, until someone closes out the browser, after which a new set of prompts awaits anyone who opens the page again.
All of the credentials needed are known beforehand, and I don't care if someone could read them in the page source, since this page is in a protected part of an internal intranet site. Everyone with access to this page knows the passwords anyway.
The only browser we're allowed to use is IE 7, so I don't care about compatibility with other browsers at the moment.
Is there any way I can use JavaScript (or some other client-side code) to automatically answer those prompts so the user never sees them?
Thanks very much, in advance.
You can include the authentication in the URL:
<img src="http://paulfisher:tastybacon#internalwebs/path/to/image.png">
Where, of course, paulfisher is my username and my password is tastybacon.
No, javascript can't do this. Here are a couple of options that I've used before to solve this problem:
Change the authentication on the other servers to be either anonymous or integrated.
Proxy in the images: On the server serving the page, add another page that takes in the URL of the remote server. This new page makes a webrequest to the other server and streams the image back. The webrequest can plug in the correct credentials.
Depending on the servers' DNS names, it might be possible to share an authentication cookie across all of the servers. Then you could set up some kind of module on all of the servers to allow the shared authentication.

Categories

Resources