6

I am working on Java application . Front end would be Angular2 .

If I try to open my application home page( index.html is configured in web.xml as default page ) . Access URL should be http://localhost:8080/MyWebApp .

Then I have taken into an standard organization's login page for authentication. If authentication succes , HTTP Authorization token will be set in the request header and finally control comes to display my application home page.

If I use jsp, I can get request header as,

String authHeader = request.getHeader("authorization");          
out.println("<h2>HTTP Authorization header:</h2>");

if (authHeader == null) {            
     out.print("No authorization header");      
} else {            
     out.print("<textarea readonly id='authHeader' rows=\"5\" cols=\"80\">" + authHeader + "</textarea>");
}

But we are using html as front end, because of angular 2 .

So for my scenario, how I can I get the request header and token.

Please don't hesitate to edit my question, if it is not clear.

KOUSIK MANDAL
  • 2,002
  • 1
  • 21
  • 46
Human Being
  • 8,269
  • 28
  • 93
  • 136
  • If I understand correctly I think the answer is that Javascript does not have access to the initial request, so you can 1) Print them in the output html or 2) make another ajax http request after the page loads. – Dylan Mar 08 '17 at 07:02
  • Can u please post this as as answer ? – Human Being Mar 08 '17 at 13:23
  • How I can print it as html ? – Human Being Mar 08 '17 at 13:24
  • If your using an MVC like spring their is thymeleaf which can be used in HTML. – thekodester Mar 16 '17 at 15:20
  • for authentication,request is being sent to servlet? – Shadab Faiz Mar 17 '17 at 18:43
  • @shadab ... That was statically done. We don't have any control on that. We only get **token value** in the **request header ** in JSP as shown above. – Human Being Mar 18 '17 at 04:05
  • JSP is server side technology, that's why you're able to intercept the request headers there. HTML&Angular2 are client ones, it does mean you're have to build the request headers by yourself when using them. – WildDev Mar 21 '17 at 07:09
  • Even though the answer to your question is likely: "It's not possible", It would be interesting to further readers to know how did you get around the problem. Don't hesitate to post your own workaround as an answer. It could help someone. – MartinTeeVarga Mar 30 '17 at 07:17

6 Answers6

3

You can't get a value of a header from client-side JavaScript. The only exceptions are the User-Agent and Referrer headers, because the browser provides the values in the document and navigator objects.

You said you are working on a Java application with an Angular 2 front end and some other application provides a token (might be useful to specify if this is something standard, e.g. OAuth2). I will assume that it is a custom token. I believe you also meant you have some server side component, a servlet.

What you can do is to implement the authentication using the servlets (or even JSPs) and then redirect back to the Angular 2 front end application, passing the token in the URL as a query parameter. URL is easy to read in Angular 2. However this is not very secure, even if you use something like JWT. As an alternative to URL, you can use the Set-Cookie header and then read the cookie from Angular.

What would be almost secure would be to authenticate the user using the server side (servlet or even JSP). Then create a one-time token which is passed in the URL as a query parameter when redirecting to your HTML page. Then use the one-time token in a call to the server again to retrieve the real authentication token using a proper REST call from Angular 2 with request and response.

Depends on how much control you have and what kind of authentication the auth application uses, you might want to take a look at the OAuth2. It deals with plenty of different authentication scenarios. Specifically the OAuth2 implicit grant flow is used to authenticate users from client-side only applications. Even if you can't use that, it will give you some ideas.

Community
  • 1
  • 1
MartinTeeVarga
  • 10,478
  • 12
  • 61
  • 98
1

When you are using a server-side authorization, your server put headers with authorization to your HTML pages. But also you can put this tokens to your page response by meta tags at server side. And then access to meta tags by js.

<meta name="_csrf" content="${_csrf.token}"/>
<meta name="_csrf_header" content="${_csrf.headerName}"/>

Meta tags are similar to response headers and can complete or override response headers. Read this post please Spring Security CSRF Token not working with AJAX call & form submit in same JSP

Community
  • 1
  • 1
Alex Nikulin
  • 8,194
  • 4
  • 35
  • 37
0

You can handle this at server side(JSP's expressions work on server side), create a handler method on server where you can check header and then redirect to your Angular App.

Puneet
  • 194
  • 2
  • 19
0

I think we can use HTTP HEAD method as JQUERY AJAX request in your HTML page .

https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

The HEAD method asks for a response identical to that of a GET request, but without the response body. This is useful for retrieving meta-information written in response headers, without having to transport the entire content.

 ajaxRequest = $.ajax({
        type: "HEAD",
        async: true,
        url: 'index.jsp',
        success: function(message){
           var headerValue =ajaxRequest.getResponseHeader('Content-Length')]);
        }
});
Aditya Yada
  • 168
  • 1
  • 2
  • 9
0

There are various way to solve this issue as I faced it a lot before and what I prefer is;

When authentication is completed in login page and a token generates I store it into HTML storage, make be in localStorage.

The main point you should understand that your views should not be accessed directly and there has to be a authentication (or may be a authorisation) step(s) before accessing the page(view).

So what you can do is set a URI for accessing any page, consider that is;

http://host/appname/pageName

And when you connect with this URI via ajax call add the token that is stored in localStorage in headers. And check all authentication and authorisation works and if success return the view(as the pageName suggested in the URI), else return the login view.

KOUSIK MANDAL
  • 2,002
  • 1
  • 21
  • 46
0

If i understand you correctly,

Angularjs is a client side framework and is intended to run inside a browser without any intervention of server by reducing its load by serving the application logic All operations that need to be performed by angular will only be initiated at client side by the browser after loading the HTML and javascript. The scope of angular is only limited to that area any way it is not a disadvantage it is the actual intention of client side frameworks.

Regarding request response headers you can only have access to headers of AJAX request

Following are the solutions to these problems:-

  • If you are using tomcat or any servelet container in order to serve the application or hosting angular code you can use JSP insted of HTML,since JSP is processed to html by the servelet container before passing it to client side.I think this solution will work in your case based on my inference form your question
  • Otherwise configure servelet that process the success and failure handlers from the authentication server and from angular you need to poll the servelet for getting the request header value.
SAMUEL
  • 8,098
  • 3
  • 42
  • 42