Send authorization header when accessing URL - html

I want to send the authorization header when I view the webpage of a local IoT device (http://deviceip). The device uses an authorization header encoded in basic.
I have created a web server using Node.js and Express.js with a URL link to the device, but I have not been able to set the authorization header properly and end up with a login prompt.
I have been able to get it working by using a separate proxy server which sends the header upon request and changing the webserver's links to the proxy which sends the authorisation header.
proxy.on('proxyReq', function(proxyReq, req, res, options) { // allows you to alter the proxyreq request object to send authentication before connection
proxyReq.setHeader('Authorization', auth); // sends Authorazition header auth
});
Is it possible to send the authorization header using a function in the web server when the URL is clicked as opposed to using the proxy?

"Is it possible to send the Authorization header using a function in the web server when the URL is clicked as opposed to using the proxy?"
No, it's not possible. The reason is:
The only way to add headers to a request from inside a browser ("the URL is clicked") is using the XmlHttpRequest (Ajax).[source]
If it is an Ajax request, you can't fetch the html response and then re-render the whole page. Otherwise, it would bring huge security problem -- any JavaScript code in browser can send an Ajax request and show user a completely new page, which is perfect for phishing attack.

Related

How to implement it via iFrame?

I have a situation, when I should to send a POST request to authenticate user, if it's succeed then server set a cookie and then we can get a protected page:
First request by Postman:
Second request (after first):
I need to implement it on web page. As I understand now, it's possible only via frames. How to do it? First request should be sent automatically after opening a page, so, user should open the page and see a protected page.
Cookie Authentication is you are trying to achieve?, here is are some links which will help to you with that.
https://dzone.com/articles/cookie-authentication-with-aspnet-core-20

How to attach Json Web Tokens to an http header?

Most JWT tutorials I've seen say that you can attach it to the headers with AJAX. How do you attach the token on the initial page load?
For example, if a user goes to the base URL '/' and they don't have a token then show them the page. If they do have a token, redirect them to their profile page.
Edit:
I'm returning the generated token with a jquery ajax success function then redirecting the user. When the user gets to the home page ('/'), I'd like the access token to be sent via http headers to my server. Then the server can handle the request. However, anytime the user returns (if they close the browser and go to "mywebsite.com" or any other page), I'd like the server to be able to access the token. Are http headers the best way to do this?
success: function(token){
localStorage.setItem("token", token);
window.location.href('/');
}
If my application was a Single Page App (SPA), I could just use ajax all of the time, but it's not.
You cannot achieve what you want with HTTP headers. HTTP headers are something which are sent when a request is made to the server. In your case, you want to remember something about the client even if they close their website and come back later. The easiest to do that is through cookies.
Basically generate the JWT token for the client and send it to the client as a cookie. This logic will be written on the server side and there are many libraries available to do this depending on the technology you have chosen for server side. Then everytime the client makes a request to your server, browsers make sure that the stored cookies are sent.

Is possible to create a JSON RESTful OAuth2 server?

The part where user needs to enter their creds can also be shown if the client app redirects to a stateless static page alongwith the some params, that belongs to the oauth-server.com domain so that no other app has access to username and pwd.
After POST -ing this form to oauth-server.com, Is there a way to redirect the user back to the client app without the oauth-server redirecting via a browser session? Is there a json restful mechanism to OAUTH2?
So to answer your question, redirect_uri exists for the sole purpose of letting the client app(web, iOS or android) know status of the authentication request.
And OAuth2 server cannot do anything other than redirecting, because where the server will redirect to? (which is what redirect_uri anyways).
Refer the following articles for best practices to redirect data to installed / mobile client app
https://developers.google.com/identity/protocols/OAuth2InstalledApp
specifically this section,
https://developers.google.com/identity/protocols/OAuth2InstalledApp#choosingredirecturi
Hope that helps!

Reading response of a non ajax POST call

I have a simple login form that submits to a service.
The service has the following behavior
If proper auth details are provided, the service accepts the login and redirects the user to the destination
If the login credentials are incorrect, the service responds by setting a 'abc-xyz' header. The html page submitting the form needs to read the 'abc-xyz' header and display and error message to the user.
I converted the form to make an AJAX call. Now I can read the response header and show the error message. But I'm running into CORS issues and limitations on the service doesn't permit me to configure the service to add the appropriate CORS headers. So I have to submit the form normally without AJAX. But when I do so (with wrong credentials for testing), the html form page refreshes thus losing all the headers.
Is it even possible to read the response headers with a regular form submission? Thanks.

How to handle cross domain iframe file upload json response?

I'm building an files upload API.
Basically, the user will have to POST the files with his/her api_key + signature to my web service. Then my web service replies back with a JSON response. I'm wondering how can this process work asynchronously?
Assuming that the user POST the request in a form setting the target to an iframe. The JSON response will be sent back to the user on his/her iframe with content type set as "text/html". It is set as "text/html" instead of "application/json" because I want to avoid having a "pre" tag injected by the browser around the JSON response. Anyway, how does the user read that JSON response if the iframe and the parent window have different domain? There is going to be a cross domain policy issue.
Dynamically create "script" tag plus JSONP won't work in this case because I need to POST in order to upload. JSONP only works with GET requests.
Take a look at the 'Upload' example here. It uses Cross Domain messaging to pass the message back to the uploading page, and uses easyXDM to support all browsers.
This post explains how it all works!
Because of Same Origin Policy, browsers wont allow JavaScript in the main frame reading/accessing whatever content in iframe from another domain. In this case, the users will have to use easyXDM or create their own proxy -- by proxy here i mean users will have to write some code on their backend that can communicate with your API such that a post request will go directly to your server, and a get response will get from their own proxy.