fix: Incorrect and slow parsing of base64 encoded CSS property values f…

…ixes #12
holtwick · Aug 29, 2024 · 4df8097 · 4df8097
1 parent d7f7489
commit 4df8097
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/htmlparser.spec.ts b/src/htmlparser.spec.ts
@@ -43,6 +43,27 @@ describe('htmlparser', () => {
     expect(dom.render()).toMatchInlineSnapshot(`"<p>Let&apos;s go</p>"`)
   })
 
+  it('should handle inline base64', () => {
+    // https://github.com/holtwick/zeed-dom/issues/12
+
+    const dom = parseHTML(`<div
+id="elem"
+style="
+width: 200px;
+background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc);
+height: 100px;">Test</div>`) as VHTMLDocument
+    const node = dom.querySelector('#elem')
+    expect(node).not.toBeNull()
+    expect(node?.style).toMatchInlineSnapshot(`
+      {
+        "background-image": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)",
+        "backgroundImage": "url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNy41LjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMTQ3IDIwMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxNDcgMjAwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc)",
+        "height": "100px",
+        "width": "200px",
+      }
+    `)
+  })
+
   it('should ignore escape for script etc.', () => {
     const html = `<script>
 var x = 1 & 4

diff --git a/src/vdom.ts b/src/vdom.ts
@@ -433,7 +433,10 @@ export class VElement extends VNodeQuery {
       const styleString = this.getAttribute('style')
       if (styleString) {
         let m: string[] | null
-        const re = /\s*([\w-]+)\s*:\s*([^;]+)/g
+
+        // Thanks to https://github.com/holtwick/zeed-dom/issues/12#issuecomment-2148998665
+        const re = /\s*([\w-]+)\s*:\s*((url\(.*?\)[^;]*|[^;]+))/gi
+
         // eslint-disable-next-line no-cond-assign
         while ((m = re.exec(styleString))) {
           const name = m[1]