Prevent embedding images with empty src attribute

Author: UsajMarko

src/embed-images.ts

@@ -40,6 +40,17 @@ async function embedImageNode<T extends HTMLElement | SVGImageElement>(
 ) {
   const isImageElement = isInstanceOfElement(clonedNode, HTMLImageElement)
 
+  // Skip images with empty sources. Note that reading the src property of an HTMLImageElement (or href of SVGImageElement)
+  // which has an empty value will return the current URL.
+  // This is a workaround to prevent the loading of current page URL as an image when there are empty images in the DOM.
+  if (
+    (isImageElement && clonedNode.getAttribute('src') === '') ||
+    (isInstanceOfElement(clonedNode, SVGImageElement) &&
+      clonedNode.getAttribute('href') === '')
+  ) {
+    return
+  }
+
   if (
     !(isImageElement && !isDataUrl(clonedNode.src)) &&
     !(

test/resources/images/node-empty-png

@@ -0,0 +1 @@
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAAAXNSR0IArs4c6QAAEihJREFUeF7t3XeoHFUfBuBjb1FRrNgVO2IFCxYQe8GC2GIXBdsfKjYQbGCv2LCLYgGxoaIIKoqoiAXEhtiw9y528/Fb2P3ujffmbmLeJBufA6Ims+/OfWbuy8zsmdlZJkyYMKEZBAgQGACBWRTWAGwlq0iAQEdAYdkRCBAYGAGFNTCbyooSIKCw7AMECAyMgMIamE1lRQkQUFj2AQIEBkZAYQ3MprKiBAgoLPsAAQIDI6CwBmZTWVECBBSWfYAAgYERUFgDs6msKAECCss+QIDAwAgorIHZVFaUAAGFZR8gQGBgBBTWwGwqK0qAgMKyDxAgMDACCmtgNpUVJUBAYdkHCBAYGAGFNTCbyooSIKCw7AMECAyMgMIamE1lRQkQUFj2AQIEBkZAYQ3MprKiBAgoLPsAAQIDI6CwBmZTWVECBBSWfYAAgYERUFgDs6msKAECCss+QIDAwAgorIHZVFaUAAGFZR8gQGBgBBTWwGwqK0qAgMKyDxAgMDACCmtgNpUVJUBAYdkHCBAYGIFIYf3+++/txhtvnCTCrLPO2uaff/624IILtrXWWqsts8wyfaH9+OOP7bbbbhu27JxzztkOOeSQMV//4Ycftoceeqi33Lrrrts23HDDMV/XXeCLL75o999/f3vkkUdaZX366aet3nvVVVft/LPOOuu0vfbaq80999x9Z1qQAIH+BSKF9d1337WFFlqo/7VorS211FJt/Pjx7cgjj2zLLbfcqK99//332worrPCPv3/yySfb5ptvPsn3rKLZfvvte8ucfPLJ7ZxzzhlzPb///vt2yimntGuuuab9/fffk1x+iSWWaMcdd1w74ogj2rhx48bMtgABAv0LzDCF1V3leeedt11wwQWd4hppjFZYe++9d7vjjjumemG9/PLLbccdd+wcTU3OqPKsEjUIEJh6AtOksOaYY4624oorDlvrP/74o3NaVf8eaZx//vnthBNO+MdfjVZYdWpWeYstttioOpN7hPXKK6+0Lbfcsn399de9zPpZtttuu84/Sy+9dKtT248//rg98cQT7cEHH2w///xzZ9mNNtqoPfvss1NvS0kiQKBNk8Jafvnl23vvvfcP7r/++qt98MEH7corr2yXXXZZ+/PPP3vLzDLLLO35559vG2ywwbDXjVZYtdDZZ5/dOXUbbUxOYf30009tjTXW6JRgd6y33nrt9ttv71yvGmnUqeO5557bLr300s71LIXlN4zA1BWYroU19Ed54YUX2qabbtp+++233h/vtNNO7YEHHphkYc0222ytiq9GXft69913O0c9I43JKaxjjz22UzzdUR8MPPPMM31dl3rppZdaHSHeeeedU3drSSPwHxeYYQqrtkP9kp900km9TTLXXHO1b7/9ts0zzzy9P5v4CKtO2epIrI6IatRpWV1z+jeFVUeDK6+8cq8IZ5999vbaa6+1VVZZpe/dpU516/TRIEBg6gnMUIVVpVNTHYaOOqrZeOONRy2sXXfdtS2++OKdT/BqVFlVaf2bwjr99NPbGWec0Ys46KCD2k033TT11CURIDBFAjNUYdVPsOyyyw67bnTfffe1XXbZZZKFVQVT14xq1OngO++80+q62cSj31PC+oBg6DW3p556qm222WZTBOxFBAhMPYEZrrDqIvuLL77Y+wnrIvc+++wzycK699572yabbNK7yF0X3usC/JQUVl0DW2mllXovrflkX375ZatrZQYBAtNXYIYrrJr5/sMPP/RU6qho2223HbOwbr311nbAAQd0lqupDfXpXk11GDr6OcK666672p577tl72dZbb90effTR6buVvDsBAh2BGaqw3n777c7F7qHjjTfeaKutttqYhfXrr7925kV150zVJNKaTDq5hVVHZzU1oTuOPvrodvnll9tdCBCYAQRmqMLaYYcd2sMPP9xjWXLJJdsnn3wyjGniTwnronudEtaoiaYXXnhh579HmmnezxFWHaXV0Vp3XHzxxa2mOBgECEx/gRmisGp2+Kmnnjps3lPRnHjiie28887ru7DqCK2mHkyYMKHzmldffbWtueaavdf3U1hVgHWDc3fUp4+HH3749N9S1oAAgWlzSlhHSvfcc88w7pqnVEdLb731Vrv55pvbRx99NOzva6rC66+/3hZeeOG+C6sWrOtd3WtOE5/O9VNYNa+rbrPpjltuuaXtv//+I+4qNQ2jSnG0UVM0hham/Y0AgX8nME2OsCZ3FeuTuccff7w3VWHo6yd1SljL1TSI3XbbrfOSBRZYoHNKOd9883X+v5/CqukLTz/9dO8t61E2++6774g/wnPPPTdsjtjEC7mfcHK3vOUJTFpghiusbbbZpl1//fWjPh9rrMKq23RqDlb3iO3aa69thx12WN+FNfF1tBtuuGHUZ20pLL9eBKatwHQtrJp20H2AX81mr/lWY51CjVVYxXfmmWe20047rSNZD+mre/v6PcKqdRh6D+AVV1zRjjrqKEdY03a/9G4ERhSYJoVVNyW/+eabw1agZqRPPE+qn23UT2HVaWC9Z/fpD3UkVE8W7eeUsJ7DdfXVV/dWpYqvZtKPNOri/tCbtWuZofc9OiXsZ4tahkD/AtOksEZ7vEz/q/n/JfsprFp6jz32aHfffXfnhQceeGDnwn4/hVVHVMccc0zvDffbb79h0xzGWud6LE53KKyxtPw9gckTmGkL67HHHmtbbbVVR6OesV4P2aunOoz1iOS64D70vsH111+/1aNv+h0Kq18pyxGYfIGZtrDqdK1myNe0iRoXXXRR54F8YxVWTVWoqRTdJ6HWqevnn3/eFllkkb50FVZfTBYiMEUCM21hlcYll1zS+UKIGnXLTz3VtD4F7I7RvoRi9913782er2Un9UnhxOoKa4r2Qy8i0JfATF1Y9fC/+jaeX375pYNR5VW32oxVWDXTvWa8d8fqq6/emSA62pNMh0orrL72OwsRmCKBmbqwSuTggw/uXHCvUad633zzzZiFVZ8urr322p2Z9t1R9ygef/zxYyIrrDGJLEBgigVm+sKqC+2jfVnqpL6XsB7at8UWW/Rg63lYdWpYnziONqrohj4W2aeEU7xfeiGBEQVm+sKqn7o+6etOHh2qMNYXqQ59+kP3dTvvvHPnS1LrnsN65nyN+kboupWo5mx1L/LXnyssv3UEpq7Af6Kw6laf7u05k1NYtWzNcr/qqqtGVK9PDus5XN0vwJh4oZpw2p1xP3U3mzQC/02B/0Rh1eNr6uJ7fW/g5BZWTY+47rrrOt93OPT616R2l3qveuhf9ybs/+au5acmMPUFIoVVRxz1nYLdUY+XGetr5Pv90T777LNhTxKtSZ5nnXXWmC+v52oNfThgvWD8+PEjHnmNFPbVV191iqtmzw995nx32bp2VaeA9ZTTQw89tHe6OOaKWYAAgb4FIoXV97sP6IJ1pFUz56s8a6rDoosu2uqbdsaNGzegP5HVJjAYAgprMLaTtSRAIPUlFGQJECCQEHCElVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJAYWVUJVJgEBEQGFFWIUSIJAQUFgJVZkECEQEFFaEVSgBAgkBhZVQlUmAQERAYUVYhRIgkBBQWAlVmQQIRAQUVoRVKAECCQGFlVCVSYBAREBhRViFEiCQEFBYCVWZBAhEBBRWhFUoAQIJgf8Bkmz29QpmUTEAAAAASUVORK5CYII=

test/resources/images/node-empty.html

@@ -0,0 +1,2 @@
+<img src="" />
+<img src="/base/test/resources/images/image.png" />

test/resources/svg-image/node-empty.html

@@ -0,0 +1,17 @@
+<svg
+  width="200"
+  height="200"
+  viewBox="0 0 200 200"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <image
+    height="200"
+    width="200"
+    href="/base/test/resources/svg-image/svg-image.png"
+  />
+  <image
+    height="200"
+    width="200"
+    href=""
+  />
+</svg>

test/spec/basic.spec.ts

@@ -183,6 +183,18 @@ describe('basic usage', () => {
       .catch(done)
   })
 
+  it('should not fail on empty images', (done) => {
+    bootstrap(
+      'images/node-empty.html',
+      'images/style.css',
+      'images/node-empty-png',
+    )
+      .then(delay(500))
+      .then(assertTextRendered(['PNG']))
+      .then(done)
+      .catch(done)
+  })
+
   it('should render webp images', (done) => {
     bootstrap('webp/node.html', 'webp/style.css')
       .then(delay(500))

test/spec/helper.ts

@@ -164,7 +164,7 @@ export async function getSvgDocument(dataUrl: string): Promise<XMLDocument> {
     .then((str) => new window.DOMParser().parseFromString(str, 'text/xml'))
 }
 
-const PASS_TEXT_MATCH = true
+const PASS_TEXT_MATCH = false
 
 export function assertTextRendered(lines: string[], options?: Options) {
   return (node: HTMLDivElement = getCaptureNode()) =>

test/spec/svg.spec.ts

@@ -47,6 +47,17 @@ describe('work with svg element', () => {
       .catch(done)
   })
 
+  it('should not fail on empty href in svg `<image>`', (done) => {
+    bootstrap(
+      'svg-image/node-empty.html',
+      'svg-image/style.css',
+      'svg-image/image',
+    )
+      .then(renderAndCheck)
+      .then(done)
+      .catch(done)
+  })
+
   it('should render SVG use tags', function (done) {
     bootstrap(
       'svg-use-tag/node.html',