Login Form For Http Basic Auth

Question

I am running a Perl application named bitlfu.For login it is using something like Apache HTTP Basic Auth but not a form.I want to make form for the login with username and password field. I have tried JavaScript and PHP with no results till now.

So I need help!

PS: this kind of url works

http://user:[email protected]

Solution 1

I think a simple JavaScript like:

document.location='http://' + user + ':' + pass + '@mydomain.tld';

should do the work.

So basically, you have to create a form, with a user and pass field, then onsubmit, use the part of JavaScript given here:

<form method="post" onsubmit="javascript:document.location='http://' + $('login') + ':' + $('pass') + '@mydomain.tld';">
    <input type="text" name="login" id="login" />
    <input type="password" name="pass" id="pass" />
    <input type="submit" value="ok"/>
</form>

where $() is a document.getElementById or jquery or so. I used the $() function to make the code shorter. Here is an implementation, which does not work on every browser. Again, look throw jQuery for cross browser solution.

function $(_id) { return document.getElementById(_id); }

Otherwise, you can use php and redirect the user with a header location.

php way:

<?php

if (isset($_POST['login']) && isset($_POST['password'])) { header('Location: ' . urlencode($_POST['login']) . ':' . urlencode($_POST['password']) . '@domain.tld'); }
else
{
?>
<form method="post" onsubmit="javascript:document.location='http://' + $('login') + ':' + $('pass') + '@mydomain.tld';">
    <input type="text" name="login" id="login" />
    <input type="password" name="pass" id="pass" />
    <input type="submit" value="ok"/>
</form>

<?php
}

Solution 2

The method of explicitly redirecting document.location with username@password in URL caused me some problems with Safari giving a phishing warning.

If I instead first make an AJAX request to a URL with basic auth headers added, and then redirect document.location without the username/pass in the URL then it worked better for me

Example

<script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
      crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
    $('form').submit(function() {
        $.ajax({
            url: 'https://site/collaborators/',
            username: $("#login").val(),
            password: $("#pass").val()
        }).done(function() {
            $("#error_msg").html("");
            document.location='https://site/collaborators/';
        }).fail(function(result) {
            console.error(result);
            $("#error_msg").html("Error logging in: "+result.statusText);
        });
        return false;
    });
});
</script>



<div id="error_msg" style="color: red"></div>

<form method="post">
    Username:
    <input type="text" name="login" id="login" />
    Password:
    <input type="password" name="pass" id="pass" />
    <input type="submit" value="Submit"/>
</form>

Unfortunate caveat with Safari only, if you type your username and password incorrectly, then it makes another standard HTTP basic auth popup, but this is better than a big red "Phishing warning" that occurs when you make the document.location include username/pass

Chrome doesn't have duplicate popup if login credentials are incorrect though

Comments

[yoshiwaan]

It's worth noting for anyone that is going to try this for another application that user:pass@host URLs aren't supported in IE anymore: support.microsoft.com/kb/834489

[Jasen]

yeah, might need to serve a 401 code to browsers that have that bug, so they get a plain login form. if there are any remaining

[sibidiba]

DISCONTINUED! All major browsers dropped the support for this. Huge issue for many...