Cross-Site Request Forgery In ASP.NET MVC

Here will learn what Cross- site Request forgery in ASP.NET MVC is and how to protect our ASP.NET MVC application from the CSRF.

Cross- site Request forgery is abbreviated as “CSRF”.

What is CSRF

CSRF is an attack in which a user logs in to a website like ABC.com and after login user opens other site called malicious site in another tab, then this malicious site sends request to (ABC.com) valid site using existing credential or existing session for attacking the site. Valid site( ABC.com) assumes that this coming request is a valid request or coming from a valid user, so it executes that request and site is hacked by the CSRF.



After recognizing this attack ,Microsoft provides an Attribute called “AntiForgeryToken”. It is very simple to use in our site ,just we need to add “@Html.AntiForgeryToken” in view with that we need to add this in controller also as a attribute [ValidateAntiForgeryToken] to validating this. Basically AntiForgeryToken is used in HTTPPost method.

Now we learn this with an example using ASP.NET MVC.

Go to visual studio and create a new project and select an ASP.NET MVC 4 Web Application and give the name for project ,in my case it is “CSRFInMVCApplication” after that click ok then a window will open from there select a template as “Basic” and view engine as “Rezor”.





After clicking ok it will create a project, After that right click on model folder and add a class name “CollageInfo.cs”, and write the following code to this class,

public class CollageInfo
{
    [Key]
    public int CollageID
    {
        get;
        set;
    }
    [Required(ErrorMessage = " please Enter Name")]
    public string CollageName
    {
        get;
        set;
    }
    [Required(ErrorMessage = "pleaes Enter Address")]
    public string CollageAddress
    {
        get;
        set;
    }
    [Required(ErrorMessage = "please Enter Department")]
    public string CollageDepartment
    {
        get;
        set;
    }
}

After completion of model class we need to add a controller to this project. For that right click on the controller folder and give the name as “CollageController” with Empty MVC Controller template.



After adding controller we need to add action method name “collageInfo” with [HttpGet] and [HttpPost]. So for that write the following code in controller collageInfo action method.

[HttpGet]
public ActionResult collageInfo()
    {
        return View();
    }
    [HttpPost]
public ActionResult collageInfo(CollageInfo _clgInfo)
{
    return View(_clgInfo);
}

After adding the action method we need to add the view. For adding the view right click on the collageInfo action method and add the view like the following,



After clicking on add it will generate code for the view. Here's the code for view,

@model CSRFInMVCApplication.Models.CollageInfo
@{
    ViewBag.Title = "collageInfo";
}

<h2>collageInfo</h2>
    @using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

<fieldset>
    <legend>CollageInfo</legend>
    <div class="editor-label">
        @Html.LabelFor(model => model.CollageName)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CollageName)
        @Html.ValidationMessageFor(model => model.CollageName)
<   /div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CollageAddress)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CollageAddress)
        @Html.ValidationMessageFor(model => model.CollageAddress)
    </div>
    <div class="editor-label">
        @Html.LabelFor(model => model.CollageDepartment)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CollageDepartment)
        @Html.ValidationMessageFor(model => model.CollageDepartment)
    </div>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>
    @section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Now run your application, go to the following URL and see the output

http://localhost:50688/Collage/Collageinfo



Right click on this page and click on View Source, you will see source code of this page and save this code as

.HTML file



After saving this file as .HTML, now open this file (.HTML).

Code for HTML file is

<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>collageInfo</title>
    <link href="/Content/site.css" rel="stylesheet" />
    <script src="/Scripts/modernizr-2.6.2.js"></script>
</head>

<body>
    <h2>collageInfo</h2>
    <form action="http://localhost:50688/Collage/Collageinfo" method="post">
        <fieldset>
            <legend>CollageInfo</legend>
            <div class="editor-label"> <label for="CollageName">CollageName</label> </div>
            <div class="editor-field"> <input class="text-box single-line" data-val="true" data-val-required=" please Enter Name" id="CollageName" name="CollageName" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="CollageName" data-valmsg-replace="true"></span> </div>
            <div class="editor-label"> <label for="CollageAddress">CollageAddress</label> </div>
            <div class="editor-field"> <input class="text-box single-line" data-val="true" data-val-required="pleaes Enter Address" id="CollageAddress" name="CollageAddress" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="CollageAddress" data-valmsg-replace="true"></span> </div>
            <div class="editor-label"> <label for="CollageDepartment">CollageDepartment</label> </div>
            <div class="editor-field"> <input class="text-box single-line" data-val="true" data-val-required="please Enter Department" id="CollageDepartment" name="CollageDepartment" type="text" value="" /> <span class="field-validation-valid" data-valmsg-for="CollageDepartment" data-valmsg-replace="true"></span> </div>
            <p> <input type="submit" value="Create" /> </p>
        </fieldset>
    </form>
    <div> <a href="/Collage">Back to List</a> </div>
    <script src="/Scripts/jquery-1.8.2.js"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
</body>

</html>

Now double click on html file and enter some data then click on “Create”, this window will be same like view.

Now enter some data and click on “Create” button .



Now enter some data and click on “Create” button .



When you click on create button, you will see that this is redirecting to action method “CollageInfo”, its called CSRF attack.

To prevent from this attack, Microsoft provide us a keyword name “@Html.AntiForgeryToken() “ For view, we have to add this keyword as shown below,



After this we need to add a attribute to action method attribute is [ValidateAntiForgeryToken]



Now if you will run your HTML file and will click on create button it will give error name is required anti-forgery form field "__RequestVerificationToken" is not present

In this way we can prevent this CSRF attack.