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).
Related
Someone using firebug or chrome console could intercept the submitted form data and then switch some of the values, eg.
Sender's ID . I was wondering if I can make data sent less human readable so the attacker won't want to deal with it.
I saw something like this:
$.ajax({
type: "POST",
url: 'http://www.example.com/widget_category.php',
data: "p=eyJUcmF6ZW5pUG9qYW0iOiIiLCJJREdydXBhIjoiMzA3IiwiSURQb2RHcnVwYSI6MzA3LCJQcm9kYXZhYyI6IiIsIk9rcnV6aSI6W10sIk9wc3RpbmUiOltdLCJDZW5hT2QiOi0xLCJDZW5hRG8iOi0xLCJTdGFuamFQcmVkbWV0YSI6W10sIk5hY2luaVBsYWNhbmphIjpbXSwiRmlsdGVyIjpbXX0=",
dataType:'html',
success: function(res){
$('#limwidget').empty().append(res);
}
});
Edit:
I see this question was accepted bad. I just want to point out that i am validating all data received on the server side and there should be no question about that, but I just wanted to hide the real sensitive data from database ( and maybe make them also timestamp signed in some manner and different from user to user).
I realize that maybe this problem should be considered on server-side(php), that all sensitive data should be swaped on server-side instead of client-side, so we can avoid security by obscurity.
Thanks for clarifying
One more edit:
I see now that output from atob function from the example given
eyJUcmF6ZW5pUG9qYW0iOiIiLCJJREdydXBhIjoiMzA3IiwiSURQb2RHcnVwYSI6MzA3LCJQcm9kYXZhYyI6IiIsIk9rcnV6aSI6W10sIk9wc3RpbmUiOltdLCJDZW5hT2QiOi0xLCJDZW5hRG8iOi0xLCJTdGFuamFQcmVkbWV0YSI6W10sIk5hY2luaVBsYWNhbmphIjpbXSwiRmlsdGVyIjpbXX0=
is
{"TrazeniPojam":"","IDGrupa":"307","IDPodGrupa":307,"Prodavac":"","Okruzi":[],"Opstine":[],"CenaOd":-1,"CenaDo":-1,"StanjaPredmeta":[],"NaciniPlacanja":[],"Filter":[]}
so I guess that it's useless to start hiding data on client-side.
You can encode your data to base64 with atob() and btoa(), and then decode it in the server. Be aware that doing this will only obfuscate your code, and won't make it 100% secure.
Here's some info about Base64 encoding for JavaScript.
https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
You should forget about having sensitive logic on client side and expect to be safe, there is no way to do that.
Even in case you "ofuscate" the output, that evil user could put a breakpoint before the ofuscation and change values at will.
If you concern is that someone could change the SenderID then, assuming is valid for your scenario, you could validate on server side that SenderID posted is the same that initiated request.
They can change anything on the front end even with this change. Everything sent to the client can be read, including any encryption code you use. It is harder potentially but you are confusing obfuscation for security.
Obfuscation will not solve the problem.
You should make it your priority to get your server side code to validate and sanitise the data that comes from the front end.
http://en.wikipedia.org/wiki/Security_through_obscurity
Base64, the content will be a bit longer, but widely supported, there're also command line tools to decode it.
I think it's safest to just assume that all data from the client is evil and add code on your server to validate and authorize where appropriate. You could encode your data and then decode it on the server, but JavaScript encoding/encryption is less useful than you might want. The attacker could always just open the dev console in the browser, inspect your code, and run whichever encryption method you use on their new malicious data.
I was recently messing with a django local server project and I had a input like
<form....{% csrf_token %}
....
<input type="text" value="foo" readonly />
....
</form>
Now the value of the input should stay the way I want it to ("foo"), but I used google chrome inspect and was able to change the value of the readonly input and pass the new value to the server, which saved the bad value.
So I have a few questions:
What are the general rules or mental checklists to prevent security risks like this?
Could I use the JavaScript console and corrupt data like this as well? Update: YEP.
So do I have to basically do all my checks on the server side?
If no to 3, what are the client side validations that are protected from html/js inspectors?
Edit:
I'm guessing from the answers so far, it's yes to 3. So should I still bother with client side security/checks? Will they actually make me more secure or is it just a false sense of security (which is bad)? Should I do client side checks to possibly save some checks on the server side, so my performance might be better? Basically: How much client side checking should I do?
You cannot reply on Javascript or anything on the client side for security. Just ensure that your server is secure.
For example you can just telnet to the port and send the appropriate data to the server. This will thwart and checks via Javascript (or any other technology( on the client side.
Just use Javascript to make the users experience on the client more enjoyable and more responsive. Do not use it for security.
Ask yourself why you needed that readonly value in the first place. Presumably, it was your code that generated it, when the user first requested the form. So, what was available to your code when the user requested the form that is not available when the user submits it back? There shouldn't be anything, which should lead you to the conclusion that that field can just as easily be generated on submit, without it needing to appear in the form at all.
Your server code must be the final authority, it simply cannot rely on the quality of validation that the client has done. View all clients, be they HTML or otherwise as prone to the effects of both devious users and fallible coders.
Never believe the data sent by a user (cookies, session,parameters in HTTP request,...). All data send by users can be modified.
Yes of course
It is still to be done.
I have a javascript in which I use $.post() command to post variables to a php file, I have the URL of the php file hardcoded in the same .js file.
I just want to know if it's possible for someone to inject $.post() command from address bar and send invalid data to the PHP file?
if yes, how to prevent or how to detect those invalid data?
Yes, anybody who knows how to code in JavaScript could send an AJAX POST request to your PHP file.
As for how to detect the invalid data, that depends entirely on what makes the data invalid. You'll simply need to check the POST values against whatever criteria you're expecting valid data to meet, and then ignore any requests that don't meet those criteria.
Yes, it's very simple. Attacker can modify, add or remove any JavaScript running in the browser, modify DOM, etc. Tools like Firebug allow anyone to call arbitrary JavaScript from the console. Moreover one can simply use curl to run your server and send arbitrary data.
if yes, how to prevent or how to detect those invalid data?
You must ensure data validity and integrity on the server side. Also you might want to add some security on the server side and do not depend on some JavaScript function being "hidden".
Sure, by prepending the script with the javascript: scheme you can do pretty much anything you want to a site:
javascript:$.post(/* stuff here */)
You should always validate your incoming data on the server side, because not only may someone use the javascript on your site to do this, but they may use other tools, like curl or whatever else that will let you make http requests.
I haven't found an answer to this, and since I'm pretty new to JS, I don't know if it's even possible.
I have a regular HTML form, where the only field is a user types in a URL (any URL) and clicks submit.
The URL will "be sent" to JS code that stores this URL in some variable, I guess. Basically, I need to be able to call getElementsByTagName() on any URL submitted by the user.
My point is to count up the number of times a URL contains a specified element, which I do know how to do :)
How do I interpret a URL submitted through a form by someone and then take that URL and be able to perform methods (such as getElementsById) on it? I want to return the count of the number of elements to the user.
Any ideas? Can this all be done in JS? Is this possible?
When you say "URL," I assume you are talking about the actual webpage and not the url string. In other words, you want to load the entire DOM into a javascript variable and then parse it with getElementsByTagName(), etc. Javascript cannot load this webpage due to the Same Origin Policy, unless users can only submit pages that are on the same domain as your site. If that was the case, you could use a frame. Otherwise, JS can't do it without Jsonp, which isn't going to work in this case.
However, all is not lost. You can have your JS make an asynchronous request (ajax) to your own server. Your server scripting language /can/ get the entire DOM of the webpage (e.g. PHP can do this with cURL). Then it can send the entire string back to JS as xml that can be parsed. Good luck.
You can't really do that from the client (the web browser) with nothing but Javascript, because security rules will prevent your page from fetching and examining content from a different domain. You'll need to send the URL to a server and have it do the work.
I am working on a basic HTML page that requires the user to send details to a script located on a third-party website. What I require is for the user to fill out a form on my web page, and have that information submitted to another third-party form.
I do not wish to return anything to the user, other than whether the submission was successful or not. I also do not want the user to have to go to this third-party site to submit using their form.
It was suggested by the website itself to use an iframe and hold its form on your page, but I was wondering what other, preferably better methods are available to me. It'd be nice if there were some form of jQuery/js code I could use to do such a thing.
It'd be nice if there were some form
of jQuery/js code I could use to do
such a thing.
One way is to use jQuery's $.ajax or $.post methods like this:
$.ajax({
url: url,
success: function(data) {
alert('succeeded');
}
});
Maybe you could try cURL with CURLOPT_POST and CURLOPT_POSTFIELDS?
well it depends if you have control over the other website as well. as in you are able to access the code.
If you are you can use JSONP to pass the values and get a response, but to do it you will have to assign a callback that is sent and then formatted at the front of a JSON object for it to work (they do this for security).
The other option is to use a php ob_start() function. (Note: this will only work if the form you are trying to submit these values to allow $_GET to be used to proccess the form)
ob_start();
include('http://wwww.anotherwebsite.com?key1=value1&key2=value2&key3=value3');
$returnString = ob_get_contents();
ob_end_clean();
So then from here $returnString is the result, which you can basically search (strpos() to see if true is how I would do it) in php to find key words to see if it was successful or not or what ever you need to check for.
But again, this only works if the form on the remote server uses $_GET and not $_POST (or allows both through globals).
I know this is a php solution, but a warning is that for security purposes, there are serious restrictions on what javascript can do cross server.. the best javascript way to do cross server is JSONP, which jQuery does support so you might want to look into that.. but as I mentioned, for it to work you need to have a callback be able to be sent back with the response, and the response needs to be in a jsonp object format.. (basically you either need to 1. have the other server have a jsonp api for you to use or you have control over the other server's server side files to make the changes needed).
Do you want like that? It's simple form submitting to another website. But, I can't check whether it's successfully submitted or not.
<form action="http://www.another.com">
<input name="myInput" type="text">
<input type="submit" value="Submit">
</form>