Is there any XSS threat while having JSON encoded in the URL? - javascript

In order to have an URL friendly application I'm storing it's context has a JSON in URL, which gives something like :
http://mysite.dev/myapppage/target#?context={%22attr1%22%3A{%22target_id-0%22%3A{%22value%22%3A%223%22%2C%22label%22%3A%22Hello%22}}}
Which encode a basic context :
{
"attr1":
{
"target_id-0":
{
"value": "3",
"label": "Hello"
}
}
}
I'm serializing my object with :
JSON.stringify(context)
I'm deserializing it with :
var hashParamsElements = window.location.toString().split('?');
hashParamsElements.shift(); // we just skip the first part of the url
var hashParams = $.deparam(hashParamsElements.join('?'));
var contextString = hashParams.context;
var context = JSON.parse(contextString);
The context is only stored to read variables, there's no evaluated code in it. Can someone tell me whether or not it's XSS safe ?
If there's a threat : how can I avoid it ?

A threat of this kind comes from using different methods of decoding JSON, namely eval and new Function. These execute JS code directly and therefore allow non-persistent XSS attacks by putting code in the url (and linking to it).
JSON.parse does not have this issue and is safe against these kind of attacks.
See also (json.org).

Does label end up getting inserted into the DOM somewhere? (IE, $('#something').html(context.attr1.target_id-0.label))
Then I could put <script>...</script> in a label and there's your XSS.

I dont see any threat in it. Its completely safe. JSON.parse does not allow any function to run.
Also, why using ? . If you want to give a feel of 'real' url, use hashbang instead.

Related

Share page via url in safe way?

My index.php is making ajax post calls to ajax.php and getting echoed json as result, then parsed and displayed with js. So it is POST. I want to be able to share that result, via link like mydomain/index.php?q=foo&q1=foo1.
Here is basic pseudo-code scenario that isn't safe, I want suggestion how to achieve this in safe manner?
//index.php
//js
$.post('ajax.php', querystring, function(){
collect_result = result;
});
//ajax.php
parse($_POST);
echo json_encode(result);
// I want to be able to share result in way
http://.../index.php?q=foo&q1=foo1
//index.php
if(!empty($_GET['q]))
$querystr = http_build_query($_GET, '', '&');
<div id="div1" style="display:none"><?php echo $querystr; ?></div>
//then get it wuth jquery and make ajax.post()
$.post('ajax.php', $('#div1').html(), function(){
collect_result = result;
});
//BUT THEN USER IS ABLE TO DIRECT INJECT CODE INTO MY HTML (XSS)
//IS THERE SAFE WAY TO DO THIS SHARING VIA LINK???
Not sure if you refer to this, but as mentioned in w3schools:
The htmlspecialchars() function converts special characters to HTML entities. This means that it will replace HTML characters like < and > with < and >. This prevents attackers from exploiting the code by injecting HTML or Javascript code (Cross-site Scripting attacks) in forms.
I work with ajax on a daily basis dealing with this dilema pretty often. There are times where I have to even put password and user in a url. When sensitive data gets visible like that, I encrypt the variables. I use a php encryption method with a special key, and I decode it when I receive the variable by POST. If your are interested in this method you can look at the cbc encryption/decryption. I am sure there are others but cbc seems to be the safest. (be sure to enable the mcrypt in the php).

Javascript - Sanitize Malicious code from file (string)

I have a data javascript file, which is being dynamically added to website via some custom code.
This file comes from a third party vendor, who could potentially add malicious code in the file
Before this file is added to the website, I would like to parse through it, and look for malicious code, such as redirects or alerts, that inherently get executed upon a files inclusion in the project/website.
For example, my js file could look like this :
alert ('i am malicious');
var IAmGoodData =
[
{ Name :'test', Type:'Test2 },
{ Name :'test1', Type:'Test21' },
{ Name :'test2', Type:'Test22' }
]
I load this file into a object via a XMLHttpRequest call, and when this call returns, I can use the variable (which is my file text) and search it for words:
var client = new XMLHttpRequest();
client.open('GET', 'folder/fileName.js');
client.onreadystatechange = function()
{
ScanText(client.responseText);
}
client.send();
function ScanText(text)
{
alert(text);
var index = text.search('alert'); //Here i can search for keywords
}
The last line would return index of 0, as the word alert is found at index 0 in the file.
Questions:
Is there a more efficient way to search for keywords in the file?
What specific keywords should i be searching for to prevent malicious code being run? ie redirects, popups, sounds etc.....
Instead of having them include var IAmGoodData =, make them simply provide JSON (which is basically what the rest of the file is, or seems to be). Then you parse it as JSON, using JSON.parse(). If it fails, they either didn't follow the JSON format well, or have external code, and in either case you would ignore the response.
For example, you'd expect data from the external file like:
[
{ Name :'test', Type:'Test2' },
{ Name :'test1', Type:'Test21' },
{ Name :'test2', Type:'Test22' }
]
which needs to be properly serialized as JSON (double quotes instead of single quotes, and double quotes around the keys). In your code, you'd use:
var json;
try {
json = JSON.parse(client.responseText);
catch (ex) {
// Invalid JSON
}
if (json) {
// Do something with the response
}
Then you could loop over json and access the Name and Type properties of each.
Random Note:
In your client.onreadystatechange callback, make sure you check client.readyState === 4 && client.status === 200, to know that the request was successful and is done.
This is extremely difficult to do. There are no intrinsically malicious keywords or functions in JavaScript, there are malicious applications. You could be getting false positives for "malicious" activity and prevent a legitimate code with a real purpose from being executed. And at the same time, anyone with a little bit of imagination could bypass any "preventive" method you may implement.
I'd suggest you look for a different approach. This is one of those problems (like CAPTCHA) in which it's trivial for a human to solve while for a machine is practically impossible to do so. You could try having a moderator or some human evaluator to interpret the code and accept it.
You should have them provide valid JSON rather than arbitrary Javascript.
You can then call JSON.parse() to read their data without any risk of code execution.
In short, data is not code, and should not be able to contain code.
You shouldn't. The user should be allowed to type whatever they want, and it's your job to display it.
It all depends on where it is being put, of course:
Database: mysql_real_escape_string or equivalent for whatever engine you're using.
HTML: htmlspecialchars in PHP, createTextNode or .replace(/</g,"<") in JavaScript
JavaScript: json_encode in PHP, JSON.stringify in JavaScript.
At the end of the day, just don't be Yahoo

hide variables passed in URL

We've been working on a web application and we've just about got it finished up, but there's one thing that bothering us (although by no means is it going to stop production.)
When we call one of the pages (index.html), we sometimes have to pass it a variable in the URL (searchid). So we get a page like http://domain.com/index.html?searchid=string.
We'd ideally like to not show the ?searchid=string, but I'm not sure how we'd do that.
My group doesn't own the index.html page (but we are working with the group that does), so I don't know how much we'd be able to do with anything like .htaccess or similar.
I was thinking about POSTing the variable, but I don't know how to receive it with just HTML and jQuery. Another person in my group thought that after the page loaded we could remove it from the URL, but I assume we would need a page refresh which would then lose the data anyway.
I'm trying to avoid XY problem where the problem is X and I ask about Y, so what's the right way to remove the variable from the URL?
You can use the History API, but it does require a modern browser
history.replaceState({}, null, "/index.html");
That will cause your URL to appear as /index.html without reloading the page
More information here:
Manipulated the browser history
Your question seems to indicate that the target page is not and will not be powered by some server-side script. If that's the case, I'd suggest changing the querystring to a hash, which has the advantage of being directly editable without triggering a page-load:
http://yourdomain.com/page.html#search=value
<script type='text/javascript'>
// grab the raw "querystring"
var query = document.location.hash.substring(1);
// immediately change the hash
document.location.hash = '';
// parse it in some reasonable manner ...
var params = {};
var parts = query.split(/&/);
for (var i in parts) {
var t = part[i].split(/=/);
params[decodeURIComponent(t[0])] = decodeURIComponent(t[1]);
}
// and do whatever you need to with the parsed params
doSearch(params.search);
</script>
Though, it would be better to get some server-side scripting involved here.
It's possible to rewrite the URL using JavaScript's history API. History.js is a library that does this very well.
That being said, I don't think there's any need for removing the query-string from the URL, unless you're dynamically changing the contents of the page to make the current query-string irrelevant.
You could post the data, then let the server include the posted data in the page, e.g.:
echo "<script> post_data = ".json_encode($_POST)." </script>";
This works cross-browser.

Coding for client side from code behind in asp.net

I frequently write client side code in the code-behind section of my asp.net applications. I think its about time to get a refresher on how to write client side code on server side page.
I need to refresh mysel fwith the "double quotes" and "single quotes". Not sure what that is called, but can anyone point me to the correct resource where I can learn about the quotes and double quotes.
Writing javascript code, intended to be run on the client, on the server is to put it simply: bad, wrong, to be avoided.
You should prefer to write your javascript functions in separate js files and only invoke them from the server. The benefit of this is that you will no longer have to worry about single, double and triple quotes, your js will be cached, minified, gzipped, served from a CDN, optimized, ... The end result of mixing server side languages such as C#/VB.NET with javascript is just ugly and difficult to maintain code.
Now to the point. When you need to call some javascript function from the server and you need to pass it some arguments in order to not worry about quotes and stuff, I would recommend you to JSON serialize your server side object and pass it to the client function.
Let's take an example. Suppose that you have written a function which requires some arguments:
function foo(myModel) {
alert(myModel.Prop1 + ' | ' + myModel.Prop2);
}
and now you want to invoke this function from the server, here's how to proceed:
var model = new
{
Prop1 = #"some value that can contain ', \, "", anything you like to throw it in, etc..",
Prop2 = "some other value"
};
var json = new JavaScriptSerializer().Serialize(model);
var script = string.Format("foo({0});", json);
ClientScript.RegisterStartupScript(GetType(), "foo", script, true);
Now you no longer need to worry about any quotes and escaping. No matter what value you throw in those properties, they will be correctly serialized when invoking the javascript function.

passing value to JSP via javaScript

boolean canModify = UTIL.hasSecurity("PFTMODFY") && something;
function name() {
I need to pass a value false to something when the page loads.
}
window.onLoad = name
How can i pass a value from JavaScript to JSP on the page load
I think you mean it the other way around, have server-side code output a value that JavaScript can see at page-load time.
Sending from your server code (JSP) to your client code (JavaScript)
Just output it like you would anything else, e.g.:
<%
boolean canModify = UTIL.hasSecurity("PFTMODFY") && something;
%>
var canModify = <%=canModify%>;
// ^ ^
// | +-- server-side variable
// +-- client-side variable
When the JSP actually runs, the script code returned to the client will simply be
var canModify = false;
or
var canModify = true;
That's a boolean; if you need to output a string, you need to put the quotes around it and be careful that you escape anything within it that should be escaped inside a JavaScript literal string (like a backslash, for instance, and whatever quote character you're using).
Sending from your client code (JavaScript) to your server code (JSP)
But if you really mean you want to send a value back to the server on page load (which seems odd, but hey), you'd have to use Ajax for that. If you're going to be doing Ajax stuff, I'd recommend using a library like jQuery, Closure, Prototype, YUI, or any of several others as they can dramatically simplify the process for you. For instance, using jQuery, this client-side code sends a value back to the server:
jQuery.get("/your/page/url", {"name": "value"});
(or jQuery.post for things that make changes). Using Prototype, it'd be:
new Ajax.Request("/your/page/url", {
method: "GET", // or, of couse, "POST"
parameters: {"name": "value"}
});
All of the libs I mentioned above have similarly easy-to-use mechanisms for sending data to the server. Note that this mechanism is bound by the Same Origin Policy.
You don't need a library for this, of course — anything a library can do, you can do yourself. The features I've listed above are all wrappers for the XMLHttpRequest object (Wikipedia, MSDN, MDC). See the linked resources for examples.
Non-Ajax hack
I shouldn't have said you need to use Ajax for this, more like you want to. :-) If, for some reason, you really didn't want to use Ajax you could do it by adding something to the page with JavaScript that triggers a retrieval from the server, and then include your value as a flag in that request. For instance:
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.src = "/path/to/jsp?name=" + encodeURIComponent(value);
document.getElementsByTagName('head')[0].appendChild(link);
Your JSP would do whatever it needs to do with the query string, and then return anything that's valid in a stylesheet (/* */, for instance). Or if you don't want to use a style sheet link, use an img tag and return a transparent pixel; etc.
But I wouldn't do that. I'd use Ajax.

Categories

Resources