Add an additional template object check (#2307)

* Add add an additional template object check

This makes it much harder for untrusted values in a databinding to masquerade as internal lit types. Specifically, this ensures that a template result value can't be obtained from JSON.parse.

Fixes #2306

* Add changeset

* Add a test of rendering a spoofed template result.

.changeset/red-cows-trade.md

@@ -0,0 +1,5 @@
+---
+'lit-html': patch
+---
+
+Added an additional check to prevent spoofing of internal lit types in data bindings.

.eslintignore

@@ -8,6 +8,7 @@ lerna-debug.log
 *.tgz
 *.tsbuildinfo
 .DS_Store
+.vscode/
 
 packages/benchmarks/generated/
 packages/benchmarks/generator/build/

.gitignore

@@ -3,3 +3,4 @@ lerna-debug.log
 *.tgz
 *.tsbuildinfo
 .DS_Store
+.vscode/

.prettierignore

@@ -8,6 +8,7 @@ lerna-debug.log
 *.tgz
 *.tsbuildinfo
 .DS_Store
+.vscode/
 
 packages/benchmarks/generated/
 packages/benchmarks/generator/build/

packages/lit-html/src/lit-html.ts

@@ -653,6 +653,22 @@ const getTemplateHtml = (
   const htmlResult: string | TrustedHTML =
     html + (strings[l] || '<?>') + (type === SVG_RESULT ? '</svg>' : '');
 
+  // A security check to prevent spoofing of Lit template results.
+  // In the future, we may be able to replace this with Array.isTemplateObject,
+  // though we might need to make that check inside of the html and svg
+  // functions, because precompiled templates don't come in as
+  // TemplateStringArray objects.
+  if (!Array.isArray(strings) || !strings.hasOwnProperty('raw')) {
+    let message = 'invalid template strings array';
+    if (DEV_MODE) {
+      message =
+        `Internal Error: expected template strings to be an array ` +
+        `with a 'raw' field. Please file a bug at ` +
+        `https://github.com/lit/lit/issues/new?template=bug_report.md ` +
+        `and include information about your build tooling, if any.`;
+    }
+    throw new Error(message);
+  }
   // Returned as an array for terseness
   return [
     policy !== undefined

packages/lit-html/src/static.ts

@@ -105,6 +105,11 @@ export const withStatic =
       const key = staticStrings.join('$$lit$$');
       strings = stringsCache.get(key)!;
       if (strings === undefined) {
+        // Beware: in general this pattern is unsafe, and doing so may bypass
+        // lit's security checks and allow an attacker to execute arbitrary
+        // code and inject arbitrary content.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (staticStrings as any).raw = staticStrings;
         stringsCache.set(
           key,
           (strings = staticStrings as unknown as TemplateStringsArray)

packages/lit-html/src/test/lit-html_test.ts

@@ -3062,6 +3062,26 @@ suite('lit-html', () => {
     });
   });
 
+  test(`don't render simple spoof template results`, () => {
+    const spoof = {
+      ['_$litType$']: 1,
+      strings: ['<div>spoofed string</div>'],
+      values: [],
+    };
+    const template = html`<div>${spoof}</div>`;
+    let threwError = false;
+    try {
+      render(template, container);
+    } catch {
+      threwError = true;
+    }
+    assert.equal(stripExpressionMarkers(container.innerHTML), '');
+    assert.isTrue(
+      threwError,
+      `Expected an error when rendering a spoofed template result`
+    );
+  });
+
   const warningsSuiteFunction = DEV_MODE ? suite : suite.skip;
 
   warningsSuiteFunction('warnings', () => {