Skip to main content
U.S. flag

An official website of the United States government

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Output encoding

What is cross site scripting (XSS)?

Cross site scripting, or XSS, is a form of attack on a web application which involves executing code on a user's browser. Output encoding is a defense against XSS attacks.

To get a more extensive understanding of XSS, see excess xss.

How to correctly encode output

Protecting from XSS attacks requires developers to consider how data is being displayed on a page. If the data could come from a user's input in any way (including through the site's URL), then correct encoding of the output has to be considered.

Since most web applications at 18F are built through JavaScript or backend frameworks, this guide will go over output encoding issues by those frameworks in addition to plain JavaScript.

Vanilla JavaScript

When writing plain JavaScript, developers have to consider where data is coming from whenever it's being output in the web application. While data that comes from a backend database usually needs output encoding, code also could need output encoding when extracting data from the current page's url (which an attacker could modify and send to a user).

The excess xss prevention section has up-to-date information on how to prevent XSS attacks in all the possible ways they could happen.

React

By default React DOM escapes all output. This means that output in JSX components will usually be safe, which is great news. This is discussed in React's documentation.

There are some cases where output may not be correctly escaped in React components. Here are some of those cases:

  • Using the dangerouslySetInnerHTML prop (it's named this for a reason)
  • Passing state from the server, JSON stringifying it without serializing it
  • Using user supplied href values
  • Incorrect usages of eval

This dailyjs article discusses these various problems and how to avoid them.

Angular

Angular also does a good job of escaping output by default. In general, earlier versions of Angular 1 had more security vulnerabilities, so a safe bet is to ensure the project is on the most recent version of Angular. To learn more about potential vulnerabilities, the Angular site provides detailed information.

18F Engineering

An official website of the GSA’s Technology Transformation Services

Looking for U.S. government information and services?
Visit USA.gov