Escaping done right

An analogy: a label maker

A label maker prints whatever you type. If someone types the printer's own control code, a careless label maker would obey it. A careful one prints a picture of that code instead. An HTML escaper is the careful label maker: special characters are printed, never obeyed.

The five characters

Order matters: ampersand first

If you replace < first, you get <. If you then replace &, that turns into <, and the visitor sees the text < instead of <. So replace & first, then the rest.

"<".replace("<", "&lt;").replace("&", "&amp;")   # '&amp;lt;'  wrong: escaped twice
"<".replace("&", "&amp;").replace("<", "&lt;")   # '&lt;'      right

Why quotes matter: attributes

Text does not only go between tags. It often goes inside an attribute, such as a search box that remembers what you typed:

template = '<input name="q" value="{}">'
typed = 'tent" onfocus="alert(1)'
print(template.format(typed))
# <input name="q" value="tent" onfocus="alert(1)">   the quote ended the value early

No angle bracket was needed. The " closed the value and the rest became a new attribute. Escaping " to " keeps it all inside the value. Escape ' too, because some templates use single quotes. And always put quotes around attribute values: without them, a single space is enough to start a new attribute.

What escaping does not cover

HTML escaping is the right tool for text between tags and inside quoted attributes. It is the wrong tool inside a <script> block, inside CSS, and for a link address: href="javascript:..." contains no special characters at all. For links, allow only addresses that start with https:// or http:// (or are relative). For data a script needs, put it in a data- attribute or a JSON block your framework builds for you (Django's json_script, for example).

The exercise

Write escape_html(text). Do not use html.escape here: the point is to build it. The tests try it between tags, in double- and single-quoted attributes, and on hundreds of random strings.

A common misconception

"Escaping twice is extra safe." It is not safe, it is broken: the visitor sees < junk on screen. Escape exactly once, at the moment text goes into the HTML.

// JavaScript
function escapeHtml(text) {
  return String(text)
    .replaceAll("&", "&")      // first
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#x27;");
}

// Rust (by hand, one pass)
fn escape_html(s: &str) -> String {
    let mut out = String::with_capacity(s.len());
    for c in s.chars() {
        match c {
            '&' => out.push_str("&amp;"),
            '<' => out.push_str("&lt;"),
            '>' => out.push_str("&gt;"),
            '"' => out.push_str("&quot;"),
            '\'' => out.push_str("&#x27;"),
            _ => out.push(c),
        }
    }
    out
}

// PHP has it built in
htmlspecialchars($text, ENT_QUOTES | ENT_HTML5, "UTF-8");