From 030d175ee6923b88717cde7f536f82228a8d87ca Mon Sep 17 00:00:00 2001
From: Andrew Nowak <10963046+andrew-nowak@users.noreply.github.com>
Date: Mon, 22 Apr 2024 16:24:37 +0100
Subject: [PATCH] render html formatted instructions on printable pages
 (#27052)

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 4e9defc4cf9..8670639ca5e 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>