fix(engine): avoid invalid scope tokens entirely (#4524)

Author: nolanlawson

packages/@lwc/engine-core/src/framework/template.ts

@@ -76,6 +76,14 @@ export function setVMBeingRendered(vm: VM | null) {
     vmBeingRendered = vm;
 }
 
+const VALID_SCOPE_TOKEN_REGEX = /^[a-zA-Z0-9\-_.]+$/;
+
+// See W-16614556
+// TODO [#2826]: freeze the template object
+function isValidScopeToken(token: any) {
+    return isString(token) && VALID_SCOPE_TOKEN_REGEX.test(token);
+}
+
 function validateSlots(vm: VM) {
     assertNotProd(); // this method should never leak to prod
 
@@ -272,10 +280,10 @@ function buildParseFragmentFn(
 
             // See W-16614556
             if (
-                (hasStyleToken && !isString(stylesheetToken)) ||
-                (hasLegacyToken && !isString(legacyStylesheetToken))
+                (hasStyleToken && !isValidScopeToken(stylesheetToken)) ||
+                (hasLegacyToken && !isValidScopeToken(legacyStylesheetToken))
             ) {
-                throw new Error('stylesheet token must be a string');
+                throw new Error('stylesheet token must be a valid string');
             }
 
             // If legacy stylesheet tokens are required, then add them to the rendered string

packages/@lwc/integration-karma/test/rendering/sanitize-stylesheet-token/index.spec.js

@@ -1,6 +1,7 @@
 import { createElement, setFeatureFlagForTest } from 'lwc';
 import { catchUnhandledRejectionsAndErrors } from 'test-utils';
 import Component from 'x/component';
+import Scoping from 'x/scoping';
 
 let caughtError;
 let logger;
@@ -19,58 +20,83 @@ afterEach(() => {
 
 const props = ['stylesheetToken', 'stylesheetTokens', 'legacyStylesheetToken'];
 
+const components = [
+    {
+        tagName: 'x-component',
+        Ctor: Component,
+        name: 'unscoped styles',
+    },
+    {
+        tagName: 'x-scoping',
+        Ctor: Scoping,
+        name: 'scoped styles',
+    },
+];
+
 props.forEach((prop) => {
     describe(prop, () => {
-        beforeEach(() => {
-            setFeatureFlagForTest('ENABLE_LEGACY_SCOPE_TOKENS', prop === 'legacyStylesheetToken');
-        });
+        components.forEach(({ tagName, Ctor, name }) => {
+            describe(name, () => {
+                beforeEach(() => {
+                    setFeatureFlagForTest(
+                        'ENABLE_LEGACY_SCOPE_TOKENS',
+                        prop === 'legacyStylesheetToken'
+                    );
+                });
 
-        afterEach(() => {
-            setFeatureFlagForTest('ENABLE_LEGACY_SCOPE_TOKENS', false);
-            // We keep a cache of parsed static fragments; these need to be reset
-            // since they can vary based on whether we use the legacy scope token or not.
-            window.__lwcResetFragmentCache();
-            // Reset template object for clean state between tests
-            Component.resetTemplate();
-        });
+                afterEach(() => {
+                    setFeatureFlagForTest('ENABLE_LEGACY_SCOPE_TOKENS', false);
+                    // We keep a cache of parsed static fragments; these need to be reset
+                    // since they can vary based on whether we use the legacy scope token or not.
+                    window.__lwcResetFragmentCache();
+                    // Reset template object for clean state between tests
+                    Ctor.resetTemplate();
+                });
 
-        it('W-16614556 should not render arbitrary content via stylesheet token', async () => {
-            const elm = createElement('x-component', { is: Component });
-            elm.propToUse = prop;
-            try {
-                document.body.appendChild(elm);
-            } catch (err) {
-                // In synthetic custom element lifecycle, the error is thrown synchronously on `appendChild`
-                caughtError = err;
-            }
+                it('W-16614556 should not render arbitrary content via stylesheet token', async () => {
+                    const elm = createElement(tagName, { is: Ctor });
+                    elm.propToUse = prop;
+                    try {
+                        document.body.appendChild(elm);
+                    } catch (err) {
+                        // In synthetic custom element lifecycle, the error is thrown synchronously on `appendChild`
+                        caughtError = err;
+                    }
 
-            await Promise.resolve();
+                    await Promise.resolve();
 
-            if (process.env.NATIVE_SHADOW && process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION) {
-                // If we're rendering in native shadow and the static content optimization is disabled,
-                // then there's no problem with non-string stylesheet tokens because they are only rendered
-                // as class attribute values using either `classList` or `setAttribute` (and this only applies
-                // when `*.scoped.css` is being used).
-                expect(elm.shadowRoot.children.length).toBe(1);
-            } else {
-                expect(elm.shadowRoot.children.length).toBe(0); // does not render
+                    if (
+                        process.env.NATIVE_SHADOW &&
+                        process.env.DISABLE_STATIC_CONTENT_OPTIMIZATION
+                    ) {
+                        // If we're rendering in native shadow and the static content optimization is disabled,
+                        // then there's no problem with non-string stylesheet tokens because they are only rendered
+                        // as class attribute values using either `classList` or `setAttribute` (and this only applies
+                        // when `*.scoped.css` is being used).
+                        expect(elm.shadowRoot.children.length).toBe(1);
+                    } else {
+                        expect(elm.shadowRoot.children.length).toBe(0); // does not render
 
-                expect(caughtError).not.toBeUndefined();
-                expect(caughtError.message).toMatch(
-                    /stylesheet token must be a string|Failed to execute 'setAttribute'|Invalid qualified name|String contains an invalid character|The string contains invalid characters/
-                );
+                        expect(caughtError).not.toBeUndefined();
+                        expect(caughtError.message).toMatch(
+                            /stylesheet token must be a valid string|Failed to execute 'setAttribute'|Invalid qualified name|String contains an invalid character|The string contains invalid characters/
+                        );
 
-                if (process.env.NODE_ENV === 'production') {
-                    // no warnings in prod mode
-                    expect(logger).not.toHaveBeenCalled();
-                } else {
-                    // dev mode
-                    expect(logger).toHaveBeenCalledTimes(1);
-                    expect(logger.calls.allArgs()[0]).toMatch(
-                        new RegExp(`Mutating the "${prop}" property on a template is deprecated`)
-                    );
-                }
-            }
+                        if (process.env.NODE_ENV === 'production') {
+                            // no warnings in prod mode
+                            expect(logger).not.toHaveBeenCalled();
+                        } else {
+                            // dev mode
+                            expect(logger).toHaveBeenCalledTimes(1);
+                            expect(logger.calls.allArgs()[0]).toMatch(
+                                new RegExp(
+                                    `Mutating the "${prop}" property on a template is deprecated`
+                                )
+                            );
+                        }
+                    }
+                });
+            });
         });
     });
 });

packages/@lwc/integration-karma/test/rendering/sanitize-stylesheet-token/x/scoping/scoping.html

@@ -0,0 +1,3 @@
+<template>
+    <div></div>
+</template>

packages/@lwc/integration-karma/test/rendering/sanitize-stylesheet-token/x/scoping/scoping.js

@@ -0,0 +1,38 @@
+import { LightningElement, api } from 'lwc';
+import template from './scoping.html';
+
+export default class Component extends LightningElement {
+    @api propToUse;
+
+    count = 0;
+
+    render() {
+        const token = `foo"yolo="haha`;
+
+        const { propToUse } = this;
+        if (propToUse === 'stylesheetTokens') {
+            // this legacy format uses an object
+            template[propToUse] = {
+                hostAttribute: token,
+                shadowAttribute: token,
+            };
+        } else {
+            // stylesheetToken or legacyStylesheetToken
+            // this format uses a string
+            template[propToUse] = token;
+        }
+
+        return template;
+    }
+}
+
+// Reset template object for clean state between tests
+const { stylesheetToken, stylesheetTokens, legacyStylesheetToken } = template;
+
+Component.resetTemplate = () => {
+    Object.assign(template, {
+        stylesheetToken,
+        stylesheetTokens,
+        legacyStylesheetToken,
+    });
+};

packages/@lwc/integration-karma/test/rendering/sanitize-stylesheet-token/x/scoping/scoping.scoped.css

@@ -0,0 +1,3 @@
+div {
+    color: red;
+}