From 20a9a1875e6716bd626d8e22320768a90b1d108f Mon Sep 17 00:00:00 2001
From: Patrick Mueller <patrick.mueller@elastic.co>
Date: Tue, 29 Apr 2025 08:08:28 -0400
Subject: [PATCH] change reporting usage of `handlebars` to `@kbn/handlebars`
 (#217778)

Change reporting's usage of `handlebars` to `@kbn/handlebars`. Also
added a test to ensure user input is HTML escaped (it always has been,
this just tests it).

There should be no change to the final rendered output, at all. These
changes only affect PDF and PNG reports, not CSV reports.

(cherry picked from commit 3b5e96a4b8dc3d2741de658ea9ad7981617fe3db)
---
 .../browsers/chromium/templates/index.test.ts | 124 ++++++++++++++++++
 .../browsers/chromium/templates/index.ts      |  23 +++-
 .../shared/screenshotting/tsconfig.json       |   1 +
 3 files changed, 144 insertions(+), 4 deletions(-)
 create mode 100644 x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.test.ts

diff --git a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.test.ts b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.test.ts
new file mode 100644
index 0000000000000..90fdf4576c59e
--- /dev/null
+++ b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.test.ts
@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { getHeaderTemplate, getFooterTemplate, getDefaultFooterLogo } from '.';
+
+let defaultFooterLogo: string;
+
+describe('templates/index', () => {
+  beforeAll(async () => {
+    defaultFooterLogo = (await getDefaultFooterLogo()).trim();
+  });
+
+  describe('getHeaderTemplate()', () => {
+    it('works with a plain logo', async () => {
+      const title = 'plain';
+      const result = await getHeaderTemplate({ title });
+      expect(result).toBe(getHeader(title));
+    });
+    it('works with an html title', async () => {
+      const title = '<b>html</b>';
+      const result = await getHeaderTemplate({ title });
+      expect(result).toBe(getHeader('&lt;b&gt;html&lt;/b&gt;'));
+    });
+  });
+
+  describe('getFooterTemplate()', () => {
+    it('works with no logo', async () => {
+      const result = await getFooterTemplate({});
+      expect(result).toBe(getFooter());
+    });
+    it('works with a plain logo', async () => {
+      const logo = 'http://example.com/favico.ico';
+      const result = await getFooterTemplate({ logo });
+      expect(result).toBe(getFooter(logo));
+    });
+    it('works with an html logo', async () => {
+      const logo = '"/><img src="';
+      const result = await getFooterTemplate({ logo });
+      expect(result).toBe(getFooter('&quot;/&gt;&lt;img src&#x3D;&quot;'));
+    });
+  });
+});
+
+function getHeader(title: string): string {
+  return `
+<style>
+  .myTitle {
+    font-size: 8px;
+    color: #aaa;
+    font-family: system-ui;
+    text-align: center;
+    width: 100%;
+  }
+</style>
+<span class="myTitle">${title}</span>
+`.trimStart();
+}
+
+function getFooter(logo?: string): string {
+  const hasLogo = !!logo;
+
+  if (!hasLogo) {
+    logo = defFooterLogo();
+  }
+  return `
+<style>
+  div.container {
+    position: relative;
+    font-size: 10px;
+    font-family: system-ui;
+    text-align: center;
+    color: #aaa;
+    width: 100%;
+  }
+  div.pages {
+    position: absolute;
+
+    left: 50%;
+    transform: translateX(-50%);
+
+    bottom: 3mm;
+
+    text-align: center;
+  }
+  img.logo {
+    position: absolute;
+
+    left: 2mm;
+    bottom: 3mm;
+
+    overflow: hidden;
+  }
+
+  div.poweredByElastic {
+    position: absolute;
+    color: #aaa;
+    font-size: 2mm;
+
+    left: 2mm;
+    bottom: 0;
+  }
+</style>
+<div class="container">
+  <!-- DPI is 72/96 so scaling of all values here must * 0.75 to get values on page  -->
+  <img class="logo" height="30mm" width="80mm" src="${logo}" />
+${getPoweredBy(hasLogo)}  <div class="pages">
+    <span class="pageNumber"></span>&nbsp;of&nbsp;<span class="totalPages"></span>
+  </div>
+</div>
+`.trimStart();
+}
+
+function getPoweredBy(hasLogo: boolean): string {
+  if (!hasLogo) return '';
+  return `  <div class="poweredByElastic">Powered by Elastic</div>\n`;
+}
+
+function defFooterLogo(): string {
+  return defaultFooterLogo!;
+}
diff --git a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.ts b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.ts
index 7034dac76cfca..179e21ce94265 100644
--- a/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.ts
+++ b/x-pack/platform/plugins/shared/screenshotting/server/browsers/chromium/templates/index.ts
@@ -8,12 +8,27 @@
 import { i18n } from '@kbn/i18n';
 import fs from 'fs/promises';
 import path from 'path';
-import Handlebars from 'handlebars';
+import Handlebars, { TemplateDelegate } from '@kbn/handlebars';
 import { assetPath } from '../../../constants';
 
-async function compileTemplate<T>(pathToTemplate: string): Promise<Handlebars.TemplateDelegate<T>> {
+// see: https://handlebarsjs.com/guide/builtin-helpers.html
+const HBCompileOptions = {
+  knownHelpersOnly: true,
+  knownHelpers: {
+    helperMissing: false,
+    blockHelperMissing: false,
+    each: false,
+    if: true,
+    unless: false,
+    with: false,
+    log: false,
+    lookup: false,
+  },
+};
+
+async function compileTemplate<T>(pathToTemplate: string): Promise<TemplateDelegate<T>> {
   const contentsBuffer = await fs.readFile(pathToTemplate);
-  return Handlebars.compile(contentsBuffer.toString());
+  return Handlebars.compileAST(contentsBuffer.toString(), HBCompileOptions);
 }
 
 interface HeaderTemplateInput {
@@ -30,7 +45,7 @@ export async function getHeaderTemplate({ title }: GetHeaderArgs): Promise<strin
   return template({ title });
 }
 
-async function getDefaultFooterLogo(): Promise<string> {
+export async function getDefaultFooterLogo(): Promise<string> {
   const logoBuffer = await fs.readFile(path.resolve(assetPath, 'img', 'logo-grey.png'));
   return `data:image/png;base64,${logoBuffer.toString('base64')}`;
 }
diff --git a/x-pack/platform/plugins/shared/screenshotting/tsconfig.json b/x-pack/platform/plugins/shared/screenshotting/tsconfig.json
index 200c6d9c2592e..67363ecf6ffde 100644
--- a/x-pack/platform/plugins/shared/screenshotting/tsconfig.json
+++ b/x-pack/platform/plugins/shared/screenshotting/tsconfig.json
@@ -26,6 +26,7 @@
     "@kbn/core-plugins-server",
     "@kbn/task-manager-plugin",
     "@kbn/screenshotting-server",
+    "@kbn/handlebars",
   ],
   "exclude": [
     "target/**/*",