I replaced the old login system with a more secure one. Instead of storing cookies containing the username and plaintext password, the password is submitted once to obtain a session hash, which is valid for a given length of time. Registering and logging in is now done via an iframe, which prevents custom javascript from having access to the password field. Site admins need to run the following SQL before updating, or else all of your logins/registrations will fail: ALTER TABLE `registrations` ADD `session_hash` VARCHAR( 64 ) NOT NULL , ADD `expire` BIGINT NOT NULL
69 lines
2.7 KiB
HTML
69 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CyTube - Login</title>
|
|
<link rel="stylesheet" href="assets/css/bootstrap.css">
|
|
</head>
|
|
<body>
|
|
<form class="form-horizontal" action="javascript:void(0)">
|
|
<div class="control-group">
|
|
<label class="control-label" for="username">Username</label>
|
|
<div class="controls">
|
|
<input type="text" id="username">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label class="control-label" for="pw">Password</label>
|
|
<div class="controls">
|
|
<input type="password" id="pw">
|
|
</div>
|
|
</div>
|
|
<div class="control-group" style="display: none" id="pw2div">
|
|
<label class="control-label" for="pw2" id="confirm">Confirm Password</label>
|
|
<div class="controls">
|
|
<input type="password" id="pw2">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<div class="controls">
|
|
<button class="btn" id="login">Login</button>
|
|
<button class="btn" id="register">Register</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<script src="assets/js/jquery.js" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
|
var source;
|
|
var respond = function(e) {
|
|
if(e.data == "cytube-syn") {
|
|
source = e.source;
|
|
}
|
|
}
|
|
window.addEventListener("message", respond, false);
|
|
|
|
$("#login").click(function() {
|
|
$.getJSON("api/json/login?name="+$("#username").val()+"&pw="+$("#pw").val(), function(data) {
|
|
data.uname = $("#username").val();
|
|
source.postMessage("cytube-login:"+JSON.stringify(data), document.location);
|
|
});
|
|
});
|
|
$("#register").click(function() {
|
|
if($("#pw2div").css("display") == "none") {
|
|
$("#pw2div").css("display", "");
|
|
return false;
|
|
}
|
|
else if($("#pw2").val() != $("#pw").val()) {
|
|
$("#confirm").addClass("text-error");
|
|
return;
|
|
}
|
|
$.getJSON("api/json/register?name="+$("#username").val()+"&pw="+$("#pw").val(), function(data) {
|
|
console.log(data);
|
|
data.uname = $("#username").val();
|
|
source.postMessage("cytube-login:"+JSON.stringify(data), document.location);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|