JS - Making a Login page using an XMLHttpRequest - javascript

I am attempting to create a login page on my mini site that allows users to download material. I am struggling with the xhr request, in order to check if the password and username are valid. Is the following code sufficient in what I am trying to do? Any help would be appreciated.
function login() {
const xhr = new XMLHttpRequest();
const uri = "localhost"; // uri for request inserted here
xhr.open("GET", uri, true, Username, Password);
xhr.withCredentials = true;
xhr.onload= function() {
const resp = JSON.parse(xhr.responseText);
document.getElementById("Login").innerHTML = resp;
}
xhr.send(null)
}

Although it is your personal wish but one should never check username and password validity using xhr. These should always be done with form submissions. And the next thing is that it is never safe to use GET in requests for fields such as passwords. Always use passwords.
You need to edit your code.

Related

How to go to my app home page, after authenticate users via REST API?

I need to do SSO for swift application, which I have added in my account. We should not show One login's login screen to users.
So I authenticated via the following REST APIs.
To get the access token,
https://api.us.onelogin.com/auth/oauth2/token
Then to get the session id,
https://subdomain.onelogin.com/api/1/login/auth
I am getting the session id successfully. Then I redirect to a view page, where I have a JS CORS request.
This is my JS code.
function makeCors() {
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
method = "POST";
var url = "https://subdomain.onelogin.com/session_via_api_token";
xhr.open(method, url, true);
xhr.setRequestHeader("Content-Type", "application/json");
body = {"session_token": "{{$session}}"};
xhr.send(JSON.stringify(body));
window.location.href = 'https://subdomain.onelogin.com/trust/saml2/http-post/sso/3b47ccb6-7932-4a20-8f16-ed03f03841b7';
};
I am getting 200 response from the session_via_api_token API.
Then I redirect user to my SSO url. But this is again taking me to login screen.
I am stuck with this. I need the user to bypass login page and go to my app page directly.
Please help me on this.

Secure Password Sent from Native App to HTTPS API

I have a HTTPS API server, and want to connect to it from a native Android app (built in Cordova). The app uses is a simple XHR request like so:
function authenticate() {
const username = document.querySelector('#usernameInput').value;
const password = document.querySelector('#passwordInput').value;
const xhr = new XMLHttpRequest();
const body = JSON.stringify({
username,
password,
});
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');
xhr.onload = function () {
console.log(this.responseText);
};
xhr.onerror = function () {
alert('Request failed');
};
xhr.send(body);
}
function handleSubmit(event) {
event.preventDefault();
authenticate();
}
document.querySelector('#submitButton').addEventListener('click', handleSubmit);
The request works fine and the username/password are authenticated on the server or 403 is returned. My concern is I can see the password in plain text if I look at the request payload in a local debugger. Does this mean passwords are exposed over the network? If so, what should I be doing differently?
When using HTTPS only your computer and the server know the key to decrypt the data in the request, since they previously agreed on a key during the key exchange phase of the SSL/TLS connection.
Other computers in your network should not be able to read your request's content since they don't have the key. You can see it in plain text in your browser's debugger because it is plain text before you actually send it.
Don't worry about manually encrypting your data before sending it to the server, the protocol already takes care of that.

Sending email from browser mailgun

I want to send a simple email from the browser using mailgun. I send a working email from postman and with the download code function I managed to get the javascript code which is:
var data = new FormData();
data.append("from", "Mailgun Sandbox <postmaster#sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org>");
data.append("to", "Example <example#gmail.com>");
data.append("subject", "Hello from Mailgun");
data.append("text", "Congratulations Example, you just sent an email with Mailgun! You are truly awesome!");
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "https://api:key-75a05cfds8c66bd1y4c3e854305438e5#api.mailgun.net/v3/sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org/messages");
xhr.setRequestHeader("cache-control", "no-cache");
xhr.setRequestHeader("postman-token", "0a3ad9d5-22b5-6308-d6e7-59f66360fa26");
xhr.send(data);
But when I execute this code from my browser (firefox) it does nothing. What am I doing wrong?
Changing the url from
https://api:key-75a05cfds8c66bd1y4c3e854305438e5#api.mailgun.net/v3/sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org/messages
to
https://api.mailgun.net/v3/sandbox1985406854ad9e8b8dfe094531fa41e8.mailgun.org/messages
seems to execute, is the api:key-xx part invalid?
Don't do this. This is not an appropriate use of the Mailgun API.
By delivering this Javascript to a browser, you are giving them access to your Mailgun API key. This API key is not limited in any way whatsoever -- a malicious client could misuse the key to send an unlimited number of messages to any recipient they want, potentially racking up large bills and/or getting your account blocked for spam.
Use the Mailgun API on the server side. If you need to send messages via Javascript, create an endpoint in your application which calls the Mailgun API with appropriate restrictions in place.

How to carry on credential Cookies in XHR

So here is the situation:
Background: I am developing a Chrome App (not extension) using javascript making XHR calls to a website.
On login, I am posing all the form data (username, password etc.) to the login url like this
var xhr = new XMLHttpRequest();
xhr.open("POST", 'http://somewebsite/Login.aspx', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.withCredentials = true;
xhr.onload = function (e) {
console.log('on load of login request');
console.log(xhr);
xhr.open('GET', 'http://somewebsite/STS/sts_default.asp', true);
xhr.withCredentials = true;
xhr.responseType = 'document';
xhr.onload = LogicFunction;
xhr.send();
};
var params = "txtUsername=user&txtPassword=password"
xhr.send(params);
What I assume is that once the login request get processed, while I am using the same xhr object it should use the cookies that been set from the previous response.
While actually what happened is the l/login.aspx gives me a 302 redirect. And on that redirection its using the credential cookies. while the xhr I initiated within the onload block doesn't have any cookie credentials thus get kicked out by server.
What should I do to carry this cookie credentials.
Thanks
Yes Guys. The way how I did to keep the cookies are right. The browser (at least in chrome) helps to keep all the cookies that set by server. The only problem that I have was a 302 redirection, which actually was solved by a session transfer that is specific to this problem. So if you are reading this answer I can tell the way I did to preserve cookie information in the question is correct and still thank you for all those put effort and thought on this question.
Thanks

How to bypass authorization using XMLHttpRequest header?

I am trying to access a diagram (the type of url is image), which require authorization, and display it in fancybox. So I tried to use XMLHttpRequest to send authorization in header first and access this url again since the authorization has already bypassed in cache, that's why I set async to false. Here is my code:
function showDiagram(row){
var authCode = $("#authCode").text();
var header = "basic" + authCode;
console.log("In show diagram");
var id = row.children().eq(6).text();
openURL = restURL + "/service/runtime/process-instances/" + id + "/diagram";
console.log(openURL);
var xhr
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET", openURL, false);
xhr.setRequestHeader("Authorization", "Basic " + authCode);
xhr.send();
console.log(xhr.status);
if(xhr.status==200){
callFancybox(openURL);
}else{
alert("The diagram cannot be shown!");
}
}
However, I have met two different error situations.
The browser still ask me to enter username and password when I access the url for the first time, at the same time, console print out status = 200 and fancybox has already popped up, if I refuse to enter password, a GET 401(Unauthorized) error will be returned. If I entered the password, the diagram will show in fancybox and it will work well for all other url I am trying access.
Console print out status = 200 and the fancybox will pop and show "The requested content cannot be loaded.
Please try again later." And a GET 401(Unauthorized) error will be returned.
Why this happening? What should I do to bypass auto login and display the url in fancybox? Thank you very much for any ideas!
You're not specifying what is on the server side, and the problem is there. You must modify your server so that it supports your header authentication. With your current implementation the server is ignoring the headers, and so it's challenging you to indentify in a different way.
Besides you'r not sending any kind of credentials or whatever. You must add headers with that information.

Categories

Resources