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/**/*",