How do I create a whitelist for webdev?

  css, html, javascript

So I’m currently working on a web page that I want only certain people to access. I am trying currently to use an API that finds your IP and returns it. Then that IP is set in a variable and after that I have an if statement that checks if the IP matches the whitelisted ones. for some reason it never works. Could somebody explain whats wrong and how I can fix it? I have 3 pages of html already written out and one javascript:

Index.html:


<html>
  <head>
    <!--Libraries-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!--JQuery, because it does everything-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!--End Libraries-->
    <script src="control.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>2TCFC</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div style="position:absolute; left:125px;top:150px">
    <button class="button"><a href="home.html">Home</a></button>
    </div>
  <h1>Welcome to 2TCFC</h1>
  
    <form action="home.html">
    <label for="lname">Username:</label>
    <div style="position:absolute; left 125px; top: 130">
    <input type="text" id="lname" name="lname"><br><br>
    </form>
  </div>

  </body>
</html>

home.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>2TCFC</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1> 2TCFC COMMS</h1>
   
  

    <div style="position:absolute; left:20px;top:85px">
    <button class="button"><a href="lounge.html">Lounge Room</a></button>
    </div>
    <div style="position:absolute; left:18px;top:150px">
    <button class="button"><a href="projects.html">School Projects</a></button>
    </div>
    <div style="position:absolute; left:18px;top:215px">
    <button class="button"><a href="DM.html">DM's</a></button>
    </div>
    <div style="position:absolute; left:18px;top:280px">
    <button class="button"><a href="memes.html">memeys</a></button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.1.1/socket.io.js"></script>
<script src="script.js"></script>
    <div style="position:absolute; left:18px;top:345px">
    <button class="button"><a href="voice.html">voice lounge</a></button>
    </div>

  </body>
</html>

rejected.html:

<h1>UNAUTHORIZED ATTEMPT TO ACCESS PORT</h1>
<h1>ACCESS DENIED</h1>
<h1> GOOD TRY NUB U PROLLY GOT LAST PLACE IN FORNITE BATTLE ROYALE</h1>

control.js:

var yourip = document.getElementsByTagName("body")[0].ip
$.getJSON("http://jsonip.com?callback=?", function (response) {
yourip = response.ip;
$("#ip").text(response.ip);

});

if (yourip=my_ip_that_im_not_gonna_show_u_srry) {
  
}else {
  //  block of code to be executed if the condition is false
}

Thanks in advance! I really appreciate you trying!

Source: Ask Javascript Questions

LEAVE A COMMENT