Playing with Scope Inheritance In Angular

In my previous blog I have discussed about the prototypical inheritance in Javascript, In AngularJS, a child scope normally prototypical inherits from its parent scope.Today while working with angular I found a interesting concept regarding prototypical inheritance in angular. Now lets directly start with an example,

Here is the PLUNK.

In the above example We have created an array “Skills” which contains a set of skills, and a model “mySkill” to store a particular skill in $scope. We are using the “Skills” array to populate our check boxes and ‘mySkill’ model to store the skill selected by the user.Finally we are showing the skill selected by the user. But this will not work the way we are  expecting.

It will not update our model ‘mySkill’ according to the checkbox selected by the user. This looks like a strange issue. Now the question is why Its not updating our model properly? This is because ng-repeat creates a new child scope which is prototypically inherited from parent scope and the child scope gets its own property(‘mySkill’) that hides/shadows the parent property of the same name, But does not update the parent scope ‘mySkill’ property. This is not something AngularJS is doing – this is how JavaScript prototypical inheritance works.  Directives like ng-repeat, ng-view and ng-include create new child scope where this kind of problem occurs.

This issue with primitives can be easily avoided by following the best practice of always have a ‘.’ in ng-models.Having a ‘.’ in models will ensure that prototypical inheritance is in play. So, we should use

<input type="text" ng-model="someObj.prop1"> rather than 
<input type="text" ng-model="prop1">.

If you really want/need to use a primitive, then we can use $parent.parentScopeProperty in the child scope which will prevent the child scope from creating its own scope.

<input type="text" ng-model="$parent.prop1">

Now to make our example work properly we can modify it as below,

Here is the PLUNK.

So what exactly we did is we have modified  $scope.mySkill = “Java” to $scope.mySkill = {fav: “Java”} and used mySkill.fav as our model. So now inside ng-repeat It will not create a duplicate mySkill property in the child scope instead it will update the parent scope mySkill.fav property and everything will work as expected.

This is one of the “Best Practices” in Angular JS.

Summary:

If we use a primitive type (as ‘mySkill’ in 1st example) as model for data binding, essentially ng-repeat will create a new child scope property with the same name . Changing the child scope property’s value (i.e., using ng-model, hence child scope property mySkill) does not change the  parent scope mySkill property. So in my first example above, each child scope gets a mySkill property that is independent of the mySkill property defined in the controller or the parent scope. But if we will use a Object type , It will use prototypical inheritance and always update the property on the parent scope.

Advertisements

Preventing Clickjacking Attacks in ColdFusion

What is Clickjacking Attack?
As per OWASP,
Clickjacking, also known as a “UI redress attack”, is when an attacker uses multiple transparent or opaque layers to trick a user into clicking on a button or link on another page when they were intending to click on the the top level page. Thus, the attacker is “hijacking” clicks meant for their page and routing them to another page, most likely owned by another application, domain, or both.

Lets see an example:

  1. A visitor is lured to evil page. No matter how, may be by clicking on an email.
  2. This page will contain a link called “Get FREE IPOD” with z-index set to -1;
  3. This page also contains a transparent iframe from the victim domain, say facebook.com and positions the facebook like button right over the link.So now the facebook like button is not visible , but the “Get FREE IPOD” link is visible. Now if the user will clickon this link unknowingly he is clicking of the facebook like button.

Here is an example:

<html>
    <head>
        <script>
          window.fbAsyncInit = function() {
            FB.init({
              appId      : '754831697896892',
              xfbml      : true,
              version    : 'v2.1'
            });
          };
    
          (function(d, s, id){
             var js, fjs = d.getElementsByTagName(s)[0];
             if (d.getElementById(id)) {return;}
             js = d.createElement(s); js.id = id;
             js.src = "//connect.facebook.net/en_US/sdk.js";
             fjs.parentNode.insertBefore(js, fjs);
           }(document, 'script', 'facebook-jssdk'));
        </script>
        <style>
            iframe { /* iframe from facebook.com */
              width:140px;
              height:100px;
              margin-top: 100px;
              margin-left: 50px;
              position:absolute;
              top:0; left:0;
              filter:alpha(opacity=50); 
              opacity:0.5;   //Here we have set the opacity to 0.5 so its partly visible, we can make it 0 to hide the iframe
            }
            .a{
                margin-top: 95px;
            }
        </style>
    </head>
    <body>
        <div class="a">
            <a  href="http://www.google.com" target="_blank" style="position:relative;left:20px;z-index:-1">Get Free IPOD!</a>
        </div>
        //www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FTimesnow&width&layout=button&action=like&show_faces=false&share=false&height=35&appId=754831697896892
    </body>
</html>

JS fiddle: http://jsfiddle.net/5e5kvxk4/4/

Facebook Like button,twitter Follow button already attacked this way multiple times before.http://nakedsecurity.sophos.com/2011/03/30/facebook-adds-speed-bump-to-slow-down-likejackers/.

Q. Does my site is vulnerable clickjacking attacks?

If  there is an action on your site that can be done with a single click – it may be clickjacked.

Defense:

The most common defense, called frame busting, prevents a site from functioning when loaded inside a frame. But there are some cases where the page is intended to be open inside an iframe for example facebook Like and twitter Follow buttons. So they suffer from clickjacking attacks. So to prevent this kind of attacks facebook and twitter opens a popup asking for confirmation when user clicks on the iframe.

Frame Busting:

This is the technique which prevents a site from loading inside an iframe. This technique is very easy to implement also. We just need to add ‘X-Frame-Options’ to our response header. This option is used to indicate the browser weather or not to allow a page render inside <iframe>,<frame>,<object>.

There are three possible values for X-Frame-Options:
DENY
The page cannot be displayed in a frame, regardless of the site attempting to do so.
SAMEORIGIN
The page can only be displayed in a frame on the same origin as the page itself.
ALLOW-FROM uri
The page can only be displayed in a frame on the specified origin.

We can configure at web server level to send X-Frame-Options header for all pages of our site.

IIS

<system.webServer>
  ...
  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>
  ...
</system.webServer>

Apache

Header always append X-Frame-Options SAMEORIGIN

Configuring Coldfusion server for preventing Clickjacking attacks:

  1. Open the file Web.xml located inside server-root/WEB-INF.
  2. Now we can add filter mappings for our application with one of the two filters already specified.
    CFClickJackFilterSameOrigin or CFClickJackFilterDeny.
  3. Now let’s say we have an application testsite, which we want to protect against clickjacking by denying a frame for the application. To do so, add the following in the web.xml file.
    <filter-mapping> 
        <filter-name>CFClickJackFilterDeny</filter-name> 
        <url-pattern>/testClick/*</url-pattern>
    </filter-mapping>

Inheritance In JavaScript

In my previous blog I had discussed about creating Objects in JavaScript. As we know JavaScript is a class-less language,so in this blog I will discuss about how Javascript supports inheritance at Object level. Javascript supports prototypical inheritance instead of regular classical inheritance.

Now lets discuss about two important concepts of prototypical inheritance in JavaScript, i.e __proto__ and prototype.

prototype
prototype is a property belonging only to functions. It is used to build __proto__ when the function happens to be used as a constructor with the new keyword.

__proto__
It is a property that all objects have and  pointing to its prototype. This is the property which is used by the JavaScript engine for inheritance. __proto__ is the actual object that is used in the lookup chain to resolve methods.According to ECMA specifications it is supposed to be an internal property, however most vendors allow it to be accessed and modified.

Ex:

function Point(x, y) {
   this.x = x;
   this.y = y;
}
var myPoint = new Point();
console.log(myPoint.__proto__ === Point.prototype); //true
console.log(Point.__proto__ === Function.prototype);  //true

Here Point is a constructor function, it builds an object (data structure) procedurally.
As myPoint is an object constructed by Point(), so Point.prototype gets saved to myPoint.__proto__ at the time of object creation.Point is a constructor function,so it has a prototype property.In javascript functions are also treated as objects,
So Function.prototype gets saved to Point.__proto__   at the time of creation of the function.

CaptureNow lets discuss about how we can inherit objects in JavaScript using prototypical inheritance.

Inheriting a Object created using Object literal syntax:

Object.create():

Douglas Crockford created the Object.create() method, which is used in a fundamental way to implement inheritance in Javascript.The crux of the matter with this Object.create method is that we pass into it an object that we want to inherit from, and it returns a new object that inherits from the object we passed into it.

Ex:

var Point = {x:4 , y:5};
var ColorPoint = Object.create(Point);
ColorPoint.color = "Red";
console.log(ColorPoint.__proto__ === Point);  //true  
console.log(Point.__proto__ === Object.prototype); //true

This creates a new object named ColorPoint by inheriting the properties of Point object and added a new property called ‘color’. Object.create() method simply sets the __proto__ property of ColorPoint object to Point object. This is called as prototypical inheritance.

Inheriting a Object created using constructor function:

In this case to implement inheritance we will write our own custom function named inheritPrototype(childObj,parentObj) which will accept the child and parent object as function parameter and will set the childObject prototype to parentObject’s prototype, so that child object can inherit everything from parent object. Let’s see how we can do this.

Ex:

// constructor of Point object
function Point(x,y){
    this.x = x;
    this.y = y;
}
Point.prototype = {
    dist: function(){
        return Math.sqrt((this.x*this.x)+(this.y*this.y));
    },
    toString: function(){
         return "("+this.x+", "+this.y+")";
    }
}

Here we have created Point Object’s constructor and added to methods to its prototype. These two methods will be shared by all the instances of Point Object.

// constructor of ColorPoint Object
function ColorPoint(x, y, color) {
    Point(this, x, y);
    this.color = color;
}
inheritPrototype(ColorPoint,Point);

Here inside ColorPoint constructor we are calling to Point object constructor to set the properties for x any y and then added a new property named Color. Finally, we are calling inheritPrototype method to inherit the methods from Point object to ColorPoint.

function inheritPrototype(childObject, parentObject){

    // so the copyOfParent object now has everything the parentObject has 
    var copyOfParent = Object.create(parentObject.prototype);

    // we are manually setting the constructor of copyOfParent object to childObject,as in the next step we will override the prototype
    of the childObject with copyOfParent.
    copyOfParent.constructor = childObject;

    // we set the childObject prototype to copyOfParent, so that the childObject can in turn inherit everything from copyOfParent 
    (from parentObject).
    childObject.prototype = copyOfParent;
}

inheritPrototype() simply set the the prototype of ColorPoint to Point object’s prototype, so it inherits its methods.

var p = new Point(3,4);
var p1 = new ColorPoint(5,6,"red");
console.log(p.toString());
console.log(p1.toString());

I hope this helped you to understood at least the general concepts of Inheritance in JavaScript.Comment if you have any doubts.