Start learning free

LESSON 100 OF 173 · BACKEND: USERS AND SECURITY

Escape What You Echo

Practice

When an Express route answers a text with res.send, Express sends it as a web page: HTML. If that page repeats something a user typed, and they typed <script>alert(1)</script>, the browser runs that script on your site, as whoever is looking at the page. This attack is called XSS (cross-site scripting).

The fix is to escape what you echo. escapeHtml, from the escape-html package, turns < into &lt; and > into &gt;. The browser shows those codes as the characters, and never runs them. For example, on a greeting route:

app.get("/hello", (req: Request, res: Response) => {
  const name = req.query.name || "friend";
  res.send("Hello, " + escapeHtml(name) + "!");
});

Here escapeHtml("<b>Mia</b>") gives &lt;b&gt;Mia&lt;/b&gt;: the visitor sees the tags as text, not a bold name. JSON answers don't need this, because a browser never runs a JSON answer as a page.

Your code must answer these requests. A user signed up with the email <script>alert(1)</script>@evil.com, and an admin added a product named <i>Desk</i>:

GET /welcome  (Authorization: Bearer <token>)
  →  200  Welcome back, &lt;script&gt;alert(1)&lt;/script&gt;@evil.com!
GET /search?q=ot
  →  200  Products matching ot: Notebook, Teapot
GET /search?q=sofa
  →  200  No products match sofa
GET /search?q=<script>alert(1)</script>
  →  200  No products match &lt;script&gt;alert(1)&lt;/script&gt;
GET /search?q=desk
  →  200  Products matching desk: &lt;i&gt;Desk&lt;/i&gt;

Your task: escape the email in /welcome. Then build GET /search: read q from the query string, find the products whose name contains it (typed as { name: string }[]), and answer the no-match text or the names found, with q and the names escaped.


Assignment
Follow the Coding Tutorial to escape the email in /welcome and to build a safe /search page.


Hint
Read the words with req.query.q || "" and give the query "%" + q + "%" as its ? value. You can join what escapeHtml(...) returns to normal text with +: put every part that doesn't come from your own code inside it.


STEP 1 OF 10
    Ctrl + Enter to check