How would you make an iframe if the value is true in javascript?

Question

I have a javascript login page (I know it's not secure!) How would I make the website create an iframe if the value is correct?

I have already tried window.location.assign but doesn't work! When you add any code it deletes the values in the inputs and puts the values you inserted in the url?

   <div class="box" id="loginbox">
   <h2>Login</h2>
   <form id="form1" name="form1" action="" onsubmit="return checkDetails();">
  <div class="inputBox">
  <input type="text" name="txtusername" id="txtusername" class="info" required />
    <label>Username</label>
  </div>
  <div class="inputBox">
  <input type="password" name="txtpassword" id="txtpassword" class="info" required/>
    <label>Password</label>
    </div>
  <input type="submit" name="Login" id="Login" value="Login"/>

  </form>
  </div>
  <script>var remainingAttempts = 3;


   function checkDetails() {
    var name = form1.txtusername.value;
    var password = form1.txtpassword.value;
console.log('name', name);
console.log('password', password);
var validUsername = validateUsername(name);
var validPassword = validatePassword(password);
if (validUsername && validPassword) {
    alert('Login successful');
  document.getElementById("loginbox").remove();


  var next = document.createElement("IFRAME");
  next.src = 'https://codepen.io';
  next.classList.add("codepen");
  document.body.appendChild(next);
} else {
    form1.txtusername.value = '';
    form1.txtpassword.value = '';
    remainingAttempts--;

    var msg = '';
    if (validPassword) {
        msg += 'Username incorrect: ';
    } else if (validUsername) {
        msg += 'Password incorrect: ';
    } else {
        msg += 'Both username and password are incorrect: ';
    }

    msg += remainingAttempts + ' attempts left.';
    alert(msg);

    if (remainingAttempts <= 0) {
        alert('Closing window...');
        window.close();
    }
}

    return validUsername && validPassword;
  }

 function validateUsername(username) {
   return username == 'GG';
}

 function validatePassword(password) {
   return password == '123';
           }</script>

I want the page to create the iframe and remove the login box.

Why are you okay with it being insecure? Should we ever be doing something so blatantly insecure? — John Conde, Feb 11 '19 at 21:46
It's just a school project to see if you can make a login with javascript. — Ethical38, Feb 11 '19 at 21:47
What exactly is the problem you are having? Your code to append the iframe to the document body is correct, and I have confirmed that it does work as expected. — rh16, Feb 11 '19 at 23:34
When I use the code in a website it returns the url to https://example.org/?txtusername=GG&txtpassword=123&Login=Login -------------------------------------------------------------------> Here is a live example https://best-professor.glitch.me The username is GG the pass is 123 — Ethical38, Feb 12 '19 at 00:04

score 0 · Answer 1 · answered Feb 12 '19 at 20:17

The problem is that you are triggering a form submission when your login button is clicked, which triggers a page load.

<input type="submit" name="Login" id="Login" value="Login"/>

The submit input type type triggers this behaviour. To avoid this, bind to the submit event in the javascript rather than the HTML and use preventDefault() to prevent the page from reloading.

var ele = document.getElementById("loginbox");
if(ele.addEventListener){
    ele.addEventListener("submit", checkDetails, false);  //Modern browsers
} else if(ele.attachEvent){
    ele.attachEvent('onsubmit', checkDetails);            //Old IE
}

function checkDetails(e) {
  e.preventDefault(); 
  // rest of your code

Code taken from this answer, which you should read for more information about form submission events and how to handle them.

How would you make an iframe if the value is true in javascript?

1 Answers1