Is there any way to hide javascript functions from end user? - javascript

I want to user jquery ajax calls, for example;
function addnewteacher(){
$.ajax({
type: "POST",
url: "/actions/dboss/newteacher.php",
data: "uname=" + $("#newteacheruname").val() + "&upass=" + $("#newteacherupass").val() + "&name=" + document.getElementById("newteachername").value + "&surname=" + document.getElementById("newteachersurname").value + "&mobile=" + document.getElementById("newteachermobile").value + "&email=" + document.getElementById("newteacheremail").value,
success: function(html){
$("#response").html(html);
$("#response").dialog("open");
}
});
}
As you can see, i have to give away the data part to end user. But i want to encrypt it with a hidden function then decrypt it on server so probably no one can send and malicious code to server just because that code wont make any sense after decryption if not properly encrypted. But i have to hide the function from user or make the function work only for me?
Thanks for any help/idea

You cannot hide JavaScript code. It gets downloaded to the client and executed there. You can obfuscate it, push it way deep inside, whatever you want, but a determined user can still find it. Your security really needs to be on the server, where you have complete control, not on the client, where you have no control at all.
Make sure calls to /actions/dboss/newteacher.php are authorized and verify they are coming from valid sources on the server. Security through obscurity is not security.

No. You can obfuscate them by minifying the code and that sort of thing, but you should never ever assume that your javascript is unreadable.
You need to validate and sanitize any user-submitted data on the server end.

No, sorry that's not possible. Everything you put in javascript will eventually be visible to the user. No matter how hard you try to minify/obfuscate the code, suffice to install FireBug and the password will popout at user eyes like a balloon.

Everything JavaScript does can be done by a user. Even if you think noone will even understand you code, he doesn't have to. He can just execute it and see what it gives. JavaScript should only be used as a way to make the UI more convenient, not to secure anything. Basically, what you want to is not to write a password in the JavaScript and check it in here when the user types it but you want to send the password written to the server that either says "yes" or "no". If you check a form with JavaScript, you have to recheck it on the server-side because JavaScript could be disabled and so on. JavaScript on its own isn't secured (as client-side language of course).

You can use something like Google Closure to obfuscate the Javascript code, but I'd really look into why you need to hide this in the first place since they will be messing up their own data. As long as you don't rely on the data being valid for server side functionality (such as injecting the input directly into SQL) you should be ok.

You should be trying to hide keys, not the function that signs the content.
I've seen a number of JS systems that do something like this:
<script>// Runs first
(function () {
// Look for a key in the URL like 'http://mysite.com/my/path?my=params#;key=abcd...
var key = document.location.hash.match(/;key=([^;]+)/)[0];
// Make sure other code on the page can't retrieve the key.
// This is analagous to a program zeroing out its argv to prevent
// key retrieval via /proc.
document.location = "#"; // Does not cause reload.
// define signature algo and export to whatever scope is appropriate.
...
})();
</script>
Obviously, this only works with single-use keys.

Related

how to hide js value from inspection on web

i am passing a secret code to the front end, from my backend. I want to store the value in my JS script, like so:
<script>
var code = '<%= code %>'
</script>
then when the user types in the code, i want to run a check to make sure it matches with the code i passed through. I'm doing this so it eliminates the struggle of going to the backend and refreshing again.
However, when i right click, and inspect element, i can actually see the code in my web browser, which is a problem. Is there a better way to do this, or a way to hide it?
The browser works for the user not the site author.
You cannot give something to the browser and expect it to keep it a secret from the user.
Do the check server-side. Live with the extra HTTP request.
There is no way to have "secret" Javascript code run in the browser. The closest thing to that would be to use a minified/uglified script, but security through obscurity is also not a valid solution.

How to send a variable from node server to javascript client on page load?

My webapp is 99% static except for the fact that on page load, I want to send to the client their username if they are logged in and the name of the room they are connecting to if they specify that in the URL. These two variables need to be accessed in the client-side Javascript. So I've been trying to figure out what feels like a simple task but I am having little luck.
Use templating engine.
Problem: Overkill because I only need it for one/two variables on an otherwise static page and I need to access it in the Javascript, not the HTML
Make an AJAX request after page load
Problem: Causes flickering because first the page loads and then the DOM updates a second or two later because have to wait for the request to be sent and received. Also it's not efficient because it requires a second request/response.
Use WebSockets
Problem: Same problem as above.
Send it in the header information on page load
Problem: Can't access header information in Javascript unless you do a weird hack which only works as a separate AJAX call. Could just use #2 for that.
So what I ended up doing was using cookies and this works, 100%. There's actually no problems with it currently I just think the code is very ugly and fragile and I'm looking for a better way. Here's a snippet of what the cookie solution looks like:
app.get('/room/:roomName', function(req, res) {
res.clearCookie('room');
if (req.isAuthenticated()) {
res.cookie('username', req.user.username);
} else {
res.cookie('username', '');
}
var roomName = req.params.roomName;
if (roomNameToRoom.hasOwnProperty(roomName)) {
res.cookie('room', req.params.roomName);
}
res.sendFile(path.join(__dirname, '../public/index.html'));
});
As you can see I grab the username from the request and validate the room and if it's valid, I send that back. I then parse the cookies with RegEx on the client side (very messy) and use those two variables in Javascript functions. I'm looking for alternative solutions that would allow me to send this all in one request while avoiding a lot of complexity and messiness.
Redirect to special URL, for example index.htm?var1=5&var2=6 and use location.search.substr(1).split('&') in JS.
Use embed js-file in html, for example <script src='ajax.js'></script>. In this example ajax.js is not cached and contains something like this:
window.var1 = 5;
window.var2 = 6;
It can be dynamically generated.
Use cookies.
By the way I don't think that using templates is bad. You can use javascript templates. It shoudn't be performance issue because templates are fast and you need execute just only one template. I would use templates.

Google Apps Script - how to login and fetch data?

Intro:
I am pretty inexperienced, but recently I have been trying to access some data from a website using Google Apps Scripts. However, to access the data, I must be logged into that website. There have actually been many posts about similar issues before, but none of them were very helpful until I came to this one: how to fetch a wordpress admin page using google apps script. The accepted answer gave a method for saving the cookies and sending them out again in the second request. I basically copied and pasted the code into my own GAS file. Since the problem in that post was logging into Wordpress, I tried that first, and it worked. I had to remove the if statement checking for the response code because 200 was being returned even when I entered the correct combo. I don't know if that was just an error in the post's code or what. In any case, I verified that the second request I made returned information as if I was logged in.
Details about specific site:
The actual website that I am trying to log onto has a some kind of weird hashing method that I haven't seen on any other login pages. When you click submit, the password changes to something really long before going to another page. The opening form tag looks like this:
<form action="/guardian/home.html" method="post" name="LoginForm" target="_top" id="LoginForm" onsubmit="doPCASLogin(this);">
As you can see, it has an "onsubmit" attribute, which I believe will just run "doPCASLogin(this);" when the form is submitted. I decided to play around with the page by just entering javascript into the address bar. What I found was that doing a command like this (after entering in my username and password):
javascript: document.forms[0].submit();
didn't work. So I dug around and found the function "doPCASLogin()" in a javascript file called "md5.js". I believe md5 is some kind of hash algorithm, but that doesn't really matter. The important part of "doPCASLogin()" is this:
function doPCASLogin(form) {
var originalpw = form.pw.value;
var b64pw = b64_md5(originalpw);
var hmac_md5pw = hex_hmac_md5(pskey, b64pw)
form.pw.value = hmac_md5pw;
form.dbpw.value = hex_hmac_md5(pskey, originalpw.toLowerCase())
if (form.ldappassword!=null) {
form.ldappassword.value = originalpw;
}
}
There is some other stuff as well, but I found that it didn't matter for my login. It is pretty obvious that this just runs the password through another function a few times using "pskey" (stored in a hidden input, different on each reload) as a key, and puts these in inputs on the original form ("dbpw" and "ldappassword" are hidden inputs, while "pw" is the visible password entry input). After it does this, it submits. I located this other "hex_hmac_md5()" function, which actually connects to a whole bunch of other functions to hash the password. Anyway, that doesn't matter, because I can just call the "hex_hmac_md5()" from the javascript I type in the address bar. This is the working code that I came up with, I just broke the line up for readability:
javascript:
document.forms['LoginForm']['account'].value="username";
document.forms['LoginForm']['pw'].value="hex_hmac_md5(pskey, b64_md5('password');)";
document.forms['LoginForm']['ldappassword'].value="password";
document.forms['LoginForm']['dbpw'].value="hex_hmac_md5(pskey, 'password')";
document.forms['LoginForm'].submit();
Wherever you see "username" or "password", this just means that I entered my username and password in those spots, but obviously I have removed them. When I discovered that this worked, I wrote a small Chrome extension that will automatically log me in when I go to the website (the login process is weird so Chrome doesn't remember my username and password). That was nice, but it wasn't my end goal.
Dilemma:
After discovering all this about the hashing, I tried just putting in all these values into the HTTP payload in my GAS file, though I was skeptical that it would work. It didn't, and I suspect that is because the values are just being read as strings and the javascript is not actually being run. This would make sense, because running the actual javascript would probably be a security issue. However, why would it work in the address bar then? Just as a side note, I am getting a 200 response code back, and it also seems that a cookie is being sent back too, though it may not be valid. When I read the actual response, it is just the login page again.
I also considered trying to replicate the entire function in my own code after seeing this: How to programmatically log into a website?, but since "pskey" is different on each reload, I think the hashing would have to be done with the new key on the second UrlFetch. So even if I did copy all of the functions into my GAS file, I don't think I could successfully log on because I would need to know the "pskey" that will be generated for a particular request BEFORE actually sending the request, which would be impossible. The only way this would work is if I could somehow maintain one page somehow and read it before sending data, but I don't know how I would do this with GAS.
EDIT: I have found another input, named "contextData", which is the same as "pskey" when the page is loaded. However, if I login once and look at the POST request made using Chrome Developers tools, I can copy all the input values, including "contextData", and I can send another request a second time. Using javascript in the address bar, it looks like this:
javascript:
document.forms['LoginForm']['account'].value="username";
document.forms['LoginForm']['pw'].value="value in field that browser sent once";
document.forms['LoginForm']['ldappassword'].value="password";
document.forms['LoginForm'['dbpw'].value="value in field that browser sent once";
document.forms['LoginForm'['contextData'].value="value in field that browser sent once";
document.forms['LoginForm'].submit();
I can sign into the website as many times as I want in this manner, no matter what "pskey" is, because I am submitting everything directly and no hashing is being done. However, this still doesn't work for me, so I'm kind of stuck. I should note that I have checked the other hidden input fields and I can still log in successfully with the javascript above even after clearing every input in the form.
QUESTIONS:
-was I correct in assuming that the code I was sending was being interpreted as a string?
-why is the new code below that I just recently wrote not working?
-for future reference, how would I use GAS to sign into a site like Google where a randomly generated string is sent in the login form, and must be sent back?
function getData() {
var loginURL = 'login page';
var dataURL = 'page with data';
var loginPayload = {
'account':'same as in previous code block',
'pw':"same as in previous code block",
'ldappassword':'same as in previous code block',
'dbpw':"same as in previous code block",
"contextData":"same as in previous code block",
};
var loginOptions = {'method':'post','payload':loginPayload,'followredirects':false};
var loginResponse = UrlFetchApp.fetch(loginURL,loginOptions);
var loginHeaders = loginResponse.getAllHeaders();
var cookie = [loginResponse.getAllHeaders()["Set-Cookie"]];
cookie[0] = cookie[0].split(";")[0];
cookie = cookie.join(";");
var dataHeaders = {'Cookie':cookie};
var dataOptions = {'method':'get','headers':dataHeaders};
var dataResponse = UrlFetchApp.fetch(dataURL,dataOptions);
Logger.log(dataResponse);
}
some kind of weird hashing method that I haven't seen on any other login pages
This login uses the well-known MD5 hashing algorithm from a base-64 encoded password (of note is that it uses the same password, but lowercased, for what seems like database access dbpw and has an option of sending the plaintext (!) version of the password for LDAP login).
know the "pskey" that will be generated for a particular request BEFORE actually sending the request, which would be impossible
pskey simply stores the key used in computing HMAC signature. There is nothing stopping you from hardcoding it, reading from disk, generating it or fetching from remote whenever and wherever you want (obviously, before the computation).
running the actual javascript would probably be a security issue
Although running untrusted JavaScript code is indeed a security issue, this is not what happened at all in your case. See next point for detailed explanation why. What you should've done, is to actually run the hashing functions (in 2020, Utilities service provides everything you need in that regard) before assigning them to loginPayload properties.
was I correct in assuming that the code I was sending was being interpreted as a string?
Everything you put in quotes (single or double) is treated as a sequence of characters. That's not how Google Apps Script works, this is how ECMAScript (on which it is based) is designed to work. In order to execute the functions "inside" the string, you need to use eval, but please never do that.
Now, in 2020 it took me some time to remember what javascript: protocol meant. This is the only reason why your code executed in the first place - you explicitly told the browser that what follows is JavaScript code to be executed. If someone sees this: please, don't use that ever again.
Google Apps Script is a server-side code and is not executed in the browser environment, therefore, even if you did use the protocol, it would have no effect because no evaluation took place.
why is the new code below that I just recently wrote not working?
Because of all the reasons explained above.
for future reference, how would I use GAS to sign into a site like Google where a randomly generated string is sent in the login form, and must be sent back?
If you are talking about the OAuth / OAuth2.0 authentication protocol, here is an officially endorsed library dedicated for exactly this purpose.

pass data using value of div (security)

is it safe to send the data(text) of div to the server via ajax? or get the url of an <a> tag and use it?
ex.
<div id="get-value">Some Value</div>
<button id="send" data-url="process.php"></button>
javascipt
$('#send').click(function() {
$.ajax({
url: this.dataset.url,
dataType: 'json',
type: 'post',
data: {
value: $('#get-value').text(),
}
});
});
What if I edit the text in the div and the data-url of button in the developer tools and click the button after?
It is safe to do this.
When working with Javascript and AJAX, you are subject to this inherent problem: it can always be modified. The best way to minimize the issue is to make sure that no secure operations occur on the client, and instead let the Javascript do the display and submit.
In this case, you can leave it as it is. As long as you are sanitizing the user input on the server side then you are doing most all you can (aside from obfuscation, which is rarely a good idea in Javascript).
In my opinion, and I'm no security expert but this is how I deal with things, you should always validate and sanitise user input on the server side. If a user can submit data, they can tamper with it, so it is not safe until you have cleaned it up and made sure it is safe on the server.
I don't know what you are using for your server side, but most frameworks these days have built in ways of sanitising user input before committing it to, say, a database. I would look into the documentation of your server side language/framework to find out the best way to handle incoming user input safely.
is it safe to send the data(text) of div to the server via ajax? or get the url of an tag and use it?
Yes.
Note, however, that since it is coming from the browser, it is user input and should be treated as such. You can't assume that data you gave to the browser with the expectation that it would be sent back to the server isn't going to be tampered with.
Don't use such for things like authorisation. You can't trust the browser to tell you if the user is an admin or not. You need to have proper authentication and then do the authorization for the user on the server.
Don't use it without suitable escaping for the purpose. e.g. Don't stick it into SQL without using a bound argument. Don't stick it in HTML without converting special characters to entities (or using a HTML parser with a white list filter to clean out XSS risks).

How to hide the data in source code from the user

As a side project to learn Web Development, I'm writing a web app in Javascript that allows my fellow classmates type in our Class ID # to a search field. If they enter the correct Class ID, they will automatically be redirected to our Google Groups page. The only problem I'm seeing is that since I'm running multiple Google Groups for different classes that I'm taking, I don't know how to hide the javascript code.
Example in Pseudocode:
If (input === 12345){
redirect to (LinkToClass1GoogleGroupsPage.com)}
Else If (input === 12344){
redirect to (LinkToClass2GoogleGroupsPage.com)}
The problem here is if they right-click and view source code, they will clearly see what inputs I'm looking for. I'm new to Web Development and I would like to know what's the best way to implement something like this.
You cannot hide JavaScript code. If you have a secret, keep it on the server.
Anything on client-side environment is readable unless it is encrypted - what doesn't works with JavaScript. You can use a server-side environment to deal with that without leaving JavaScript with node.js, look this post.
Use an ajax request(jQuery or pure) to a node.js service or any other server-side language of your choice and keep those actions out of user's sight. This is safer, right and maybe only way to do that.
You cannot literally hide the data in JavaScript, unless you use a server-side language to redirect.
What you can do however is obfuscate your code, there are tools to help you do this.
http://javascriptobfuscator.com/
"LinkToClass2GoogleGroupsPage.com"
Results in
var _0x2ec6= ["\x4C\x69\x6E\x6B\x54\x6F\x43\x6C\x61\x73\x73\x32\x47\x6F\x6F\x67\x6C\x65\x47\x72\x6F\x75\x70\x73\x50\x61\x67\x65\x2E\x63\x6F\x6D"];_0x2ec6[0];
Probably the most secure way for this to be done would be to have a Server Side function that can be called via Ajax to return the link.
What type of Server Side code you use depends on your preferences.
For example ASP.NET Web Service, PHP, ASPX Web Methods.
Below is example Ajax Request Code using jQuery :
var o = new Object();
o.ID = input;
var x = JSON.stringify(o);
$.ajax({
url: 'SOME URL', //Path to the Server Side function (i.e. Php / ASPX Web Method / Web Service)
type: 'GET',
dataType: 'JSON',
contentType: 'application/json;charset=utf-8;',
data: x,
success: function (data) {
//Method returned without issue
redirect to (data.d)
//data is a JSON object that contains a "d" property, if your function returns a string then d will be the value of the string.
},
error: function (ajaxrequest) {
//Ajax call received an error.
}
})
This cannpt be done yet. HTML5 might have DRM implementations in the future but this will also depend on browsers opting in for this feature (Mozilla are against it for example).
Disable right click and ctrl button thats all you can do! :D

Categories