How to hide the data in source code from the user - javascript

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

Related

How to run a java program through a JavaScript page?

I have a java program to scan vehicle's number plate and i want to call this program through a JavaScript page i.e. When I click a button on my JavaScript page it should execute my java program . I know there are similar questions on stackoverflow, but none was clear enough for a beginner like me to understand. New to JavaScript, any help would be highly appreciated. Thank you in advance.
While the answer of "No" is technically correct based on the phrasing of the question. You may want to read up on AJAX. It is a way for javascript to make a request to your backend code (in this case Java).
Javascript is client side, meaning it is run by the user's browser. Java is running on your server. In order for the client side javascript to interact with the backend Java, you need to make a request to the server.
You can do it with AJAX.
Javascript is client side, meaning it is run by the user's browser. Java is running on your server. In order for the client side javascript to interact with the backend Java, you need to make a request to the server.
A simple example would be something like this
$.ajax({
type: 'POST',
url: 'http://localhost:8080/MyMethod',
data: JSON.stringify({"string" : "anything you want to send to your method"}),
contentType: "application/json",
error: function() {
alert("Failed");
},
success: function() {
alert("Success");
}
});
That depends on where you would like to run it on.
1.client side
The only method to get java codes running directly on client side, is to use a java applet. Write an applet,write your html properly, then you are all set.
Or, you may want a wasm/javascript compiler for java.
2.server side
you should setup a mechanism letting your frontend to raise the backend.
for frontend, you should be able to send certain requests. you can choose http request, aka XHR/AJAX, or, you can choose web socket. they are similar things.
For backend, if you let your httpd handle the very request, then you should have your httpd notify your code for that. The solution if different for different httpds.
If you want to handle the request directly, then you can just listen to the very port and do the regular things. You should be responsible for security issues.

What is the best way to send secure parameter in Ajax Request?

I send a ajax request with this function:
function myFunc(x)
{
$.ajax({
url: retrive.php,
type: 'POST',
data: 'data=' + x,
success: callback
});
}
I call the function with a integer parameter.for example:
myFunc(20);
myFunc(25);
can a hacker change the parameters of myFunc() ?
If he can, How to prevent change value?
What is the best way to send secure parameter?
** EDIT: **
My javascript codes have a variable called Score.
This variable is incremented by one:
if(condition)
{
Score++;
}
When the game is over, I send variable with Ajax.
And this variable with the game code is stored in the database.
if(game_over)
{
myFunc(20, Score); // game code, score
}
But this values can be changed by a user.(by console of chrome and firebug)
1. What is the solution?
2. What is the name of this type of attack? Is Xss?
Yes, a hacker sure can, and easily too. For example, by using Chrome Developer tools, one can inject or modify your script. As a motivating example, I routinely do this when I order a pizza to have it delivered a little faster ;)
So, you should not rely on JavaScript authentication. Instead, have your server verify or reject the parameters, or use some sort of challenge/accept system between the server and the JavaScript.
Here are some more ideas you can try: Ajax post request security
Can a hacker change the parameters of myFunc() ?
Yes he can.
If he can, How to prevent change value?
You can't prevent it but you can verify the parameters within server side code.
What is the best way to send secure parameter?
What you can do is you can use mcrypt_encrypt() function for encrypting your string or data and while receiving data you can use mcrypt-decrypt() function else you can use your other encoding ways of PHP
You can check PHP mcrypt - Complete encryption and decryption of data
It is the same as to send params via POST or GET over HTML form.
Its impossible secure it.
You can only use some encrypt method but it is not much secured because on server side you need decrypt it. And in final of this solution, its impossible to encrypt it at 100% secured.

POST value to cgi file but not update the web page

I have a web page with a switch (html & CSS) and a toggle function (JS) which changes the appearance of the switch as it is clicked. The toggle function has a 'standby' variable which tracks the status of the switch.
I also have a form (JS) which POSTs the value of standby to a cgi script (python) which will control some lights. That all works!
Except, I do not want the cgi file to respond with a new web page or even reload the current web page - I'd like to keep the page as it is - which does not seem possible with cgi!
I'm guessing cgi is the wrong approach (& this is another dumb question!)
Thanks in advance...
You can send your Form using Ajax. The easiest way is to use Jquery.
Here is a nice tutorial:
http://hayageek.com/jquery-ajax-form-submit/
You’ll need to make your request asynchronously using JavaScript.
Have a look at the XMLHttpRequest object or use a wrapper function like jQuery’s $.ajax method (especially if you want to support older browsers).
Please see this answer for an example of how to do a POST request using the XMLHttpRequest object.
Thanks for all the answers - I appreciate you putting me on the right track. I used JQuery and ajax as suggested and it is working - simple when you know how!
This is in index.html:
$.ajax({
type: "POST",
url: "/cgi-bin/standby.py",
data: {status: standby}
});
and in standby.py:
data = cgi.FieldStorage()
data = data["status"].value

How to send a request from JavaScript without base URL?

I'd like to send a request to a simple URL from my JavaScript, so that the base URL will NOT be added to the request URL. For example, the request should be sent to the following URL (without the base URL):
SAPEVENT:SOME_TEXT?2
I used the jQuery's $.ajax function in order to implement it, but without success.
Here is a JSFiddle for it:
http://jsfiddle.net/txb6tdjj/2/
The JS code:
function sendEvent(id) {
$.ajax("SAPEVENT:SOME_TEXT?" + id);
}
sendEvent(2);
I see the following error in the JS console:
XMLHttpRequest cannot load sapevent:SOME_TEXT?2. Cross origin requests
are only supported for HTTP. (jquery-2.1.0.js:8556)
I even set the parameter crossDomain: true, but it didn't help:
http://jsfiddle.net/auhx2v2v/3/
The JS code:
function sendEvent(id) {
$.ajax({
url: "SAPEVENT:SOME_TEXT?" + id,
crossDomain: true
});
}
sendEvent(2);
It ends up with the same error.
It works correct in the HTML like this:
http://jsfiddle.net/1f6npcn2/2/
The HTML code which works correctly:
<FORM action="SAPEVENT:PRESS_ME">
Click on me to send an event!
<INPUT TYPE="submit" VALUE="Press me to send an event!"/>
</FORM>
But I need to implement it in JavaScript, so that a request parameter can be set dynamically in the URL in JavaScript.
Do you know how to implement it in JS so that the request will be sent to the URL SAPEVENT:SOME_TEXT?2 without the base URL?
Additional information about used browsers: The error is shown only in Chrome. IE and Firefox do not show an error, but they also don't send the request.
Additional information for the SAP guys: I know there is a SAP Note 191908 which states that it's impossible, but a colleague has confirmed that he has successfully tested such functionality in an HTML page which used the same code as I copied above (see the HTML code above and http://jsfiddle.net/1f6npcn2/2/). So the SAP Note is wrong. I know how I can implement this functionality in HTML, but I don't know how I can implement it in JS. That's the problem.
I have no experience of working with SAP but I think you are missing a crucial part here.
In the samples you gave SAPEVENT:CLICK_ON_ME isn't a http url at all but rather it would invoke whatever handles the SAPEVENT-protocol on the local computer with the parameter CLICK_ON_ME. I'm guessing that you have some sort of client installed on your computer that does this for you (how do I create my own URL protocol? (e.g. so://...) contains some more information on how this is accomplished).
The reason your error-message talks about crossdomain-stuff is probably because it tried to interpret it as host:port.
So in other words, since this isn't a http url there isn't a webserver working on the other end so you can't do ajax-requests against it.
The SAPEVENT: stuff is not handled by any web server. The SAP GUI uses an embedded Internet Explorer and registers a custom protocol handler. There is no use in trying to use ajax techniques since you need to reach the container of the client, not the server. To reiterate: You do not want to "send a request" anywhere, you want to convince the browser that a certain local navigation event happened". SAP Note 191908 contains more information on that topic.
No idea about SAP Views, but to me this seems like a usual behaviour on webservers. I presume that SAPEVENT gets parsed by the server during the runtime to a more regular URI. Only the views get parsed, not the resources like CSS and JS, so the SAPEVENT placeholders in the JS file don't get parsed and the JS interpreter will not accept it as a valid URI. One of the common ways of solving this, is to create either a hidden form in the HTML or just a hidden input containing the server-generated values you are needing. For example
SAP View:
<input type="hidden" id="my_event_url" value="SAPEVENT:PRESS_ME">
JS:
function sendEvent(id) {
$.ajax({
url: $('#my_event_url').val() + '?' + id,
crossDomain: true
});
}
sendEvent(2);
I finally implemented it in JavaScript. Thanks go to this web page.
I modified the solution which was shown in this web page in order to add a link instead of a form in JavaScript.
This is the working solution in JS:
var targetUrl = "SAPEVENT:SOME_TEXT?2";
function sendSapEvent(targetUrl) {
var link = document.createElement("a");
link.setAttribute("style", "display:none;");
link.setAttribute("href", targetUrl);
// Move the click function to another variable
// so that it doesn't get overwritten.
link._click_function_ = link.click;
document.body.appendChild(link);
link._click_function_();
}
sendSapEvent(targetUrl);
You can find it also in this JSFiddle: http://jsfiddle.net/708r95p0/6/
It works! It sends a request to the URL sapevent:SOME_TEXT?2
I decided to use a link instead of a form element, bacause I couldn't pass the request parameter using a form.

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

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.

Categories