I am trying to display my login inside an iframe which loads in the middle of the start page with gray backgroud, however i have a problem dealing with the target of the iframe, things should work as follows:
1- if user logged in successfully home page should load in the parent window
2- if error, error message should be displayed in the iframe itself.
my code:
<div id="cover5" onclick="javascript:cover5();">
<iframe name="warning" src="SignIn.php" id="warning" onclick="javascript:cover5();">
</iframe>
</div>
SignIn.php
<html>
<head>
<script type='text/javascript'>
function valid(){
if(document.getElementById('username').value.toString().length>=1 || document.getElementById('password').value.toString().length>=1){
return true;
}
else{
alert("The Combination of username and password are Incorrect !");
return false;
}
}
</script>
<script type='text/javascript'>
function ChangeTarget() {
document.getElementById("login").prop("target", "_parent")
}
</script>
<script type='text/javascript'>
function ChangeText(text) {
document.getElementById("label1").innerHTML= text;
}
</script>
<title></title>
</head>
<body>
<form name="login" id='login' target='_self' method='post' accept-charset='UTF-8'>
<fieldset>
<legend>SignIn</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >Email:</label>
<input type='text' name='email' id='username' maxlength="50" /> <br />
<label for='password' >Password:</label>
<input type='password' name='password' id='password' maxlength="50" /> <br />
<br /> <label id="label1" style="color: red"></label> <br />
<input type='submit' name='Submit' value='Login'/> <br />
<a href='resetPassword1.php'> Forgot/Reset Password? Click Here</a>
</fieldset>
</form>
however, the target is not changed by method ChangeTarget() which is called inisde php code, so the problem now is that everything load inside the iframe or everything inside the parent window. anyone knows how to solve the problem?
server side script:
mysql_select_db("mydb",$check);
$email = $_POST['email']; //username that will be submit from a form
$password = $_POST['password']; //password that will be submit from a form
// if(mysql_num_rows($temp_privileges_id)== 1) //if the id found that means that the user is already assigned to a conference
// {
echo '<script type="text/javascript">',
'ChangeTarget();',
'</script>';
header('Location: main.php'); // transefer to home page with variable username
}
There is no method prop. Either set the value of the target attribute directly
document.getElementById("login").target = "_parent";
or use setAttribute
document.getElementById("login").setAttribute("target", "_parent");
.prop() is a jQuery function. If you're going to do it in jQuery, do this:
$("#login").prop("target", "_parent");
If you're not going to do it in jQuery, do it like this in straight JavaScript:
document.getElementById("login").target = "_parent";
Related
What I try to achieve
I need to create a administration-panel for a website. Therefore, I need a possibility to protect the content of the panel via a password. The functionality doesn't have to be very advanced. I neither need a password-reset functionality nor the possibility to add more than one user. I also don't need a "keep me logged in"-functionality.
It is also a pretty small site, so I don't think the security standards need to be as high as with big companies.
I can't use cookies for this project. It is for a completely "cookie-free" website.
Code
The basic code looks like this:
<?php
//Documentation: https://www.php.net/manual/de/function.password-hash.php
$username = '$2y$10$bWW0KD6P7WUaTU99PpcjtON1xKSBhCCxxiiyoaMuY0aVehZSfgVI6'; //result of password_hash("admin", PASSWORD_BCRYPT);
$password = '$2y$10$NxtrHFdZGZMG7y2G6l2o6eZpksOQfQvrQrCBTj7knEmL8VynQlcz2'; //result of password_hash("1234", PASSWORD_BCRYPT);
//Loading login form
$content = "<h1>Login</h1>
<form method='POST' class='input'>
<label>
<input type='text' name='username' placeholder='Username' class='validInput' required/>
</label>
<label>
<input type='password' name='password' placeholder='Password' class='validInput' required/>
</label>
<input type='submit' name='login' value='Login'/>
</form>";
//Check if form was submitted
if(isset($_POST['login'])) {
//Documentation: https://www.php.net/manual/de/function.password-verify.php
$verifyUsername = password_verify($_POST['username'], $username);
$verifyPassword = password_verify($_POST['password'], $password);
//Check if user entered correct username and password
if($verifyUsername && $verifyPassword) {
//Load protected content
$content = "<h1>Welcome</h1><p>Content here!</p>";
}
//Reload login form
else {
$content = "<h1>Login</h1>
<p>Wrong username or password!</p>
<form method='POST' class='input'>
<label>
<input type='text' name='username' placeholder='Username' class='validInput' required/>
</label>
<label>
<input type='password' name='password' placeholder='Password' class='validInput' required/>
</label>
<input type='submit' name='login' value='Login'/>
</form>";
}
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<title>John Doe</title>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
</head>
<body id='body'>
<?php echo $content; ?>
</body>
</html>
Questions
Is this a secure possibility for basic login? Is it secure to just echo the protected content once the user logged in? If not, what can I improve to make it secure? What else should I think of?
Is HTTP authentication a good and secure alternative for this task?
Edit in reply to the comment from Ro Achterberg:
It is protecting a content management system. A potential attacker would be able to change, delete or replace content.
It needs to keep out everyone apart from the website owner
I need to authorize users to access two different databases:
DB01 and DB02.
Let's say that people who can access DB01 can also access DB02 but who can just access DB02 can't access DB01.
I've used form-guide code. This is the FORM code:
<!-- Form Code Start -->
<div id='fg_membersite'>
<form id='login' action='<?php echo $fgmembersite->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'>
<fieldset >
<legend><br/>Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<div class='container'>
<label for='username' >UserName*:</label><br/>
<input type='text' name='username' id='username' value='<?php echo $fgmembersite->SafeDisplay('username') ?>' maxlength="50" />
<span id='login_username_errorloc' class='error'></span>
</div>
<div class='container'>
<label for='password' >Password*:</label><br/>
<input type='password' name='password' id='password' maxlength="50" />
<span id='login_password_errorloc' class='error'></span>
</div>
<div class='short_explanation'>* required fields</div>
<br/>
<br/>
<div class='container'>
<input type='submit' style="font-family:'Courier'; font-size: 30px;" name='Submit' value='Submit' cursor='hand'/>
</div>
</fieldset>
</form>
<!-- client-side Form Validations:
Uses the excellent form validation script from JavaScript-coder.com-->
<script type='text/javascript'>
// <![CDATA[
var frmvalidator = new Validator("login");
frmvalidator.EnableOnPageErrorDisplay();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("username","req","Please provide your username");
frmvalidator.addValidation("password","req","Please provide the password");
// ]]>
</script>
</div>
<!--
Form Code End (see html-form-guide.com for more info.)
-->
and this is the Login function inside fgmembersite.php:
function Login()
{
if(empty($_POST['username']))
{
$this->HandleError("UserName is empty!");
return false;
}
if(empty($_POST['password']))
{
$this->HandleError("Password is empty!");
return false;
}
$username = trim($_POST['username']);
$password = trim($_POST['password']);
if(!isset($_SESSION)){ session_start(); }
if(!$this->CheckLoginInDB($username,$password))
{
return false;
}
$_SESSION[$this->GetLoginSessionVar()] = $username;
return true;
}
function CheckLogin()
{
if(!isset($_SESSION)){ session_start(); }
$sessionvar = $this->GetLoginSessionVar();
if(empty($_SESSION[$sessionvar]))
{
return false;
}
return true;
}
I've used two different fgmembersite.php renaming everything so to be
fgmembersite for DB01 and fgmemebersite_db02 for DB02.
What happened at the moment is that if I authorize a user for DB02 the user is also authorized for DB01. I guess the problem is due to the $_SESSION.
I didn't rename it because I think it's not possible to have S_SESSION_DB02.
So when the user access the script and try to get access to DB01 the check on $_SESSION is already true because it was already authorized when he accessed DB02. So please can anybody help me on this to give the two different privileges but using the code available on form guide website?
http://form.guide/php-form/php-login-form.html
I
OK so I have an email form on index.php. I am using mail_check.php to validate that both fields are filled in.
(there are more that is being validated, but not included as it is not the issue)
The main issue is that from the mail_check.php I want to be sent back to the index.php with a message in placed in the div id="mailrespond". I have chosen both PHP and Javascript to achieve this.
Index.php
<div id="mailrespond"></div>
<form method="post" action="mail_check.php">
<span>Name: <input type="text" name="name" maxlength="30" /></span><br />
<span>Email: <input type="text" name="email" maxlength="30" /></span><br />
<input type="submit" value="Sign Up" name="registration">
</form>
</div>
mail_check.php
if(isset($_POST['registration']))
$name = $_POST['name'];
$email = $_POST['email'];
if(empty($email) || empty($name)){
// if email and name are empty
//header ("location: index.php");
?>
<script language="javascript" type="text/javascript">
window.location.replace("index.php");
function msg() {
// creating elements are a safer method then innerHTML
dv = document.createElement('div'); // creates a Div element
dv.setAttribute('class', 'error_msg'); // adds error styling
txt = document.createTextNode('please enter your name and email '); // create the message
dv.appendChild(txt); // place the text node on the element
document.getElementById("mailrespond").appendChild(dv);
}
window.onload = msg;
</script>
<?php }
The code goes on, but My issue is that I am not getting the feed back messages. I am a little new to this all - if you can help that would be much appreciated! :)
<---- #downvoter please leave a reason! Thanks
Try this (and don't call a form field name, please since a form can have a name too)
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Mail respond</title>
<script>
window.onload=function() {
document.getElementById("mailform").onsubmit=function(){
if (this.fullname.value=="" || this.email.value=="") {
alert("Please fill in name and email");
return false;
}
return true; // allow form submission
}
}
</script>
</head>
<body>
<div id="mailrespond"></div>
<form method="post" action="mail_check.php" id="mailform">
<span>Name: <input type="text" name="fullname" maxlength="30" /></span><br />
<span>Email: <input type="text" name="email" maxlength="30" /></span><br />
<input type="submit" value="Sign Up" name="registration">
</form>
</div>
</body>
</html>
mail_check.php
<?PHP
if(isset($_POST['registration']))
$name = $_POST['fullname'];
$email = $_POST['email'];
if(empty($email) || empty($name)){
// if email and name are empty - only seen if JavaScript is turned off
?>
<h3>You did not fill in name and email</h3>
<p>please wait to be redirected or click <a href='index.php'>here</a></p>;
<meta http-equiv="refresh" content="3; url=http://example.com/index.php" />
<script type="text/javascript">
window.onload=function() {
setTimeout(function() {
window.location.replace("index.php");
},3000);
}
</script>
<?php } ?>
You're redirecting to index.php in the msg function, so it does nothing else.
You should do it by pure PHP, set a component in $_SESSION, redirect by PHP to index.php and in the index.php check if the component exists.
I'm doing php that is textbox a value empty it will open a alertbox (I'm using javascript in here )
this is my code
<?php
include('config.php');
if(isset($_POST['submit'])){
$username=$_POST['username'];
?>
<script>
function validate(){
if(document.forms[0].username.value==""){
window.alert("You must enter both values");
return false;
}
}
</script>
<?php
}
?>
<html>
<div><p>Member Profile</p>
<form action="testing.php" method="POST" onsubmit="return validate();">
Username<br>
<input class="user" type="text" name="username" id="username" /><br>
<input type="submit" name="submit" value="register" />
</form>
</div>
</html>
The problem is i have to click 2 times before the alert show
please help me to solve this problem
It's because the script is inside the php if(isset){} block, one click submits the form, which generates the script and then it works the second time.. try this setup instead:
<?php
include ('config.php');
if (isset($_POST['submit']))
{
$username = $_POST['username'];
}
?>
<html>
<head>
<script>
function validate () {
if (document.forms[0].username.value == "") {
window.alert("You must enter both values");
return false;
}
}
</script>
</head>
<body>
<div>
<p>
Member Profile
</p>
<form action="testing.php" method="POST" onsubmit="return validate();">
Username
<br>
<input class="user" type="text" name="username" id="username" />
<br>
<input type="submit" name="submit" value="register" />
</form>
</div>
</body>
</html>
Edit:
I've moved the script tag inside the head tag. I'm not sure if there are any implications for having the script outside but just to be sure I've moved it.
2nd Edit: (OCD is kicking in)
I've added body tags, not sure if you copied and pasted this code but it looked weird to me :)
How come the Javascript isValidEmailAndEqual isn't triggered when submitting the form:
echo("<script language='javascript' type='text/javascript'>
<!--
function isValidEmailAndEqual() {
regExp = /^[^#]+#[^#]+$/;
if((document.subscribe.email1.value.search(regExp) == -1) || !isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
{
//alert(isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
return false;
}
//document.subscribeForm.submit();
return true;
}
-->
</script>");
echo ("<div class='subscribe'>
<h4>Subscribe</h4>
<p>Subscribe to iAndApp's newsletter in order to get information about new and updated iPhone games and iPhone applications, that has been released by iAndApp. </p>
<form action='subscription.php' name='subscribe' method='post' onsubmit='return isValidEmailAndEqual()'>
<p class='formlabel'>Förnamn</p> <input type='text' name='first_name'/><br/>
<p class='formlabel'>Efternamn</p> <input type='text' name='surname'/> <br/>
<p class='formlabel'>E-mail</p> <input type='text' name='email1'/><br/>
<p class='formlabel'>Repeat e-mail</p> <input type='text' name='email2'/> <br/>
<input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>");
Firebug tells me there is no javascript on the page.
I have tried both with and without comments and prefix the closing comment tag.
What I do, which may matter, is loading the below content from a server and than adding to a div-tag. The content is presented, but still the scripts doesnt' work. I have also tried to include the scripts on the main/parent-page (the page loading content and adding it to a div) where I have other scripts that works (triggered by component in the main/parent page though).
Thank you in advance!
It should be
echo("<script language='javascript' type='text/javascript'>
<!--
//your code here, obviously not commented
//-->
</script>
FYI, http://www.w3.org/TR/html4/interact/scripts.html#h-18.3.2
Actually, they are triggered. The following HTML (exactly as outputted by your script) causes the function to trigger in both firefox 5 and chrome. As a sidenote, you probably do not need the html comments (<!-- and -->). That's an practice that is generally no longer necessary since browsers that do not support javascript simply ignore everything within the tags.
That being said if you must have the html comments, comment out the --> to avoid it triggering a JS error (as Kumar explains).
<script language='javascript' type='text/javascript'>
<!--
function isValidEmailAndEqual() {
regExp = /^[^#]+#[^#]+$/;
if((document.subscribe.email1.value.search(regExp) == -1) || !isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
{
//alert(isEqual(document.subscribe.email1.value, document.subscribe.email2.value))
alert('Incorrect entered email addresses. They must be valid e-mail addresses and equal.');
return false;
}
//document.subscribeForm.submit();
return true;
}
-->
</script><div class='subscribe'>
<h4>Subscribe</h4>
<p>Subscribe to iAndApp's newsletter in order to get information about new and updated iPhone games and iPhone applications, that has been released by iAndApp. </p>
<form action='subscription.php' name='subscribe' method='post' onsubmit='return isValidEmailAndEqual()'>
<p class='formlabel'>Förnamn</p> <input type='text' name='first_name'/><br/>
<p class='formlabel'>Efternamn</p> <input type='text' name='surname'/> <br/>
<p class='formlabel'>E-mail</p> <input type='text' name='email1'/><br/>
<p class='formlabel'>Repeat e-mail</p> <input type='text' name='email2'/> <br/>
<input class='inputsubmit' type='submit' value='Subscribe'/>
</form>
</div>