I'm building a Single Page Application, read that login page should not be on the same page. Should I have login as a separate html page, or can I have login also in the same page.
If I have login as a different page, depending on the first page that I load should have to redirect to the other in client side.
ie suppose I load the SPA first, and if the user is not logged in, I've to redirect to login page in client side. and suppose I load the login page first, and the user is already logged in, I've to redirect to SPA in client side.
What is the general solution for this problem?
I'd put login and verification in a separate page and then use ajax to make the calls.
User access index-file.
Index-file makes checks with server-side page to see if user is logged in or not.
Page displays content depending on if the json answer from the server-side page was true or false.
Then I'd do the same for logging in.
User provides login information
Checks with server-side file through ajax and json.
Page refreshes if succesful or throws error response if it's not.
The bottom line to my answer is that when creating single-page applications, ajax is the way to go. However, since you havent provided what language you're using, i'm unable to give you a more detailed answer.
Client side single page handling logins and content selection however is very bad practice and should be avoided all-together because of their lack of security (I cant stress this enough) since all elements will be available even to anonymous access and DOM manipulation will enable an unauthorized user to access restricted content. You'll have to use ajax to do backend serverside authorizations - as mentioned, as well as serverside code on the SPA that present different content depending on your authorization status.
The scenario you describe need to have server-side code for selecting what content to present and client-side code together with ajax for implementing features on the SPA.
What you CAN do however, is to - when for example pushing the login button - calling another file with ajax, remove the content of the wrapper div and append the ajax response to that div. Then you'll avoid client side redirections all together.
Related
I am a beginner in web development.
I create a project only in HTML, CSS, and Javascript.
My task is to create the login page and main page, but the user can access the main page only when he is logged.
In the backend are database connector scrip, a login script, and script which checking user is logged.
Before the user opens the main page script creates a request and gets a response from the script in this format:
{
"logged": true,
"uid": 123456
}
I parse JSON and if logged is false I redirect to the login page using window.location.replace().
Is this approach prevent from open the main page when the user is not logged?
I am asking because clients can modify Javascript files in a web browser.
I know that it is easier to create this in PHP using the location header and it can't be modified by the client, but I can't make it in this way.
I am asking because clients can modify Javascript files in a web browser.
Not really. But yes, a check such as what you describe is easily circumvented client-side.
The rule is this: Anything that should not be visible to the user if they aren't authorized and authenticated must not be sent to the client at all unless that authentication has been provided. So the request for the "main page" from the server must be allowed or disallowed by the server, and served non-cacheable.
Usually the page itself isn't all that protected, but the information you show on the page is. E.g., the page is the scaffold and layout and such, but the protected information it shows is provided using ajax or similar, and only when the user has been authenticated.
This is a bit old school (web forms). My Asp.Net site uses FormsAuthentication for security with the typical settings for forms authentication in web.config. This works well. User logs in and is authenticated via back-end logic in business layer. So, now I have created a "back door" login technique using a simple form that posts user/pass via jquery ajax to the exact same back end logic code.
In both login scenarios, cookies are created, and in fact, comparing the two shows them to be identical. But, my problem: I log in via the jquery ajax, then when I go to my forms authentication protected page, I am redirected to the "log in page" as defined in web.config. If I reverse the situation and log in via the formsauthentication WebForm, then I AM successfully recognized as "logged in" at the jQuery ajax form.
I've tried so many things I am now confused. Path, domain, HttpOnly, Secure, etc.
I don't have code to show, but can if needed. I'm hoping this problem description might just ring a bell in someone's head.
I´m trying to build a pure JavaScript app, This app does call to an API, and that API return a token which I will save in a cookie (any advice about it?).
I have many doubts, the most important are the following,
How should I make the redirect stuff between pages, and how I prevent that someone access to my page, I want to do something like if there is not cookie (token) and the token is invalid (I will check the token before show the page), redirect to login, if is all correct, show the home page for example
Since you have your token in a cookie you should start page load with an API call that verifies session. If API returns false simply redirect user to login page, otherwise execute rest of your javascript. I assume your sensitive data will come from subsequent API calls that should also verify the token.
You probably understand that you can't protect the static content using this method since anyone can add breakpoints on browsers and modify the JS code to their preferences (as in remove the forced redirect), so your focus should be on loading everything you want to be hidden through ajax API calls that are secured with token.
I have a forummotion site. I want to show a popup if user is logged in. Is there easy and reliable way to check whether user is logged in or not using JS/jQuery. I have a idea but it is not reliable and i think it cannot be implemented. The idea is:
Send AJAX request to /profile it will be redirected to index page if
user is not logged in otherwise existence of any element which is
usually present on /profile page would indicate the user is logged in.
This depends entirely on the framework you use. There are official ways to do it, and there are hacks.
The official way is to use the Framework's API. This API may be available on the front-end for JS, back-end for the server, or even both. Check your framework's documentation for details. If none exists for the front-end but back-end API exists, then you can build code to expose such functionality.
If your platform does not expose an API at all, then you can go with hacks.
One way is to check for the availability of a userid on the page. Take for example, the old Friendster which was heavily XSS'ed by widgets and templates. Widgets checked if the user was logged in or not by requesting the profile page via AJAX and checked if a userid global variable exists and has a value. Same goes for the Joomla 1.0 and 1.5, although this was on the back-end.
Another way is to AJAX request a known page that should be inaccessible to users that are not logged in. These pages usually return a 403 Forbidden when the user is not logged in. This status number can be checked using AJAX.
I am trying to implement form authentication in my ajax application.
The problem I have is that when the session expires I get 302 code which redirects me to a login page I specified in web.xml (and it messes everything up refreshing the whole app to login page).
What I want to do is to get a "not authenticated" (401) code, then display the login form in a popup window and when the login is successful continue with what I was doing.
here is a picture of what is going on:
and the docs
http://docs.oracle.com/javaee/1.4/tutorial/doc/Security5.html
basically, I want to display the popup instead of redirect to login page and then don't do the redirect to the resource but do my update in AJAX way.
From what I understand it couldn't be done only on the client side since the redirect can't be avoided (see here: redirect info), I would need to write some kind of logic on the server to prevent redirect, see here for detail about doing it in IIS: IIS implementation
P.S. So far this: http://www.oracle.com/technetwork/articles/entarch/session-lifecycle-096133.html looks like the most promising way to implement it. The class is deprecated, but I can't find the new one and think it's the only way to do it for Weblogic.
This is not an easy way but still it works
You have a form in your page which is filled by the user.
User clicks submit button.
An ajax request is sent to the server.
The server side implementation can check whether session exists or not. and accordingly you can send a response code 401..(response.setStatus());
This 401 can be checked in client side using ajax --- xhr.status
If response is 401 you can show the login form and hide the current form. using js and css.
User fills in the login details and clicks submit..
You can do the same server side check and client side check for the status of that login request.
if login is successful then you can you can submit the first form using ajax or js..
You may need to use servlet authentication filters as described in weblogic.xml Deployment Descriptor Elements
Below tutorials may help you:
oracle Servlet Authentication Filters
Using servlet filters for user authentication
Writing Servlet Filters
You could use a heartbeat checking with an ajax request to your server to any resource that needs to be authenticated to get it.. if you cannot receive this resource so means that youre not logged in.. so you could send another authentication request an go on with your rendering..
see this article.. http://ajaxpatterns.org/archive/Heartbeat.php
so your checking routine of authentication would be implemented..
You need to push to page and not poll. So you need Strophe and your session handler connected. When session expires signal is sent to Strophe instance that is running in your web app and after that it is easy to do popup or whatever.
For all real time stuff I am using Strophe!
This is book on this metter and this is link for Strophe, also this is link of php xmpp class.
It will take you couple of days to figure out this but it is couple of days well spent!
If you read carefully book and go to examples, with just basic javascript/jquery understanding you will be able to develop powerful web apps.
I know you're trying to do FORM authentication with you ajax application but is it really needed?
BASIC authentication works simpler and transparently for ajax requests as it is handled by the browser, not by your app. But I admit/understand that a popup is ugly.