04 · XSS and Other Injection

<%= comment.body %>                     <%# escaped automatically %>
<%= raw comment.body %>                 <%# XSS %>
<%= comment.body.html_safe %>           <%# XSS: html_safe means "trust me" %>
<%== comment.body %>                    <%# same as raw %>

<%# HTML required: Rails' allowlist sanitizer (rails-html-sanitizer / Loofah) %>
<%= sanitize comment.body, tags: %w[b i em strong a p], attributes: %w[href] %>

<%# user-supplied links: validate the scheme yourself %>
<%= link_to "website", user.website if user.website.to_s.match?(%r{\Ahttps?://}) %>

// browser: textContent never parses HTML
li.textContent = comment.body;
li.innerHTML = comment.body;         // XSS

// when HTML is required: DOMPurify (browser) or sanitize-html (Node)
import DOMPurify from "dompurify";
div.innerHTML = DOMPurify.sanitize(userHtml,
  { ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p"], ALLOWED_ATTR: ["href"] });

// server templates (EJS): <%= x %> escapes, <%- x %> does NOT

# Jinja2 / Django templates escape {{ x }} automatically.
{{ comment.body|safe }}               {# XSS #}

# when HTML is required: nh3 (fast, Rust-based ammonia binding)
import nh3
clean = nh3.clean(user_html,
                  tags={"b", "i", "em", "strong", "a", "p"},
                  attributes={"a": {"href"}},
                  url_schemes={"http", "https"})

# escaping by hand outside templates
from markupsafe import escape
html = f"<li>{escape(name)}</li>"

<p><%= name %></p>                              <%# HTML body: ERB escapes %>
<div title="<%= name %>">                       <%# quoted attribute: escaped. Always quote! %>
<%= tag.div data: { user: @user.as_json } %>     <%# pass data to JS via data-* (JSON, escaped) %>
<a href="/search?q=<%= ERB::Util.url_encode(q) %>">   <%# URL parameter: url-encode the value %>
<script>const n = "<%= j name %>"</script>     <%# works, but a fragile context: avoid %>
<div style="color: <%= color %>">                <%# CSS: allowlist values only %>

// browser: pick the API that treats data as data
el.textContent = name;                          // HTML body
el.setAttribute("title", name);                 // attribute (fixed name)
el.dataset.user = JSON.stringify(user);         // data for scripts
url.searchParams.set("q", q);                   // URL parameter (encodeURIComponent)
el.style.setProperty("color", allowedColors.includes(c) ? c : "black");  // CSS via CSSOM + allowlist
el.setAttribute("onclick", userCode);            // event handlers: never

# config/initializers/content_security_policy.rb
policy.require_trusted_types_for :script
policy.trusted_types "dompurify", "default"

// Content-Security-Policy: require-trusted-types-for 'script'; trusted-types dompurify
const policy = trustedTypes.createPolicy("dompurify", {
  createHTML: (s) => DOMPurify.sanitize(s),
});
el.innerHTML = policy.createHTML(userHtml);   // allowed
el.innerHTML = userHtml;                      // TypeError: requires TrustedHTML

# gem "commonmarker": raw HTML is omitted by default (unsafe: false)
html = Commonmarker.to_html(params[:body])
safe = Rails::HTML5::SafeListSanitizer.new.sanitize(html)   # render, then sanitize
<%= sanitize markdown_html %>                              <%# same idea in views %>

import { marked } from "marked";
import DOMPurify from "isomorphic-dompurify";
const html = DOMPurify.sanitize(marked.parse(userMarkdown));   // render, then sanitize

import markdown, nh3
html = nh3.clean(markdown.markdown(user_markdown))          # render, then sanitize

# hand-built HTML string: no escaping happens here
render html: "<li>#{user.display_name}</li>".html_safe

# render a partial (escaped) or return JSON
render partial: "users/chip", locals: { user: }   # <li><%= user.display_name %></li>
render json: { name: user.display_name }          # client uses textContent
# plain Ruby: helpers.tag.li(user.display_name) or ERB::Util.html_escape(name)

// server builds HTML by hand, client inserts it
app.get("/api/user-chip", (req, res) => res.send(`<li>${user.displayName}</li>`));
list.insertAdjacentHTML("beforeend", await (await fetch("/api/user-chip")).text());

// return data, let the client build DOM safely
app.get("/api/user", (req, res) => res.json({ name: user.displayName }));
const li = document.createElement("li");
li.textContent = (await (await fetch("/api/user")).json()).name;
list.append(li);

# returns hand-built HTML: no auto-escaping happens here
@app.get("/api/user-chip")
def chip():
    return f"<li>{user.display_name}</li>"

# either escape explicitly…
from markupsafe import escape
return f"<li>{escape(user.display_name)}</li>"
# …or return JSON and build DOM with textContent on the client
return jsonify(name=user.display_name)

system("convert #{name} -resize 200 thumb.png")   # one string → /bin/sh
`convert #{name}`  /  %x(convert #{name})  /  open("| #{cmd}")   # shell
system("convert", name, "-resize", "200", "thumb.png")       # argv, no shell
out, status = Open3.capture2e("convert", name, "-resize", "200", "thumb.png")
File.open(path)        # not Kernel#open(path), which runs "| cmd"

const { execFile } = require("node:child_process");
exec(`convert ${name} -resize 200 thumb.png`);           // shell parses name
execFile("convert", [name, "-resize", "200", "thumb.png"], cb);  // no shell
// also unsafe: spawn(cmd, { shell: true }), execSync(string)

import subprocess
os.system(f"convert {name} -resize 200 thumb.png")              # shell
subprocess.run(f"convert {name} ...", shell=True)                # shell
subprocess.run(["convert", name, "-resize", "200", "thumb.png"], check=True)  # no shell
# if you truly need a shell string, quote each value: shlex.quote(name)

# config/environments/production.rb: HostAuthorization (dev-only by default)
config.hosts = ["app.example.com", "www.example.com"]
config.host_authorization = { exclude: ->(req) { req.path == "/up" } }   # health check

# build email links from config, never from request.host
config.action_mailer.default_url_options = { host: "app.example.com", protocol: "https" }

const ALLOWED = new Set(["app.example.com", "www.example.com"]);
app.use((req, res, next) => ALLOWED.has(req.hostname) ? next() : res.sendStatus(400));
// build links from config, never from req.headers.host
const resetUrl = new URL(`/reset?token=${token}`, process.env.APP_BASE_URL);

# Django settings.py
ALLOWED_HOSTS = ["app.example.com", "www.example.com"]
# build links from config, not request.get_host()
reset_url = f"{settings.APP_BASE_URL}/reset?token={token}"