Security Issues with Single Page Apps
- by Stephen.Walther
Last week, I was asked to do a code review of a Single Page App built using the ASP.NET Web API, Durandal, and Knockout (good stuff!). In particular, I was asked to investigate whether there any special security issues associated with building a Single Page App which are not present in the case of a traditional server-side ASP.NET application.
In this blog entry, I discuss two areas in which you need to exercise extra caution when building a Single Page App. I discuss how Single Page Apps are extra vulnerable to both Cross-Site Scripting (XSS) attacks and Cross-Site Request Forgery (CSRF) attacks.
This goal of this blog post is NOT to persuade you to avoid writing Single Page Apps. I’m a big fan of Single Page Apps. Instead, the goal is to ensure that you are fully aware of some of the security issues related to Single Page Apps and ensure that you know how to guard against them.
Cross-Site Scripting (XSS) Attacks
According to WhiteHat Security, over 65% of public websites are open to XSS attacks. That’s bad. By taking advantage of XSS holes in a website, a hacker can steal your credit cards, passwords, or bank account information.
Any website that redisplays untrusted information is open to XSS attacks. Let me give you a simple example.
Imagine that you want to display the name of the current user on a page. To do this, you create the following server-side ASP.NET page located at http://MajorBank.com/SomePage.aspx:
<%@Page Language="C#" %>
<html>
<head>
<title>Some Page</title>
</head>
<body>
Welcome <%= Request["username"] %>
</body>
</html>
Nothing fancy here. Notice that the page displays the current username by using Request[“username”]. Using Request[“username”] displays the username regardless of whether the username is present in a cookie, a form field, or a query string variable.
Unfortunately, by using Request[“username”] to redisplay untrusted information, you have now opened your website to XSS attacks. Here’s how.
Imagine that an evil hacker creates the following link on another website (hackers.com):
<a href="/SomePage.aspx?username=<script src=Evil.js></script>">Visit MajorBank</a>
Notice that the link includes a query string variable named username and the value of the username variable is an HTML <SCRIPT> tag which points to a JavaScript file named Evil.js. When anyone clicks on the link, the <SCRIPT> tag will be injected into SomePage.aspx and the Evil.js script will be loaded and executed.
What can a hacker do in the Evil.js script? Anything the hacker wants. For example, the hacker could display a popup dialog on the MajorBank.com site which asks the user to enter their password. The script could then post the password back to hackers.com and now the evil hacker has your secret password.
ASP.NET Web Forms and ASP.NET MVC have two automatic safeguards against this type of attack: Request Validation and Automatic HTML Encoding.
Protecting Coming In (Request Validation)
In a server-side ASP.NET app, you are protected against the XSS attack described above by a feature named Request Validation. If you attempt to submit “potentially dangerous” content — such as a JavaScript <SCRIPT> tag — in a form field or query string variable then you get an exception.
Unfortunately, Request Validation only applies to server-side apps. Request Validation does not help in the case of a Single Page App. In particular, the ASP.NET Web API does not pay attention to Request Validation. You can post any content you want – including <SCRIPT> tags – to an ASP.NET Web API action.
For example, the following HTML page contains a form. When you submit the form, the form data is submitted to an ASP.NET Web API controller on the server using an Ajax request:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form data-bind="submit:submit">
<div>
<label>
User Name:
<input data-bind="value:user.userName" />
</label>
</div>
<div>
<label>
Email:
<input data-bind="value:user.email" />
</label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/knockout-2.1.0.js"></script>
<script>
var viewModel = {
user: {
userName: ko.observable(),
email: ko.observable()
},
submit: function () {
$.post("/api/users", ko.toJS(this.user));
}
};
ko.applyBindings(viewModel);
</script>
</body>
</html>
The form above is using Knockout to bind the form fields to a view model. When you submit the form, the view model is submitted to an ASP.NET Web API action on the server.
Here’s the server-side ASP.NET Web API controller and model class:
public class UsersController : ApiController
{
public HttpResponseMessage Post(UserViewModel user) {
var userName = user.UserName;
return Request.CreateResponse(HttpStatusCode.OK);
}
}
public class UserViewModel {
public string UserName { get; set; }
public string Email { get; set; }
}
If you submit the HTML form, you don’t get an error. The “potentially dangerous” content is passed to the server without any exception being thrown. In the screenshot below, you can see that I was able to post a username form field with the value “<script>alert(‘boo’)</script”.
So what this means is that you do not get automatic Request Validation in the case of a Single Page App. You need to be extra careful in a Single Page App about ensuring that you do not display untrusted content because you don’t have the Request Validation safety net which you have in a traditional server-side ASP.NET app.
Protecting Going Out (Automatic HTML Encoding)
Server-side ASP.NET also protects you from XSS attacks when you render content. By default, all content rendered by the razor view engine is HTML encoded. For example, the following razor view displays the text “<b>Hello!</b>” instead of the text “Hello!” in bold:
@{
var message = "<b>Hello!</b>";
}
@message
If you don’t want to render content as HTML encoded in razor then you need to take the extra step of using the @Html.Raw() helper.
In a Web Form page, if you use <%: %> instead of <%= %> then you get automatic HTML Encoding:
<%@ Page Language="C#" %>
<%
var message = "<b>Hello!</b>";
%>
<%: message %>
This automatic HTML Encoding will prevent many types of XSS attacks. It prevents <script> tags from being rendered and only allows <script> tags to be rendered which are useless for executing JavaScript.
(This automatic HTML encoding does not protect you from all forms of XSS attacks. For example, you can assign the value “javascript:alert(‘evil’)” to the Hyperlink control’s NavigateUrl property and execute the JavaScript).
The situation with Knockout is more complicated. If you use the Knockout TEXT binding then you get HTML encoded content. On the other hand, if you use the HTML binding then you do not:
<!-- This JavaScript DOES NOT execute -->
<div data-bind="text:someProp"></div>
<!-- This Javacript DOES execute -->
<div data-bind="html:someProp"></div>
<script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/knockout-2.1.0.js"></script>
<script>
var viewModel = {
someProp : "<script>alert('Evil!')<" + "/script>"
};
ko.applyBindings(viewModel);
</script>
So, in the page above, the DIV element which uses the TEXT binding is safe from XSS attacks. According to the Knockout documentation:
“Since this binding sets your text value using a text node, it’s safe to set any string value without risking HTML or script injection.”
Just like server-side HTML encoding, Knockout does not protect you from all types of XSS attacks. For example, there is nothing in Knockout which prevents you from binding JavaScript to a hyperlink like this:
<a data-bind="attr:{href:homePageUrl}">Go</a>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/knockout-2.1.0.js"></script>
<script>
var viewModel = {
homePageUrl: "javascript:alert('evil!')"
};
ko.applyBindings(viewModel);
</script>
In the page above, the value “javascript:alert(‘evil’)” is bound to the HREF attribute using Knockout. When you click the link, the JavaScript executes.
Cross-Site Request Forgery (CSRF) Attacks
Cross-Site Request Forgery (CSRF) attacks rely on the fact that a session cookie does not expire until you close your browser. In particular, if you visit and login to MajorBank.com and then you navigate to Hackers.com then you will still be authenticated against MajorBank.com even after you navigate to Hackers.com.
Because MajorBank.com cannot tell whether a request is coming from MajorBank.com or Hackers.com, Hackers.com can submit requests to MajorBank.com pretending to be you. For example, Hackers.com can post an HTML form from Hackers.com to MajorBank.com and change your email address at MajorBank.com. Hackers.com can post a form to MajorBank.com using your authentication cookie.
After your email address has been changed, by using a password reset page at MajorBank.com, a hacker can access your bank account.
To prevent CSRF attacks, you need some mechanism for detecting whether a request is coming from a page loaded from your website or whether the request is coming from some other website. The recommended way of preventing Cross-Site Request Forgery attacks is to use the “Synchronizer Token Pattern” as described here:
https://www.owasp.org/index.php/Cross-Site_Request_Forgery_%28CSRF%29_Prevention_Cheat_Sheet
When using the Synchronizer Token Pattern, you include a hidden input field which contains a random token whenever you display an HTML form. When the user opens the form, you add a cookie to the user’s browser with the same random token. When the user posts the form, you verify that the hidden form token and the cookie token match.
Preventing Cross-Site Request Forgery Attacks with ASP.NET MVC
ASP.NET gives you a helper and an action filter which you can use to thwart Cross-Site Request Forgery attacks. For example, the following razor form for creating a product shows how you use the @Html.AntiForgeryToken() helper:
@model MvcApplication2.Models.Product
<h2>Create Product</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken();
<div>
@Html.LabelFor( p => p.Name, "Product Name:")
@Html.TextBoxFor( p => p.Name)
</div>
<div>
@Html.LabelFor( p => p.Price, "Product Price:")
@Html.TextBoxFor( p => p.Price)
</div>
<input type="submit" />
}
The @Html.AntiForgeryToken() helper generates a random token and assigns a serialized version of the same random token to both a cookie and a hidden form field. (Actually, if you dive into the source code, the AntiForgeryToken() does something a little more complex because it takes advantage of a user’s identity when generating the token).
Here’s what the hidden form field looks like:
<input name=”__RequestVerificationToken” type=”hidden” value=”NqqZGAmlDHh6fPTNR_mti3nYGUDgpIkCiJHnEEL59S7FNToyyeSo7v4AfzF2i67Cv0qTB1TgmZcqiVtgdkW2NnXgEcBc-iBts0x6WAIShtM1″ />
And here’s what the cookie looks like using the Google Chrome developer toolbar:
You use the [ValidateAntiForgeryToken] action filter on the controller action which is the recipient of the form post to validate that the token in the hidden form field matches the token in the cookie. If the tokens don’t match then validation fails and you can’t post the form:
public ActionResult Create() {
return View();
}
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult Create(Product productToCreate) {
if (ModelState.IsValid) {
// save product to db
return RedirectToAction("Index");
}
return View();
}
How does this all work? Let’s imagine that a hacker has copied the Create Product page from MajorBank.com to Hackers.com – the hacker grabs the HTML source and places it at Hackers.com. Now, imagine that the hacker trick you into submitting the Create Product form from Hackers.com to MajorBank.com. You’ll get the following exception:
The Cross-Site Request Forgery attack is blocked because the anti-forgery token included in the Create Product form at Hackers.com won’t match the anti-forgery token stored in the cookie in your browser. The tokens were generated at different times for different users so the attack fails.
Preventing Cross-Site Request Forgery Attacks with a Single Page App
In a Single Page App, you can’t prevent Cross-Site Request Forgery attacks using the same method as a server-side ASP.NET MVC app. In a Single Page App, HTML forms are not generated on the server. Instead, in a Single Page App, forms are loaded dynamically in the browser.
Phil Haack has a blog post on this topic where he discusses passing the anti-forgery token in an Ajax header instead of a hidden form field. He also describes how you can create a custom anti-forgery token attribute to compare the token in the Ajax header and the token in the cookie. See:
http://haacked.com/archive/2011/10/10/preventing-csrf-with-ajax.aspx
Also, take a look at Johan’s update to Phil Haack’s original post:
http://johan.driessen.se/posts/Updated-Anti-XSRF-Validation-for-ASP.NET-MVC-4-RC
(Other server frameworks such as Rails and Django do something similar. For example, Rails uses an X-CSRF-Token to prevent CSRF attacks which you generate on the server – see http://excid3.com/blog/rails-tip-2-include-csrf-token-with-every-ajax-request/#.UTFtgDDkvL8 ).
For example, if you are creating a Durandal app, then you can use the following razor view for your one and only server-side page:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
@Html.AntiForgeryToken()
<div id="applicationHost">
Loading app....
</div>
@Scripts.Render("~/scripts/vendor")
<script type="text/javascript" src="~/App/durandal/amd/require.js"
data-main="/App/main"></script>
</body>
</html>
Notice that this page includes a call to @Html.AntiForgeryToken() to generate the anti-forgery token.
Then, whenever you make an Ajax request in the Durandal app, you can retrieve the anti-forgery token from the razor view and pass the token as a header:
var csrfToken = $("input[name='__RequestVerificationToken']").val();
$.ajax({
headers: { __RequestVerificationToken: csrfToken },
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
url: "/api/products",
data: JSON.stringify({ name: "Milk", price: 2.33 }),
statusCode: {
200: function () {
alert("Success!");
}
}
});
Use the following code to create an action filter which you can use to match the header and cookie tokens:
using System.Linq;
using System.Net.Http;
using System.Web.Helpers;
using System.Web.Http.Controllers;
namespace MvcApplication2.Infrastructure {
public class ValidateAjaxAntiForgeryToken : System.Web.Http.AuthorizeAttribute {
protected override bool IsAuthorized(HttpActionContext actionContext) {
var headerToken = actionContext
.Request
.Headers
.GetValues("__RequestVerificationToken")
.FirstOrDefault(); ;
var cookieToken = actionContext
.Request
.Headers
.GetCookies()
.Select(c => c[AntiForgeryConfig.CookieName])
.FirstOrDefault();
// check for missing cookie or header
if (cookieToken == null || headerToken == null) {
return false;
}
// ensure that the cookie matches the header
try {
AntiForgery.Validate(cookieToken.Value, headerToken);
} catch {
return false;
}
return base.IsAuthorized(actionContext);
}
}
}
Notice that the action filter derives from the base AuthorizeAttribute. The ValidateAjaxAntiForgeryToken only works when the user is authenticated and it will not work for anonymous requests.
Add the action filter to your ASP.NET Web API controller actions like this:
[ValidateAjaxAntiForgeryToken]
public HttpResponseMessage PostProduct(Product productToCreate) {
// add product to db
return Request.CreateResponse(HttpStatusCode.OK);
}
After you complete these steps, it won’t be possible for a hacker to pretend to be you at Hackers.com and submit a form to MajorBank.com. The header token used in the Ajax request won’t travel to Hackers.com.
This approach works, but I am not entirely happy with it. The one thing that I don’t like about this approach is that it creates a hard dependency on using razor. Your single page in your Single Page App must be generated from a server-side razor view. A better solution would be to generate the anti-forgery token in JavaScript.
Unfortunately, until all browsers support a way to generate cryptographically strong random numbers – for example, by supporting the window.crypto.getRandomValues() method — there is no good way to generate anti-forgery tokens in JavaScript. So, at least right now, the best solution for generating the tokens is the server-side solution with the (regrettable) dependency on razor.
Conclusion
The goal of this blog entry was to explore some ways in which you need to handle security differently in the case of a Single Page App than in the case of a traditional server app. In particular, I focused on how to prevent Cross-Site Scripting and Cross-Site Request Forgery attacks in the case of a Single Page App.
I want to emphasize that I am not suggesting that Single Page Apps are inherently less secure than server-side apps. Whatever type of web application you build – regardless of whether it is a Single Page App, an ASP.NET MVC app, an ASP.NET Web Forms app, or a Rails app – you must constantly guard against security vulnerabilities.
