From 2030344a971d618fd865071a128c6d988025888b Mon Sep 17 00:00:00 2001
From: Andrew Nowak <andrew.nowak@guardian.co.uk>
Date: Mon, 15 Apr 2024 11:19:36 +0100
Subject: [PATCH] render html formatted instructions on printable pages

This just uses Twirl's `@Html` renderer to output the HTML without any
escaping - which is a potential XSS vector! If a crossword were uploaded
with a malicious script or iframe tag (or anything else) it would be
rendered and run in reader's browsers.

However: crosswordv2 does already run sanitization of the tags provided
to CAPI and downstream services, rejecting any crossword that contains a
tag that is not one of span,i,b,sup,sup for clues, and this will be
extended for instructions when supported there.

`@Html` is also already used several times in the crosswords templates;
for providing formatted clues
(<https://github.com/guardian/frontend/blob/b799f043d2343d2caf444114fc78285a4ef9cb0b/applications/app/views/fragments/crosswords/crosswordEntries.scala.html#L8>),
and formatted instructions for the main/interactive crossword pages
(<https://github.com/guardian/frontend/blob/b799f043d2343d2caf444114fc78285a4ef9cb0b/applications/app/views/fragments/crosswords/crosswordMetaHeader.scala.html#L53>),
so doing the same on the printable page isn't really making anything
worse, though we could consider doing some more strict validation on the
rendering layer too in the future, either here or in dcr.
---
 .../fragments/crosswords/printableCrosswordBody.scala.html      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/applications/app/views/fragments/crosswords/printableCrosswordBody.scala.html b/applications/app/views/fragments/crosswords/printableCrosswordBody.scala.html
index 4e9defc4cf94..8670639ca5e3 100644
--- a/applications/app/views/fragments/crosswords/printableCrosswordBody.scala.html
+++ b/applications/app/views/fragments/crosswords/printableCrosswordBody.scala.html
@@ -12,7 +12,7 @@ <h1 class="printable-crossword__title">
     </h1>
 
     @crosswordPage.crossword.instructions.map { instructions =>
-        <h2 class="printable-crossword__instructions"><strong>Special instructions:</strong> @instructions</h2>
+        <h2 class="printable-crossword__instructions"><strong>Special instructions:</strong> @Html(instructions)</h2>
     }
 
     <div class="printable-crossword__grid">@crosswordPage.svg</div>