Develop Reference

Whitelisting Javascript input

I need to execute javascript code that is written by users. Of course I must assume the javascript to be malicious. I have a global object in the page which the scripts must interact with, but I don't wan the script to be able to access anything else including the DOM, jQuery, and the window object.
Would it be possible to modify incoming javascript to strip out anything that I have not explicitly white listed?
For example:
function modField(){
if(!f.alpha.enabled){
f.main.enabled = /960/.test(f.productName.text);
f.name = document.getElementById('#username');
}
}
Would become after cleaning:
function modField(){
if(!f.alpha.enabled){
f.main.enabled = /960/.test(f.productName.text);
}
}
How do I do this?

Javascript onclick not called on some computers

I have an VB.NET web page that calls a javascript function when a checkbox in a datagrid view is checked or unchecked. The code works fine on my computer and for a few more people. But for most of the people the javascript function is not called at all when they check or uncheck a checkbox. All of these computers are Windows 7 and using IE 9. I also checked the IE->Internet Options->Advanced tab and the settings are the same on these machines. At this point I am out of ideas on this and google doesn't return any helpful results. I would really appreciate if someone can help me resolve this issue. Here is the code for the javascript function if that helps.
function SelectLineItem(pRowIndex)
{
var vGridView=document.getElementById('dgvFSOView');
var vLen=vGridView.rows.length;
var i=parseInt(pRowIndex)+1;
var intcount;
var vtxtFcheckbox=vGridView.rows[parseInt(pRowIndex)].cells[0].getElementsByTagName("input")[0].id;
var vFCheckbox=document.getElementById(vtxtFcheckbox);
var browser=navigator.appName;
for(intcount=i;intcount<=vLen-1;intcount++)
{
if ((document.getElementById('hifCheck').value=="ALL") || (document.getElementById('hifCheck').value=="-1"))
{
var vtxtSONO=vGridView.rows[intcount].cells[3].innerText;
}
else if((document.getElementById('hifCheck').value!="ALL") || (document.getElementById('hifCheck').value=="-1"))
{
var vtxtSONO=vGridView.rows[intcount].cells[2].innerText;
}
if(vtxtSONO=="")
{
if ((document.getElementById('hifCheck').value=="ALL") || (document.getElementById('hifCheck').value=="-1"))
{
var vtxttocheckbox=vGridView.rows[intcount].cells[14].getElementsByTagName("input")[0].id;
}
else
{
var vtxttocheckbox=vGridView.rows[intcount].cells[13].getElementsByTagName("input")[0].id;
}
var vTCheckbox=document.getElementById(vtxttocheckbox);
if(vFCheckbox.checked==true)
{
vTCheckbox.checked=true;
}
else
{
vTCheckbox.checked=false;
}
}
else
{
return false;
}
}
}

This could potentially be an issues with the permissions the users have on their computers. Security settings have different levels of permissions which vary depending on how the user set up their machine.
If you are running the code locally (IE: double clicking a local .html file) you often need to enable Javascript before any javascript can run at all on the page. If it's hosted on a website (IE: www.example.com/mypage.asp) then this shouldn't be a problem.
How are you calling this function? You may also want to try using the developer tools built into IE to see if any errors are occurring, which would prevent your script from completing.
Utilizing a cross browser compatible framework like jQuery might help your checkbox change event trigger, but could be overkill depending on what how complicated your project is.

Checkboxes do not reliably trigger the click event. Bind your function to the checkboxes' change event instead.

onclick JS not executing in ie8/9 problem

I have this line:
<input class='submit_img' type="image" onclick='ax_update_mood();' src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>
...then I have this JavaScript:
function js_alert() {
alert('TEST ALERT');
}
function ax_update_mood() {
var str_mood_desc = $('#moodmeter_form_mood_desc').val();
var str_mood_color = $('#moodmeter_form_mood_color').val();
if (str_mood_desc.length < 3 || str_mood_desc.length > 32) {
alert('Mood Description must be between 3 - 32 characters long.');
return
}
if (str_mood_color.length < 1 || str_mood_color.length > 32) {
alert('Mood Color must be between 3 - 32 characters long.');
return
}
$.ajax({
type: "POST",
url: "moodupdate",
data: "mood_desc=" + str_mood_desc + "&mood_color=" + str_mood_color,
success: function (msg) {
ax_get_mood();
alert("Mood Updated ");
}
})
}
When I click on the "submit," my JavaScript does not execute.
Can some one explain please?
Thanks

Provided that the code you quoted for ax_update_mood is at global scope (not contained within another function), I can't see any reason it wouldn't run. It may well not have the effect you intend, though, because nowhere are you preventing the submission of the form when your validation fails. To do that, you have to change the onclick part to:
onclick='return ax_update_mood();'
...and you have to return false; when you want to cancel the form submission.
Separately, because you're using an ajax call to do the work, you want to return false; even when the validation succeeds. Otherwise, the form will get submitted and your ajax call will never happen.
Your best bet with things like this is to use the built-in debugger ("F12 Developer Tools"), enable debugging, set a breakpoint on the first line of ax_update_mood, and walk through the code, seeing where it's going wrong.
Just to make my point about it being global explicit, your code as written has to be at page-level scope:
<script>
function ax_update_mood() {
// ...
}
</script>
not within something else, like this:
<script>
jQuery(function($) {
function ax_update_mood() {
// ...
}
});
</script>
...because the onclick attribute can only address global functions.
Rather than making it a global function, though, since you're already using jQuery, I'd probably change the input to look like this:
<input class='submit_img' type="image" id="btnSubmit" src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>
...and then put all of my code within the jQuery ready callback (just so I don't create global functions or variables; global scope is already plenty crowded enough):
jQuery(function($) {
// Hook the click event on the image button
$("#btnSubmit").click(ax_update_mood);
function js_alert() {
alert('TEST ALERT');
}
function ax_update_mood() {
var str_mood_desc = $('#moodmeter_form_mood_desc').val();
var str_mood_color = $('#moodmeter_form_mood_color').val();
if (str_mood_desc.length < 3 || str_mood_desc.length > 32) {
alert('Mood Description must be between 3 - 32 characters long.');
return false;
}
if (str_mood_color.length < 1 || str_mood_color.length > 32) {
alert('Mood Color must be between 3 - 32 characters long.');
return false;
}
$.ajax({
type: "POST",
url: "moodupdate",
data: "mood_desc=" + str_mood_desc + "&mood_color=" + str_mood_color,
success: function (msg) {
ax_get_mood();
alert("Mood Updated ");
}
});
return false; // Even on successful validation, we don't want the form to submit
}
});
Somewhat off-topic: Some miscellaneous notes:
In many places, you're relying on the horror that is automatic semicolon insertion. Always make sure you terminate your statements with semicolons, never rely on the JavaScript interpreter to understand your meaning well enough to do it for you. I've fixed them in the last example above.
Since you're clearly using jQuery, I'd suggest hooking up your validation with jQuery on DOM load rather than using the antiquated onclick attribute means of doing so. I've shown how to do that in the last example above as well.

Do you have IE configured to alert you on script errors? If this works in FFX or Chrome and not IE you may want to enable errors for all client scripts and see where the choke point is. You can find the script notification settings in Tools-->Internet Options-->Advanced, scroll to the Browsing heading and check the "Display a notification about every script error." You'll also want Script Debugging enabled, which is one of the checkboxes in very close proximity to the script error notification.
Another thing you can do to track the problem in IE is insert a debugger statement. Just update ax_update_mood() so that the first line is the word "debugger":
function ax_update_mood() {
debugger;
var str_mood_desc = $('#moodmeter_form_mood_desc').val();
var str_mood_color = $('#moodmeter_form_mood_color').val();
// ... the rest of your code
}
Then use IE to step through the method and see where your failure is.
The only other thing I can see is you might need a semi-colon after your .ajax() call. I've noticed that IE8 will choke on object/jquery notation where semi-colons don't terminate the declaration.
Any additional troubleshooting assistance would require more detail on how you're referencing JQuery, what the rest of the page looks like, etc.
Happy coding.
B

Getting functions from another script in JS

I load this JS code from a bookmarklet:
function in_array(a, b)
{
for (i in b)
if (b[i] == a)
return true;
return false;
}
function include_dom(script_filename) {
var html_doc = document.getElementsByTagName('head').item(0);
var js = document.createElement('script');
js.setAttribute('language', 'javascript');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', script_filename);
html_doc.appendChild(js);
return false;
}
var itemname = '';
var currency = '';
var price = '';
var supported = new Array('www.amazon.com');
var domain = document.domain;
if (in_array(domain, supported))
{
include_dom('http://localhost/bklts/parse/'+domain+'.js');
alert(getName());
}
[...]
Note that the 'getName()' function is in http://localhost/bklts/parse/www.amazon.com/js. This code works only the -second- time I click the bookmarklet (the function doesn't seem to get loaded until after the alert()).
Oddly enough, if I change the code to:
if (in_array(domain, supported))
{
include_dom('http://localhost/bklts/parse/'+domain+'.js');
alert('hello there');
alert(getName());
}
I get both alerts on the first click, and the rest of the script functions. How can I make the script work on the first click of the bookmarklet without spurious alerts?
Thanks!
-Mala

Adding a <script> tag through DHTML makes the script load asynchroneously, which means that the browser will start loading it, but won't wait for it to run the rest of script.
You can handle events on the tag object to find out when the script is loaded. Here is a piece of sample code I use that seems to work fine in all browsers, although I'm sure theres a better way of achieving this, I hope this should point you in the right direction:
Don't forget to change tag to your object holding the <script> element, fnLoader to a function to call when the script is loaded, and fnError to a function to call if loading the script fails.
Bear in mind that those function will be called at a later time, so they (like tag) must be available then (a closure would take care of that normally).
tag.onload = fnLoader;
tag.onerror = fnError;
tag.onreadystatechange = function() {
if (!window.opera && typeof tag.readyState == "string"){
/* Disgusting IE fix */
if (tag.readyState == "complete" || tag.readyState == "loaded") {
fnLoader();
} else if (tag.readyState != "loading") {
fnError();
};
} else if (tag.readyState == 4) {
if (tag.status != 200) {
fnLoader();
}
else {
fnError();
};
};
});

It sounds like the loading of the external script (http://localhost/bklts/parse/www.amazon.com/js) isn't blocking execution until it is loaded. A simple timeout might be enough to give the browser a chance to update the DOM and then immediately queue up the execution of your next block of logic:
//...
if (in_array(domain, supported))
{
include_dom('http://localhost/bklts/parse/'+domain+'.js');
setTimeout(function() {
alert(getName());
}, 0);
}
//...
In my experience, if zero doesn't work for the timeout amount, then you have a real race condition. Making the timeout longer (e.g. 10-100) may fix it for some situations but you get into a risky situation if you need this to always work. If zero works for you, then it should be pretty solid. If not, then you may need to push more (all?) of your remaining code to be executed into the external script.

The best way I could get working: Don't.
Since I was calling the JS from a small loader bookmarklet anyway (which just tacks the script on to the page you're looking at) I modified the bookmarklet to point the src to a php script which outputs the JS code, taking the document.domain as a parameter. As such, I just used php to include the external code.
Hope that helps someone. Since it's not really an answer to my question, I won't mark this as the accepted answer. If someone has a better way, I'd love to know it, but I'll be leaving my code as is:
bookmarklet:
javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost/bklts/div.php?d='+escape(document.domain);})();
localhost/bklts/div.php:
<?php
print("
// JS code
");
$supported = array("www.amazon.com", "www.amazon.co.uk");
$domain = #$_GET['d']
if (in_array($domain, $supported))
include("parse/$domain.js");
print("
// more JS code
");
?>

Javascript Validation not working on .Net Content Pages

I'm wondering if anyone else has experienced the following issue.
On a single non-linked (to a master page) .aspx page, I'm performing simple JS validations:
function validateMaxTrans(sender, args) {
// requires at least one digit, numeric only characters
var error = true;
var regexp = new RegExp("^[0-9]{1,40}(\.[0-9]{1,2})?$");
var txtAmount = document.getElementById('TxtMaxTransAmount');
if (txtAmount.value.match(regexp) && parseInt(txtAmount.value) >= 30) {
document.getElementById('maxTransValMsg').innerHTML = ""
args.IsValid = true;
}
else {
document.getElementById('maxTransValMsg').innerHTML = "*";
args.IsValid = false;
}
}
Then as soon as I move this into a Master page's content page, I get txtAmount is null.
Is there a different way to access the DOM when attempting to perform client-side JS validation with master/content pages?

Look at the source for your rendered page within the master page. Many elements will have an ID like ControlX$SubControlY$txtMaxTransAmount ... you'll need to adjust your validation accordingly. I will often just inject the IDs into the client doc..
<script type="text/javascript">
var controls = {
'txtAmount': '<%=TxtMaxTransAmount.ClientId%>',
...
}
</script>
I'd put this right before the end of your content area, to make sure the controls are rendered already. This way you can simply use window.controls.txtAmount to reference the server-side control's tag id. You could even make the right-side value a document.getElementById('...') directly.

Are you using asp textboxes? If so I believe you need to do somethign like document.getElementById('<%= txtMaxTransAmount.ClientID %>').
Hope this helps
Tom