JS functions self-executing in incognito mode?

Question

I load a javascript at the end of my html page with a function loginsucces(), which should be executed after a successfull login redirect to the page. It works perfectly in default browser mode(chrome), however when i load the page in incognito mode, it executes the function while the page is loaded the first time. Due to this behavior i got syntax errors because the php variables are not initialized yet. I know i can get around that somehow but i am curios to know why is the js function is executed in incognito mode while first-time page load and how can i avoid this?

<script>
function loginsuccess(){
  if(!<?php echo isAuth() ?>){ return; }

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
          var json = JSON.parse(xhr.responseText);
          ...    
      }
  }
  xhr.open("GET","http://myurl.com/api/users/"+<?php echo currentUserId()?>,true);
  xhr.send();
}
</script>

perhaps try wrapping your code in an IIFE or waiting until document ready before executing — haxxxton, Mar 10 '18 at 07:42
*I got syntax errors because the php variables are not initialized yet.* that's impossible! You get syntax errors because your output is wrong. Whats `isAuth()` or `currentUserId()` output if not logged in? Nothing I'm guessing. — Lawrence Cherone, Mar 10 '18 at 07:52
@LawrenceCherone Yes, thats what i meant. And because i got nothing i got a syntax error: `Uncaught SyntaxError: Unexpected token ;` on the line `xhr.open("GET","http://myurl.com/api/users/"+,true);` — flaskoln, Mar 10 '18 at 07:56
As shown below, perhaps just wrap all your js code which calls authenticated stuff in an if statement. As if the user is not logged in you don't need to output it anyway. — Lawrence Cherone, Mar 10 '18 at 07:59

Lawrence Cherone · Accepted Answer · 2018-03-10T08:22:14.720

You should perhaps do this instead.

<script>
<?php if (isAuth()): ?>
function loginsuccess(){
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
          var json = JSON.parse(xhr.responseText);
          ...    
      }
  }
  xhr.open("GET","http://myurl.com/api/users/"+<?php echo currentUserId()?>,true);
  xhr.send();
}
<?php endif ?>
</script>

Alternatively to keep things separate and allow you to move the code out later on, instead of it being inline, is to define the state beforehand in a global var.

This could be put in the head of the document.

<?php if (isAuth()): ?>
<script>
var user = {
  loggedIn: true,
  userId: <?php echo currentUserId()?>
};
</script>
<?php endif ?>

Now you don't have PHP vars in your js which will allow you to move it out into a .js file if you wanted.

<script>
function loginsuccess() {
  if (typeof user === "undefined" || user.loggedIn !== true) {
    return
  }
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function(){
      if (xhr.readyState == 4 && xhr.status == 200){
          var json = JSON.parse(xhr.responseText);
          ...    
      }
  }
  xhr.open("GET","http://myurl.com/api/users/"+user.userId,true);
  xhr.send();
}
</script>

np, though think about organising your code so it not inline or relies on php variables. because you might want to move that code out into a .js file in future. — Lawrence Cherone, Mar 10 '18 at 08:07

JS functions self-executing in incognito mode?

1 Answers1