Password protected hyper link with target=_blank - javascript

I have a hyper link like this :
<A Href=My_Java_Servlet?User_Action=Admin_Download_Records&User_Id=Admin onClick=\"Check_Password();\" target=_blank>Download Records</A>
When a user clicks on it, a password window will open, the user can try 3 times for the right password.
The Javascript looks like this :
<Script Language="JavaScript">
function Check_Password()
{
var testV=1;
var pass1=prompt('Password','');
while (testV<3)
{
if (!pass1) history.go(-1);
if (pass1=="password") { return true; }
testV+=1;
var pass1=prompt('Access Denied - Password Incorrect.','');
}
return "false";
}
</Script>
If user enters the wrong password 3 times, it's supposed to not do anything, but it still opens a new window and displays the protected info, how to fix the javascript or my html hyper link so only the right password will open a new target window, a wrong password will make it do nothing ?

Clientside JavaScript is perhaps the worst possible way to provide "security". Users can just view the source to see all of your passwords, or just disable JavaScript altogether. Do not do this.

Other people have answered your question with the true/false return value but here's some of the problems with the whole idea of checking the password in javascript on the client:
Your javascript source is freely readable by anyone downloading the page - thus showing them the password needed to view the page.
If they don't have javascript enabled then they'll just go straight to the page without getting the javascript prompt.
They could always just copy the link and paste it into their address bar to bypass the password protection. They could also just middle-click the link (which should open it in a new tab/window depending on their browser.)
Even on a private/intranet-only application this would be a laughable security method. :) Please consider re-desinging it so that the password is checked on the server-side portion (like when someone attempts to access the servlet it would render a password box and then post that password back to the server and then allow/deny access.)

You might to try returning false rather than "false"
However, you might be better off doing this kind of thing on the server, as I'd image all but novice users will know how to "copy link address" and paste this into their address bar.

Why are you returning "false" instead of false ?

Related

Behavior of mailto: and onclick() on same element

I use some server-side email obfuscation and do not want to put the full email address in a mailto: . Within the element, I call a js function that fetches the email address from the server, and calls (another) mailto: link from without the js function.
I first kept the href empty (and I think it's the same when putting #), but when hoovering over the link, the status bar of the browser shows a link to the current page, and it looks just neater (and expected behavior) to show a mailto: link in the status bar, but just with the firstname of the person, and not with a valid email address.
HTML:
<a href="mailto:johny" onclick= "sendmail('jj'); return false;" title="Send email">
JS:
function sendmail(dest) {
var link = "";
fetch('/returnmailstring.php?dec='+code+'&input='+dest)
.then(function(response) {
response.text()
.then(function(text) {
link = text;
if (link.length > 2) {
if(window.confirm('Send email to \n'+link+' ?')) {
window.location.href = link;
}
}
})
})
}
So my question is whether it is acceptable to have a double/identical functionality, but using two different methods ?
I would have expected that maybe two "new mail" windows would be opened, or some other weird behavior, but everything actually works fine. But I cannot imagine that this is standards compliant, and that it would work fine in all browsers/devices?
A related question is about what should happen when user clicks on the link. I currently implemented a confirmation box, so user can choose OK to actually proceed with sending the email (using the default email client), or just copy the email address from the box (and paste into another mail client, e.g. gmail), and Cancel to return to the page. The alternative would be to skip the confirmation box and directly open the mail client after the click. Are there UX rules / standards to follow, or is it acceptable to use such confirmation box?

Setting document.activeElement.value shows value on screen but fails to accept

There is this web page: https://www.comed.com/Pages/default.aspx
with a "Sign In" button in the top right corner. I am displaying this page from a UWP app (this is actually a JavaScript question) in a WebView control, and run a dynamic JavaScript script on this page (via a call to InvokeScriptAsync()) to automatically insert the login or password in the currently selected field. The script that runs is simply this:
document.activeElement.value='" + value + #"';
This works in the sense that the login or password shows correctly on the screen BUT when I click on the "Sign In" button the page is telling me "Username (Email Address) is required." and "Password is required.".
If instead I manually type in the SAME value (or use copy/paste) then I get no errors!
I get the same type of error on the MS Channel 9 login page, but most other login web pages do NOT have that issue.
Use this code $(document.activeElement).trigger('change') after setting the value.
In addition to the above answer, and to support different web pages, I ended up using some Javascript from Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript:
if ("createEvent" in document)
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.activeElement.dispatchEvent(evt);
}
else
{
document.activeElement.fireEvent("onchange");
}

Javascript confirm() still executes action when cancel is clicked. :(

<script type="text/javascript">
confirm("Delete user?.");
window.location.href = "users.php";
</script>
$qqq = mysql_query("DELETE from users WHERE panelistname='$theuser'") or die(mysql_error())
considering the code above, (inside a php file, so no worries with certain syntax errors you might notice) the problem here is that when click cancel on the confirm() dialog box that will show up. the delete action still executes. This question might be considered a double since, yeah, I found some questions relevant to this one but I just can't fixed this one myself.
the one I found codes it something like this:
"if (confirm('Are you...?')) commentDelete(1); return false"
I can't find a way to solve this problem, I don't know which part should I insert the SQL command(delete) in this format. Please someone show me how to do this right. :) thanks!
EDIT: I just saw that Nick Zuber posted a similar answer around 1 minute before I posted mine (actually, while I was writing it :P)
I don't clearly understand what you are trying to do.
You want to show the user a confirm window, and if they click Yes, delete some entry in the database, and if they click No, redirect them to the page 'users.php' ?
If it's what you want to do, then you can't do it like this. You can't use JS conditions with PHP. The PHP code is executed server-side (in the server), whereas the JS code is executed client-side (in the browser). What you would need is to do something like this:
warning: don't use this code, it's unsecure and shouldn't ever be used in a real app, it's just to show you how the whole thing works
(IN USERS.PHP)
if(isset($_GET['delete_dat_user']))
{
$qqq = mysql_query("DELETE from users WHERE panelistname='" . $_GET['delete_dat_user'] . "'") or die(mysql_error());
}
(IN THE WEBPAGE)
if(confirm('u serious u want to delete the user'))
{
window.location = 'users.php?delete_dat_user=theUserName';
}
else
{
nope
}
When your page loads, the PHP on your page will automatically execute, regardless of your JavaScript. Instead, try to prompt the user if they want to delete the account and if they click yes redirect them to a page that has your PHP query.
Also, the confirm function returns a boolean value depending on which option is clicked by the user. Try putting it in an if statement:
if(confirm("Delete user?.")){
window.location.href = "delete_user_page.php";
}else{
// cancel was clicked
}

Detecting autofill of login form

I am trying to create a webpage with a login page. When the user logs in for the first time the username and password will be saved by the browser, if he checks "Stay logged in". When he logs in the second time the browser will autofill the form and I can log him in without any need for him to interact with the page.
The problem is, that I can't get the password from the login form. Take a look at my code:
$(document).ready(setTimeout(function() {
loginForm.form.submit(function(e) { // I don't have a onsubmit action defined on the login form
console.log("Submit");
checkLogin(); // This function should get the username and password value and makes a credential check but I cant get the password here
});
var username = $(".login-form__username").val();
var password = $(".login-form__password").val(); // This always is "", an empty string!
if (username) { // If the username is set we assume its an autofill
console.log("autofilled");
loginForm.form.submit(); // I manually fire the submit event when the browser autofills the username and password field
}
}, 100));
I can clearly see, that the username and password are filled in to the form, but somehow I cant get the password. Everything goes well If I manually click on the submit button of the form. This will of course trigger checkLogin(); and I can get the password here. But it wont work, if I trigger the event manually after the document ready event.
Does anyone know how to fix this, or why this happens?
Thanks, David
EDIT
I just figured out, that this issue only appears on Chrome for Mac, it works like a charm on Chrome for Windows and on Firefox. This don't works on Safari, because you need to select the user you want to login.
In addition I also figured out, that the focus needs to be set to the Webpage itselfe, not on the URL-Bar or on the refreshButton
"Stay logged in" and the browsers Autofill are two pair of shoes. "Stay logged in" is normally implemented by a cookie or a local store which contains the current user information. A script running on your page checks that and logs the user in or sends him to the login form.
The autofill is a browser feature where the user is asked to store the credentials in the browser. You don't know via javascript if the is something stored.
But you could try to check the length of the content of you input and blindly submit it. If it works the credentials were right.
You Can Store Form USername And Password In Local Storage Of Browser
localStorage.setItem("username", "Danyial.com");
localStorage.setItem("password", "1234567901");
And Get The Value And Put In Form
var username =localStorage.getItem("username");
var password =localStorage.getItem("password");
$(".login-form__username").val(username);
$(".login-form__password").val(password);

What's the javascript to only click a link if it exists?

I'm in the SeleniumIDE , but calling out to javascript.
Seems like this would be a fairly common scenario for others too.
I have a good test suite but the first thing it does is login.
I would like the suite to start off be making sure I am logged out and if not, logging me out.
I can tell if I am logged in by the presence of a 'Logout' hyperlink
But I only want to click on logout IF I am currently logged in, otherwise I want to do nothing, as trying to click on a non-existent element would raise an error if I am not already logged in)
So logically this is:
if ui element(logout link in my case) exists
click on logout link
else
do nothing
end
I am using the Selenium IDE and calling javascript - Given that I can't do if then in the basic seleniumIDE I was hoping I could do this in javascript itself.
something like:
store javascript{if ([a with text 'Logout' exists]) then click on it end;} id1
although instead of click on it [this], it would also be ok (though more brittle) if I just visited the url which is
http://my-apps-domain/users/sign_out
but I'm not sure of the exact syntax.
The relevant HTML is:
<li>Logout</li>
If it exists I would like to click on the a (or visit the url directly), otherwise nothing.
I would like to find a non-jquery solution if possible.
Update: I have found that even javascript{window.location.replace('http://google.com') } closes my seleniumIDE window and replaces it with google but doesn't affect the actual window where the tests themselves were running.
Triggering a click event in raw JavaScript can be tricky (check out this answer: https://stackoverflow.com/a/10339248/2386700)
However, if you can also use jQuery, that would simplify things. For example, if the logout button has an id like "logout" then you could do something like this:
var logoutButton = $('#logout');
if (logoutButton != null) {
logoutButton.click();
}
Since you don't have control over the HTML, I suggest referencing the link in another manner. The URL seems very reliable for that purpose:
var logoutLink = document.querySelector('a[href="/users/sign_out"]');
if(logoutLink != null) {
window.location.href = logoutLink.href;
}
You don't need to fire any kind of click event, because page navigation can easily be done with window.location.
UPDATE:
Another idea is to assign your button an id, then click it with selenium:
var logoutLink = document.querySelector('a[href="/users/sign_out"]');
if(logoutLink != null) {
logoutLink.setAttribute("id", "logoutLink");
}

Categories