How to make jquery script easier to read? [duplicate] - javascript

This question already has answers here:
Decode obfuscated JavaScript
(4 answers)
Closed 11 months ago.
I hate to bring this here, while doing the learning of obfuscating the JS code, I encoded my code and then over wrote the orginal one without any backup :) Following is my obfuscated code.
var _0xf17f=["\x28","\x29","\x64\x69\x76","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x64","\x53\x74\x75\x64\x65\x6E\x74\x5F\x6E\x61\x6D\x65","\x73\x74\x75\x64\x65\x6E\x74\x5F\x64\x6F\x62","\x3C\x62\x3E\x49\x44\x3A\x3C\x2F\x62\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x6C\x65\x61\x72\x6E\x69\x6E\x67\x79\x69\x69\x2F\x69\x6E\x64\x65\x78\x2E\x70\x68\x70\x3F\x72\x3D\x73\x74\x75\x64\x65\x6E\x74\x2F\x76\x69\x65\x77\x26\x61\x6D\x70\x3B\x20\x69\x64\x3D","\x22\x3E","\x3C\x2F\x61\x3E","\x3C\x62\x72\x2F\x3E","\x3C\x62\x3E\x53\x74\x75\x64\x65\x6E\x74\x20\x4E\x61\x6D\x65\x3A\x3C\x2F\x62\x3E","\x3C\x62\x3E\x53\x74\x75\x64\x65\x6E\x74\x20\x44\x4F\x42\x3A\x3C\x2F\x62\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x63\x6C\x61\x73\x73","\x76\x69\x65\x77","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x70\x72\x65\x70\x65\x6E\x64","\x2E\x69\x74\x65\x6D\x73","\x66\x69\x6E\x64","\x23\x53\x74\x75\x64\x65\x6E\x74\x47\x72\x69\x64\x56\x69\x65\x77\x49\x64"];function call_func(_0x41dcx2){var _0x41dcx3=eval(_0xf17f[0]+_0x41dcx2+_0xf17f[1]);var _0x41dcx4=document[_0xf17f[3]](_0xf17f[2]);var _0x41dcx5=_0x41dcx3[_0xf17f[4]];var _0x41dcx6=_0x41dcx3[_0xf17f[5]];var _0x41dcx7=_0x41dcx3[_0xf17f[6]];var _0x41dcx8=_0xf17f[7];_0x41dcx8+=_0xf17f[8]+_0x41dcx5+_0xf17f[9]+_0x41dcx5+_0xf17f[10];_0x41dcx8+=_0xf17f[11];_0x41dcx8+=_0xf17f[12];_0x41dcx8+=_0x41dcx6;_0x41dcx8+=_0xf17f[11];_0x41dcx8+=_0xf17f[13];_0x41dcx8+=_0x41dcx7;_0x41dcx8+=_0xf17f[11];_0x41dcx4[_0xf17f[14]]=_0x41dcx8;_0x41dcx4[_0xf17f[17]](_0xf17f[15],_0xf17f[16]);$(_0xf17f[21])[_0xf17f[20]](_0xf17f[19])[_0xf17f[18]](_0x41dcx4);} ;
Can anyone guide me the URL or any method to make it readable. I did this from this website and they seemingly provide on one way obfuscation services available on their website...this was my test code during a learning so would be greatful if anyone could help me out.

Here's a new automated tool, JSNice, to try to deobfuscate/deminify it. The tool even tries to guess the variable names, which is unbelievably cool. (It mines Javascript on github for this purpose.)
The tagline on the page is "Statistical renaming, Type inference and Deobfuscation".
http://www.jsnice.org

Try this:
http://jsbeautifier.org/
I tested with your code and worked as good as possible. =D

Here it is:
function call_func(input) {
var evaled = eval('(' + input + ')');
var newDiv = document.createElement('div');
var id = evaled.id;
var name = evaled.Student_name;
var dob = evaled.student_dob;
var html = '<b>ID:</b>';
html += '' + id + '';
html += '<br/>';
html += '<b>Student Name:</b>';
html += name;
html += '<br/>';
html += '<b>Student DOB:</b>';
html += dob;
html += '<br/>';
newDiv.innerHTML = html;
newDiv.setAttribute('class', 'view');
$('#StudentGridViewId').find('.items').prepend(newDiv);
};

From the first link on google;
function call_func(_0x41dcx2) {
var _0x41dcx3 = eval('(' + _0x41dcx2 + ')');
var _0x41dcx4 = document['createElement']('div');
var _0x41dcx5 = _0x41dcx3['id'];
var _0x41dcx6 = _0x41dcx3['Student_name'];
var _0x41dcx7 = _0x41dcx3['student_dob'];
var _0x41dcx8 = '<b>ID:</b>';
_0x41dcx8 += '' + _0x41dcx5 + '';
_0x41dcx8 += '<br/>';
_0x41dcx8 += '<b>Student Name:</b>';
_0x41dcx8 += _0x41dcx6;
_0x41dcx8 += '<br/>';
_0x41dcx8 += '<b>Student DOB:</b>';
_0x41dcx8 += _0x41dcx7;
_0x41dcx8 += '<br/>';
_0x41dcx4['innerHTML'] = _0x41dcx8;
_0x41dcx4['setAttribute']('class', 'view');
$('#StudentGridViewId')['find']('.items')['prepend'](_0x41dcx4);
};
It won't get you all the way back to source, and that's not really possible, but it'll get you out of a hole.

I have tried both of online jsbeautifier(jsbeautifier, jsnice),
these tools gave me beautiful js code,
but couldn't copy for very large js (must be bug, when i copy, copied buffer contains only one character '-').
I found that only working solution was prettyjs:
http://www.thaoh.net/prettyjs/

Related

Can you help me to explain how they encode or encrypt the javascript code like this? can we decode it? [duplicate]

This question already has answers here:
Decode obfuscated JavaScript
(4 answers)
Closed 11 months ago.
I hate to bring this here, while doing the learning of obfuscating the JS code, I encoded my code and then over wrote the orginal one without any backup :) Following is my obfuscated code.
var _0xf17f=["\x28","\x29","\x64\x69\x76","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x69\x64","\x53\x74\x75\x64\x65\x6E\x74\x5F\x6E\x61\x6D\x65","\x73\x74\x75\x64\x65\x6E\x74\x5F\x64\x6F\x62","\x3C\x62\x3E\x49\x44\x3A\x3C\x2F\x62\x3E","\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x2F\x6C\x65\x61\x72\x6E\x69\x6E\x67\x79\x69\x69\x2F\x69\x6E\x64\x65\x78\x2E\x70\x68\x70\x3F\x72\x3D\x73\x74\x75\x64\x65\x6E\x74\x2F\x76\x69\x65\x77\x26\x61\x6D\x70\x3B\x20\x69\x64\x3D","\x22\x3E","\x3C\x2F\x61\x3E","\x3C\x62\x72\x2F\x3E","\x3C\x62\x3E\x53\x74\x75\x64\x65\x6E\x74\x20\x4E\x61\x6D\x65\x3A\x3C\x2F\x62\x3E","\x3C\x62\x3E\x53\x74\x75\x64\x65\x6E\x74\x20\x44\x4F\x42\x3A\x3C\x2F\x62\x3E","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x63\x6C\x61\x73\x73","\x76\x69\x65\x77","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x70\x72\x65\x70\x65\x6E\x64","\x2E\x69\x74\x65\x6D\x73","\x66\x69\x6E\x64","\x23\x53\x74\x75\x64\x65\x6E\x74\x47\x72\x69\x64\x56\x69\x65\x77\x49\x64"];function call_func(_0x41dcx2){var _0x41dcx3=eval(_0xf17f[0]+_0x41dcx2+_0xf17f[1]);var _0x41dcx4=document[_0xf17f[3]](_0xf17f[2]);var _0x41dcx5=_0x41dcx3[_0xf17f[4]];var _0x41dcx6=_0x41dcx3[_0xf17f[5]];var _0x41dcx7=_0x41dcx3[_0xf17f[6]];var _0x41dcx8=_0xf17f[7];_0x41dcx8+=_0xf17f[8]+_0x41dcx5+_0xf17f[9]+_0x41dcx5+_0xf17f[10];_0x41dcx8+=_0xf17f[11];_0x41dcx8+=_0xf17f[12];_0x41dcx8+=_0x41dcx6;_0x41dcx8+=_0xf17f[11];_0x41dcx8+=_0xf17f[13];_0x41dcx8+=_0x41dcx7;_0x41dcx8+=_0xf17f[11];_0x41dcx4[_0xf17f[14]]=_0x41dcx8;_0x41dcx4[_0xf17f[17]](_0xf17f[15],_0xf17f[16]);$(_0xf17f[21])[_0xf17f[20]](_0xf17f[19])[_0xf17f[18]](_0x41dcx4);} ;
Can anyone guide me the URL or any method to make it readable. I did this from this website and they seemingly provide on one way obfuscation services available on their website...this was my test code during a learning so would be greatful if anyone could help me out.
Here's a new automated tool, JSNice, to try to deobfuscate/deminify it. The tool even tries to guess the variable names, which is unbelievably cool. (It mines Javascript on github for this purpose.)
The tagline on the page is "Statistical renaming, Type inference and Deobfuscation".
http://www.jsnice.org
Try this:
http://jsbeautifier.org/
I tested with your code and worked as good as possible. =D
Here it is:
function call_func(input) {
var evaled = eval('(' + input + ')');
var newDiv = document.createElement('div');
var id = evaled.id;
var name = evaled.Student_name;
var dob = evaled.student_dob;
var html = '<b>ID:</b>';
html += '' + id + '';
html += '<br/>';
html += '<b>Student Name:</b>';
html += name;
html += '<br/>';
html += '<b>Student DOB:</b>';
html += dob;
html += '<br/>';
newDiv.innerHTML = html;
newDiv.setAttribute('class', 'view');
$('#StudentGridViewId').find('.items').prepend(newDiv);
};
From the first link on google;
function call_func(_0x41dcx2) {
var _0x41dcx3 = eval('(' + _0x41dcx2 + ')');
var _0x41dcx4 = document['createElement']('div');
var _0x41dcx5 = _0x41dcx3['id'];
var _0x41dcx6 = _0x41dcx3['Student_name'];
var _0x41dcx7 = _0x41dcx3['student_dob'];
var _0x41dcx8 = '<b>ID:</b>';
_0x41dcx8 += '' + _0x41dcx5 + '';
_0x41dcx8 += '<br/>';
_0x41dcx8 += '<b>Student Name:</b>';
_0x41dcx8 += _0x41dcx6;
_0x41dcx8 += '<br/>';
_0x41dcx8 += '<b>Student DOB:</b>';
_0x41dcx8 += _0x41dcx7;
_0x41dcx8 += '<br/>';
_0x41dcx4['innerHTML'] = _0x41dcx8;
_0x41dcx4['setAttribute']('class', 'view');
$('#StudentGridViewId')['find']('.items')['prepend'](_0x41dcx4);
};
It won't get you all the way back to source, and that's not really possible, but it'll get you out of a hole.
I have tried both of online jsbeautifier(jsbeautifier, jsnice),
these tools gave me beautiful js code,
but couldn't copy for very large js (must be bug, when i copy, copied buffer contains only one character '-').
I found that only working solution was prettyjs:
http://www.thaoh.net/prettyjs/

How to properly generate HTML in a JavaScript widget?

I've been following this tutorial on how to make JS widget. However I noticed that manually building html with plain JavaScript is not DRY. I am planning to build a form, tables etc. in a JS widget. Whats the best way to do this?
$.getJSON(jsonp_url, function(data) {
var fruits = ["Apples", "Mangoes", "Banana"];
var myHtml = "<ul>";
$(fruits).each(function(i){
myHtml += "<li>" + fruits[i] + "</li>";
});
myHtml += "</ul>";
$('#example-widget-container').html(myHtml);
});
if you want one of your divs or containers to continuously grow while you build dynamic content, without losing older content, use jQuery.append
$('#example-widget-container').append(myHtml);
this is probably the cleanest way. Or you can do other things like
var html = $('#example-widget-container').html();
newHtml = yourContent;
$('#example-widget-container').html(html + newHtml);
In JavaScript you can generate html content in different ways :
Create HTML with a string directly :
$("#sampleArea").append('<div class="' + newClass + '">' + newText + '</div>');
Create HTML with jQuery Api wrapping :
$("#sampleArea").append($('<div/>',{class : newClass}).text(newText));
Use a template engine in Javascript (like mustache.js) :
<script id="exampleTpl" type="x-tmpl-mustache">
<div class="{{class}}">{{text}}</div>
</script>
<script>
var data = {
class: newClass,
text: newText
}
var template = $('#exampleTpl').html();
var html = Mustache.render(template, data);
$('#sampleArea').append(html);
</script>
The best solution will depends of your use.

Retrieve data from a json object with square brackets enclosing the data

I got this data that are am getting from the database using an xmlhttprequest.
[{"description":"welcome","location":"Nairobi","name":"Equity Bank","created_at":"2013-02-07 21:12:45"},{"description":"very nice job","location":"Kisumu","name":"Equity Bank","created_at":"2013-02-16 12:19:46"},{"description":"welcome all","location":"nairobi","name":"Equity Bank","created_at":"2013-02-16 13:28:26"},{"description":"Very nice","location":"Nairobi","name":"Equity Bank","created_at":"2013-07-08 01:50:11"},{"description":"bad job","location":"eldoret","name":"Safaricom","created_at":"2013-02-03 00:00:00"},{"description":"very nice job","location":"mombasa","name":"Deep Africa","created_at":"2013-02-05 00:00:00"}]
My main aim is to arrange the data in a column form as follows:
description location name created_at
The square brackets confuse me a little bit but it seems like a javascript array but i just cant parse it correctly.
You could just loop through it, and access each element. Here is an example formatting it into some HTML tables.
var data = [{"description":"welcome","location":"Nairobi","name":"Equity Bank","created_at":"2013-02-07 21:12:45"},{"description":"very nice job","location":"Kisumu","name":"Equity Bank","created_at":"2013-02-16 12:19:46"},{"description":"welcome all","location":"nairobi","name":"Equity Bank","created_at":"2013-02-16 13:28:26"},{"description":"Very nice","location":"Nairobi","name":"Equity Bank","created_at":"2013-07-08 01:50:11"},{"description":"bad job","location":"eldoret","name":"Safaricom","created_at":"2013-02-03 00:00:00"},{"description":"very nice job","location":"mombasa","name":"Deep Africa","created_at":"2013-02-05 00:00:00"}];
var results = document.getElementById('results');
htmlString = '<table><tr>';
for( a=0; a<data.length; a++) {
htmlString = htmlString + '<tr><td>' + data[a]['description'] + '</td><td>' + data[a]['location'] + '</td><td>' + data[a]['name'] + '</td><td>' + data[a]['created_at'] + '</tr>';
}
htmlString = htmlString + '</table>';
results.innerHTML = htmlString;
There's a jsfiddle at http://jsfiddle.net/R63BJ/
As If ur using a XMLHTTRequest you will get the data in responesText
var jsonData=eval('('+responseText+')');
var text="<table><tr><th>description</th><th>location</th>" +
"<th>name</th><th>created_at</th></tr>";
for(var i=0;i<jsonData.length;i++){
text+="<td>"+jsonData[i].description+"</td>";
text+="<td>"+jsonData[i].location+"</td>";
text+="<td>"+jsonData[i].name+"</td>";
text+="<td>"+jsonData[i].created_at+"</td>";
text+="</tr>";
}
text+="</table>"
document.getElementById("tag").innerHTML="";// make sure that data is not Present
document.getElementById("tag").innerHTML=text;
and In the Jsp Page:
<div id="tag"></tag>

Javascript echoing out HTML rather than processing it

I'm trying to customise the output from a WordPress plugin called Showtime. Showtime contains the following Javascript to output what is entered in the schedule. For styling reasons I'm entering into the plugin admin area for a show -
<h3>Drivetime</h3><p>with Davie Boy</p>
The issue I have is this is literally printed out / echoed on the page and the html is not rendered / processed, as though wrapped in pre tags.
I understand the following javascript outputs the show, how could I get it to actually not echo the html but process it. Sorry if I'm not using the correct terminology.
Any help much appreciated
rob
UPDATE
Thanks for the comments - to get me thinking. This javascript is getting the Showname from a PHP script called crud.php. Looking over this I think this may be the offending line in crud.php
$showname = htmlentities(stripslashes(($_POST['showname'])));
rather than the javascript itself?
jQuery(function($){
function get_current_show() {
//Get the current show data
$.post(crudScriptURL, {"crud-action" : "read", "read-type" : "current"}, function (currentShowJSON) {
var schedule = $.parseJSON(currentShowJSON);
var outputHTML = '';
var currentShow = schedule['current-show'];
if (currentShow.showName){
var currentShowName = currentShow.showName;
var imageURL = currentShow.imageURL;
var linkURL = currentShow.linkURL;
var startClock = currentShow.startClock;
var endClock = currentShow.endClock;
outputHTML += '<div id="showtime">'+currentShowName+'</div>';
if (imageURL){
if (linkURL){
outputHTML += '<img class="showtime-image-thumbnail" src="'+imageURL+'" alt="'+currentShow.showName+'" />';
} else {
outputHTML += '<img class="showtime-image-thumbnail" src="'+imageURL+'" alt="'+currentShow.showName+'" />';
}
}
} else {
outputHTML += '<h3 class="current-show">'+currentShow+'<h3>';
}
var upcomingShow = schedule['upcoming-show'];
if (upcomingShow){
var upcomingShowName = upcomingShow.showName;
var upcomingShowLink = upcomingShow.linkURL;
var upcomingStartClock = upcomingShow.startClock;
var upcomingEndClock = upcomingShow.endClock;
if (upcomingShowLink){
outputHTML += '<h3 class="upcoming-show"><strong>Up next:</strong> '+upcomingShowName+'</h3>';
} else {
outputHTML += '<h3 class="upcoming-show"><strong>Up next:</strong> '+upcomingShowName+'</h3>';
}
outputHTML += '<span>'+upcomingStartClock + ' - ' + upcomingEndClock + '</span>';
}
$('.showtime-now-playing').html(outputHTML);
//Set a timer to update the widget every 30 seconds
setTimeout (get_current_show, (30 * 1000));
});
}
get_current_show();
});
If you have a consistent format for these, and don't really need to use symbols as part of the display, you can implement a sort of parser in the jquery function. For example, you could enter <h3>Drivetime</h3><p>with Davie Boy</p>, and in the code do something like:
var currentShowName = $('<div/>').html(currentShow.showName).text();

how to use js to do a loop

i want to use js this function:
i have a string[] s={"11111","2222","33333",...} how to
achieve the html body
<h2>total s.length </h2>
<p>s[0]</p>
<p>s[1]</p>
<p>s[2]</p>
because s.length and content is uncertain,so i cannot one by one print,i want to use javascript,can you tell me how,i know little about js knowledge.thank you
var arr = ["11111","2222","33333"];
var output = "<h2>total " + arr.length + "</h2>" + "<p>" + arr.join("</p><p>") + "</p>";
document.getElementById("OutputPanel").innerHTML = output;
Live demo: http://jsfiddle.net/TQSK4/
You better add the result into existing container in the document, like in the example, not write directly to the document.

Categories