Run a hidden javascript function with in a page - javascript

Hello i am creating a form in which user have to find password to access the other page.As I am hard codding correct password in my if condition.Some users will inspect it and know the password.So I am struggling to hide my if statement or even all JavaScript code from being inspected.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./login/style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="login">
<h1>Login</h1>
<form method="post">
<input type="password" id="password" name="p" placeholder="Password" required="required" />
<button type="button" value="Login" onclick="checkPassword()" class="btn btn-primary btn-block btn-large">login</button>
</form>
</div>
<!-- partial -->
<script src="./login/script.js"></script>
</body>
</html> <script>
function checkPassword(){
if(document.getElementById('password').value == 'layriix'){
location.href = "https://gunsellerlayr.000webhostapp.com/gunseller.html";
} else {
alert('Wrong Password!');
return false;
}
}
</script>

Since, I can't comment. I will try to list out everything in an elucidated manner.
Firstly, answering your main question, there is no way to hide client-side code, that is the JavaScript that you are serving to the browser. You can maybe try obfuscating it, but if it is being served to a client, you cannot really hide it.
Now, what you are attempting to do, is frankly not a thing you should be doing. Passwords on the client side are in no way a method to validate somebody. What you would want to look into is sending this password as a body of https post request, and then doing the validation of the password server side.
Secondly, there also happens to be absolutely no method of preventing a user going to the page, that you are trying to prevent them from going to. Instead of trying to even write the password. They can simply copy and paste it in the url window, or run the location.href in the console.
To put it better, if you want to authenticate somebody, you HAVE to do it server side and secondly you have to prevent access to the page, from users that are not logged in.

You can obfuscate it, but there's no way of protecting it completely.
Tool Link : obfuscator.io

Related

Linking multiple .html files to one .js file

I want to create a simple login and sign up page. I have created them separately using atom, and they were saved inside the same folder inside my computer. I added a css file and was able to link it to both fine.
Now comes the problem.
Note: This is just a fun little project which is why I only used localStorage.
I created a .js file inside my website folder.
//SIGN UP PAGE
function create(){
var un = document.getElementById("username").value;
var pw = document.getElementById("password").value;
localStorage.setItem(username, un);
localStorage.setItem(password, pw);
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}
//LOGIN PAGE
function login(){
if(document.getElementById("usernamel") === localStorage.getItem(username)){
if(document.getElementById("passwordl") === localStorage.getItem(password)){
window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}else{
document.getElementById("errormsg").innerHTML = "Incorrect Password or username";
}
}else{
document.getElementById("errormsg").innerHTML = "Sorry, this account does not exist";
}
}
And made it to add values to the localStorage when create account button is pressed.
<script src="ssjavascript.js"></script>
This is the exact same code I used for both the html files to connect to the js files, and yet, only one works. No matter what, only one of the html files can connect to the js file. I've copied and pasted multiple times. I've tried different tags. I've tried everything I can think of and this is where I beg the internet myself for answers.
To test If it is working, I created an onclick() function to a button and told it to bring me to a separate page. None of it worked, I checked my spelling about 10 times now as well.
Also, Whenever I test the files I open them in browser, so I don't get any error messages. And I can't test them in atom because it just shows the code in a scroll box on view.
Edit:
ssjavascript.js:11 Uncaught ReferenceError: Invalid left-hand side in assignment
at login (ssjavascript.js:11)
at HTMLInputElement.onclick (sslogin.html:22)
This is what I got when clicking the button on the non-working page.
login is referring to the button clicked
ssjavascript.js is referring to the file I used to hold the javascript
sslogin.html is the page file
I don't know if this helps, I've lost track quite a bit.
Full Code:
Sign Up page
<!DOCTYPE html>
<html>
<head>
<title>
Sign Up
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="username">
<div id="passwordtxt">
Password:
</div><input id="password"><br><br>
<div id="security">
For the sake of security,<br>we suggest creating a unique<BR>password specific for this site.<br>
You are also limited to 1<br>account, creating a new one<br>will erase previous data.
</div><br><br>
<input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
Already Have One? Log In
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
Log in page
<!DOCTYPE html>
<html>
<head>
<title>
Log In
</title>
<link rel="stylesheet" href="sscss.css">
</head>
<body>
<div id="logo">
</div>
<div id="logo2">
</div>
<div id="usernametxt">
Username:
</div><input id="usernamel">
<div id="passwordtxt">
Password:
</div><input id="passwordl"><br><br><br><br>
<input type="button" id="submitl" onclick="login()" value="Login"><br><br>
Don't Have an Account? Create One
<br><br>
<div id="errormsg">
</div>
<script type="text/javascript" src="ssjavascript.js">
</script>
</body>
</html>
the javascript file is already up above, and the profile page is just a blank until I actually figure out how to get someone there.
Also, I changed the Javascript to compare the value to localStorage instead of assigning but it seems to still not work as intended.
EDIT:
Thanks for the suggestions. Even if none of them singularly worked, I still wouldn't have fixed my problem if you guys haven't pushed me to do some more searching.
I found out, that using "" saved my variables as strings, so I used '' and it worked exactly how I wanted.
Again, thanks a lot for your help. :)

Use JavaScript to automatically fill in HTML forms

I'm trying to automate a test routine in a web application. My goal is to fill forms, submit them and get the html returned by the application after the form is submited. In other words, i want to simulate what a human would do, but as i need to do this in dozens of forms, i want to do it automatically using pure JS (no frameworks).
For instance, a login form i'm trying to submit looks like this :
To fill the form i'm using a code like this :
document.getElementById('username').value = 'test#test.com';
document.getElementById('password').value = 'mypassord';
But it seems the information is not being correctly filled ; after i run the code above, the form looks like this :
As you can see, the placeholder is still on the inputs and if i submit the form, the input values are not submited. It seems the 'value = 'xxx'' is not effectively filling the field.
It only works if i manually input something on the keyboard after running the code above.
What else can i try ?
Thanks !
Here is the complete code. Run on your browser hope it will works for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="This is text Field" id="txtField">
<input type="password" placeholder="Input password" id="txtPass">
<script>
document.getElementById('txtField').value = 'test#test.com';
document.getElementById('txtPass').value = 'test#123';
</script>
</body>
</html>

How do I make a one-time popup for a webpage?

I have a website and I would like every visitor (or at least every session) to help the site survive. By this, I mean integrating a CoinHive based script so when run once, it will mine (with the user's consent and knowledge) and the popup will automatically close with a popup after this.
For the CoinHive based script, I have the following:
<!DOCTYPE HTML>
<html>
<head>
<title> Sample </title>
</head>
<body>
<form action="?" method="post">
<script src="https://authedmine.com/lib/captcha.min.js" async></script>
<div class="coinhive-captcha" data-hashes="1024" data-key="my_key_here">
<em>Loading Captcha...<br>
If it doesn't load, please disable Adblock!</em>
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>
For the popup displayed, I have:
function myFunction() {
alert("Thank you for helping. You may now proceed.");
}
Finally, my text on the popup will be:
Dear Visitors. In order to keep this site running, you are required to complete a one-time captcha. This will require you to just click it and wait, however, it will increase CPU and power usage, so using a PC is recommended. This should be the only time you see this. Thank you and sorry for inconvenience.
Could someone help make this into a popup where this is required, users won't be able to scroll or exit and this is one-time?
You can use localStorage :
<script type="text/javascript">
var alerted = localStorage.getItem('alerted') || '';
if (alerted != 'yes') {
alert("Thank you for helping. You may now proceed.");
localStorage.setItem('alerted','yes');
}
</script>
More complete answer : Here
I hope to help you.

Get form data and put into a href link?

I'd like to send a SMS on website by
<a href="sms:+12345678?body=form data"
and popup the SMS application on cellphone.
I'd like user to fill the form, javascript get form data and insert into body= in a link.
Does javascript or jquery can do it?
Here is the code I've tried with input
sms-link.min.js is for make SMS links compatible cross devices, but it only works on Android not iOS.
<html>
<body>
<div class="container">
<input type="text" maxlength="5" id="ca_no">
<div class="col-md-12"> Register </div>
</div>
</body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="sms-link.min.js"></script>
<script>
var card_no=document.getElementById('ca_no').value;
document.addEventListener('DOMContentLoaded', (function () {
link = new SMSLink.link();
link.replaceAll();
}), false);
</script>
</body>
</html>
enter data and click link won't work, it will works when click back with same data which already filled.
You can achieve this in following manner:
Put an event listener on button or anchor click that collects the form data and out it in some variable.
Make an ajax call to some server side scripting language with that stored data.
From server side scripting language you can hit the SMS API with the specified parameter using GET or POST method.
Reference
Here is a simple jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ca_no").blur(function()
{
var card_no=$('#ca_no').val();
$("#register").text(card_no); //you can remove this
$("#register").attr('href',window.location.href+'?body=EDS'+card_no);
});
});
</script>
</head>
<body>
<div class="container">
<input type="text" maxlength="5" id="ca_no">
<div class="col-md-12">
Register
</div>
</div>
</body>
</html>
Javascript and jquery can do that. but you need to clear what exactly you want to happen
please specify an example of output

Working with external JavaScript functions and HTML

Thank you in advance for helping me with my issue. I was wondering if someone could explain this for me as i am self teaching about JavaScript JQuery. What i am trying to do is push a message into a variable that is in the parameters of a function. Then i want to display the message using the function by calling it back to the html file that i originally had. So i want write a message in my function and print to my html page. I think i maybe in the right direction here is my source code. I am trying to get use to write with external javascript files as i think it is much cleaner way of working with HTML, CSS3, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src=".js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<form>
<input type="button" value="Click me" id="message "onclick="test();" />
</form>
</body>
</html>
External JavaScript file.
function test(message){
alert("Hello");
}
Use this.value to get the value of the input
<input type="button" value="Click me" id="message" onclick="test(this.value);" />
And then use the message you get
function test(message){
alert(message);
}
To show this message on your page, create an element on the page
<div id="message"></div>
Then, in your test function, instead of alert, set the innerText or innerHTML to the message
document.getElementById('message').innerText = message;
To show message in popup do it this way
Html:
<input type="button" value="Show message in popup" id="message "onclick="test2('hii this is my message');" />
JS:
function test2(message)
{
alert(message);
}
To show message in div
Html:
<input type="button" value="Show message in div" id="message "onclick="test('hii this is my message');" />
<div id="message"> </div>
JS
function test(message)
{
document.getElementById("message").innerHTML = message;
}
Demo : Fiddle
Adding the message: The easy way to do this would be by using jQuery or a javascript library of your choice. Otherwise, you can simply do this:
Create an empty div to display the msg with an id="msg"
and in your javascript function:
document.getElementById("msg").innerHTML = "Your message";
jQuery is much more fun: you can use readily available functions like .html() and .append()
You definitely want to do this, as it is much MUCH cleaner to do so. It also lets you use the same code in multiple places.
Look at this: http://www.w3schools.com/js/js_whereto.asp
(down by 'external JavaScript')
Essentially, you need to save the .js file as an actual file, like filename.js:
<script type="text/javascript" src="filewithcode.js"></script>
where filewithcode.js is the file path to the JavaScript file you have created.
Hope this helps

Categories