Merge pull request #21479 from ubeddulla/sanitize-url-attr-case

sanitize url attributes case-insensitively

Author: NullVoxPopuli

packages/@glimmer-workspace/integration-tests/test/attributes-test.ts

@@ -625,6 +625,18 @@ export class AttributesTests extends RenderTest {
     this.assertHTML(`<object data="${allowedUrl}"></object>`);
     this.assertStableNodes();
   }
+
+  @test
+  'marks javascript: protocol as unsafe on a camelCased url attribute'() {
+    // `formAction` resolves to the DOM property, so the attribute name reaches
+    // the sanitizer camelCased rather than as the lowercase `formaction`.
+    this.render('<button formAction={{this.foo}}></button>', { foo: 'javascript:foo()' });
+    let button = this.element.firstChild as SimpleElement;
+    this.assert.strictEqual(this.readDOMAttr('formAction', button), 'unsafe:javascript:foo()');
+
+    this.rerender({ foo: 'http://foo.bar/derp' });
+    this.assert.strictEqual(this.readDOMAttr('formAction', button), 'http://foo.bar/derp');
+  }
 }
 
 jitSuite(AttributesTests);

packages/@glimmer/runtime/lib/dom/sanitized-values.ts

@@ -19,20 +19,28 @@ function has(array: Array<string>, item: string): boolean {
 function checkURI(tagName: Nullable<string>, attribute: string): boolean {
   // SVG tagNames are case-preserved, so the SVG `<a>` element comes through as
   // lowercase `a` and never matches the uppercase `badTags` entries unless we
-  // normalize first.
-  return (tagName === null || has(badTags, tagName.toUpperCase())) && has(badAttributes, attribute);
+  // normalize first. The attribute name can likewise arrive camelCased (e.g.
+  // `formAction`) when the template author writes it that way and it resolves to
+  // a DOM property, so lower-case it before matching the lowercase lists.
+  return (
+    (tagName === null || has(badTags, tagName.toUpperCase())) &&
+    has(badAttributes, attribute.toLowerCase())
+  );
 }
 
 function checkDataURI(tagName: Nullable<string>, attribute: string): boolean {
   if (tagName === null) return false;
-  return has(badTagsForDataURI, tagName.toUpperCase()) && has(badAttributesForDataURI, attribute);
+  return (
+    has(badTagsForDataURI, tagName.toUpperCase()) &&
+    has(badAttributesForDataURI, attribute.toLowerCase())
+  );
 }
 
 function checkDataProtocol(tagName: Nullable<string>, attribute: string): boolean {
   if (tagName === null) return false;
   return (
     has(badTagsForDataProtocol, tagName.toUpperCase()) &&
-    has(badAttributesForDataProtocol, attribute)
+    has(badAttributesForDataProtocol, attribute.toLowerCase())
   );
 }