fix: escape HTML attributes in image and link components to prevent XSS vulnerabilities

Author: sy-records

src/core/render/compiler/image.js

@@ -14,7 +14,7 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>
     }
 
     if (title) {
-      attrs.push(`title="${title}"`);
+      attrs.push(`title="${escapeHtml(title)}"`);
     }
 
     if (config.size) {
@@ -28,6 +28,7 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>
 
     if (config.class) {
       let classes = config.class;
+      console.log(classes);
       if (Array.isArray(config.class)) {
         classes = config.class.join(' ');
       }
@@ -42,7 +43,7 @@ export const imageCompiler = ({ renderer, contentBase, router }) =>
       url = getPath(contentBase, getParentPath(router.getCurrentPath()), href);
     }
 
-    return /* html */ `<img src="${escapeHtml(url)}" data-origin="${escapeHtml(href)}" alt="${text}" ${attrs.join(
+    return /* html */ `<img src="${escapeHtml(url)}" data-origin="${escapeHtml(href)}" alt="${escapeHtml(text)}" ${attrs.join(
       ' ',
     )} />`;
   });

src/core/render/compiler/link.js

@@ -65,7 +65,7 @@ export const linkCompiler = ({
     }
 
     if (title) {
-      attrs.push(`title="${title}"`);
+      attrs.push(`title="${escapeHtml(title)}"`);
     }
 
     return /* html */ `<a href="${escapeHtml(href)}" ${attrs.join(' ')}>${text}</a>`;

test/integration/example.test.js

@@ -228,9 +228,9 @@ describe('Creating a Docsify site (integration tests in Jest)', function () {
           # Text between
 
           [filename](_media/example3.js ':include :fragment=something_else_not_code')
-          
+
           [filename](_media/example4.js ':include :fragment=demo')
-          
+
           # Text after
         `,
       },
@@ -303,4 +303,26 @@ Command | Description | Parameters
     expect(mainText).toContain('Something');
     expect(mainText).toContain('this is include content');
   });
+
+  test.each([
+    { type: 'iframe', selector: 'iframe' },
+    { type: 'video', selector: 'video' },
+    { type: 'audio', selector: 'audio' },
+  ])('embed %s escapes URL for XSS safety', async ({ type, selector }) => {
+    const dangerousUrl = 'https://example.com/?q="><svg/onload=alert(1)>';
+
+    await docsifyInit({
+      markdown: {
+        homepage: `[media](${dangerousUrl} ':include :type=${type}')`,
+      },
+    });
+
+    expect(
+      await waitForFunction(() => !!document.querySelector(selector)),
+    ).toBe(true);
+
+    const mediaElm = document.querySelector(selector);
+    expect(mediaElm.getAttribute('src')).toBe(dangerousUrl);
+    expect(mediaElm.hasAttribute('onload')).toBe(false);
+  });
 });

test/integration/render.test.js

@@ -241,6 +241,16 @@ Text</p></div>"
         '"<p><img src="http://imageUrl" data-origin="http://imageUrl" alt="alt text" width="50" /></p>"',
       );
     });
+
+    test('escapes image alt and title to prevent attribute injection', async function () {
+      const output = window.marked(
+        '![alt" onerror="alert(1)](http://imageUrl \'title" onerror="alert(1)\')',
+      );
+
+      expect(output).not.toContain(' onerror="alert(1)"');
+      expect(output).toContain('alt="alt&quot; onerror=&quot;alert(1)"');
+      expect(output).toContain('title="title&quot; onerror=&quot;alert(1)"');
+    });
   });
 
   // Headings
@@ -377,6 +387,15 @@ Text</p></div>"
         `"<p><a href="http://url" target="_blank" rel="noopener" id="someCssID">alt text</a></p>"`,
       );
     });
+
+    test('escapes link title to prevent attribute injection', async function () {
+      const output = window.marked(
+        `[alt text](http://url 'title" onclick="alert(1)')`,
+      );
+
+      expect(output).not.toContain(' onclick="alert(1)"');
+      expect(output).toContain('title="title&quot; onclick=&quot;alert(1)"');
+    });
   });
 
   // Skip Link