Escape characters on xml attributes

WebReflection · Aug 24, 2023 · 30c9bcf · 30c9bcf
1 parent ec5ce84
commit 30c9bcf
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 15 deletions.
diff --git a/cjs/interface/document.js b/cjs/interface/document.js
@@ -34,6 +34,7 @@ const {NodeList} = require('./node-list.js');
 const {Range} = require('./range.js');
 const {Text} = require('./text.js');
 const {TreeWalker} = require('./tree-walker.js');
+const {XmlAttr} = require('./xml-attr.js');
 
 const query = (method, ownerDocument, selectors) => {
   let {[NEXT]: next, [END]: end} = ownerDocument;
@@ -170,7 +171,7 @@ class Document extends NonElementParentNode {
     return this[EVENT_TARGET];
   }
 
-  createAttribute(name) { return new Attr(this, name); }
+  createAttribute(name) { return this[MIME].isXml ? new XmlAttr(this, name) : new Attr(this, name); }
   createComment(textContent) { return new Comment(this, textContent); }
   createDocumentFragment() { return new DocumentFragment(this); }
   createDocumentType(name, publicId, systemId) { return new DocumentType(this, name, publicId, systemId); }

diff --git a/cjs/interface/xml-attr.js b/cjs/interface/xml-attr.js
@@ -0,0 +1,21 @@
+'use strict';
+const {VALUE} = require('../shared/symbols.js');
+const {emptyAttributes} = require('../shared/attributes.js');
+const {Attr} = require('./attr.js');
+const {escape} = require('html-escaper');
+
+/**
+ * @implements globalThis.Attr
+ */
+class XmlAttr extends Attr {
+  constructor(ownerDocument, name, value = '') {
+    super(ownerDocument, name, value);
+  }
+
+  toString() {
+    const {name, [VALUE]: value} = this;
+    return emptyAttributes.has(name) && !value ?
+            name : `${name}="${escape(value)}"`;
+  }
+}
+exports.XmlAttr = XmlAttr
diff --git a/cjs/shared/mime.js b/cjs/shared/mime.js
@@ -7,26 +7,31 @@ const Mime = {
   'text/html': {
     docType: '<!DOCTYPE html>',
     ignoreCase: true,
+    isXml: false,
     voidElements: /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i
   },
   'image/svg+xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'text/xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'application/xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'application/xhtml+xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   }
 };

diff --git a/esm/interface/attr.js b/esm/interface/attr.js
@@ -1,4 +1,4 @@
-import {ATTRIBUTE_NODE} from '../shared/constants.js';
+import {ATTRIBUTE_NODE,QUOTE} from '../shared/constants.js';
 import {CHANGED, VALUE} from '../shared/symbols.js';
 import {String} from '../shared/utils.js';
 import {attrAsJSON} from '../shared/jsdon.js';
@@ -9,8 +9,6 @@ import {attributeChangedCallback as ceAttributes} from './custom-element-registr
 
 import {Node} from './node.js';
 
-const QUOTE = /"/g;
-
 /**
  * @implements globalThis.Attr
  */

diff --git a/esm/interface/document.js b/esm/interface/document.js
@@ -34,6 +34,7 @@ import {NodeList} from './node-list.js';
 import {Range} from './range.js';
 import {Text} from './text.js';
 import {TreeWalker} from './tree-walker.js';
+import {XmlAttr} from './xml-attr.js';
 
 const query = (method, ownerDocument, selectors) => {
   let {[NEXT]: next, [END]: end} = ownerDocument;
@@ -170,7 +171,7 @@ export class Document extends NonElementParentNode {
     return this[EVENT_TARGET];
   }
 
-  createAttribute(name) { return new Attr(this, name); }
+  createAttribute(name) { return this[MIME].isXml ? new XmlAttr(this, name) : new Attr(this, name); }
   createComment(textContent) { return new Comment(this, textContent); }
   createDocumentFragment() { return new DocumentFragment(this); }
   createDocumentType(name, publicId, systemId) { return new DocumentType(this, name, publicId, systemId); }

diff --git a/esm/interface/xml-attr.js b/esm/interface/xml-attr.js
@@ -0,0 +1,19 @@
+import {VALUE} from '../shared/symbols.js';
+import {emptyAttributes} from '../shared/attributes.js';
+import {escape} from 'html-escaper';
+import {Attr} from './attr.js';
+
+/**
+ * @implements globalThis.Attr
+ */
+export class XmlAttr extends Attr {
+  constructor(ownerDocument, name, value = '') {
+    super(ownerDocument, name, value);
+  }
+
+  toString() {
+    const {name, [VALUE]: value} = this;
+    return emptyAttributes.has(name) && !value ?
+            name : `${name}="${escape(value)}"`;
+  }
+}
diff --git a/esm/shared/constants.js b/esm/shared/constants.js
@@ -29,3 +29,9 @@ export const DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
 
 // SVG
 export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+
+// Characters
+export const QUOTE = /"/g;
+export const LT = /</g;
+export const GT = />/g;
+export const AMPERSAND = /&/g;
diff --git a/esm/shared/mime.js b/esm/shared/mime.js
@@ -6,26 +6,31 @@ export const Mime = {
   'text/html': {
     docType: '<!DOCTYPE html>',
     ignoreCase: true,
+    isXml: false,
     voidElements: /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i
   },
   'image/svg+xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'text/xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'application/xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'application/xhtml+xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   }
 };
diff --git a/test/xml/document.js b/test/xml/document.js
@@ -2,20 +2,28 @@ const assert = require('../assert.js').for('XMLDocument');
 
 const {DOMParser} = global[Symbol.for('linkedom')];
 
-const document = (new DOMParser).parseFromString('<root></root>', 'text/xml');
+{
+    const document = (new DOMParser).parseFromString('<root></root>', 'text/xml');
 
-assert(document.toString(), '<?xml version="1.0" encoding="utf-8"?><root />');
+    assert(document.toString(), '<?xml version="1.0" encoding="utf-8"?><root />');;
 
-assert(document.documentElement.tagName, 'root');
-assert(document.documentElement.nodeName, 'root');
+    assert(document.documentElement.tagName, 'root');
+    assert(document.documentElement.nodeName, 'root');
 
 
-document.documentElement.innerHTML = `
+    document.documentElement.innerHTML = `
 <Something>
   <Element>Text</Element>
   <Element>Text</Element>
 </Something>
 `.trim();
 
-assert(document.querySelectorAll('Element').length, 2, 'case sesntivive 2');
-assert(document.querySelectorAll('element').length, 0, 'case sesntivive 0');
+    assert(document.querySelectorAll('Element').length, 2, 'case sensitive 2');
+    assert(document.querySelectorAll('element').length, 0, 'case sensitive 0');
+}
+
+{
+    const document = (new DOMParser).parseFromString('<root checked attr="&amp;&lt;&gt;"></root>', 'text/xml');
+    assert(document.toString(), '<?xml version="1.0" encoding="utf-8"?><root checked attr="&amp;&lt;&gt;" />');
+}
+
diff --git a/types/esm/interface/xml-attr.d.ts b/types/esm/interface/xml-attr.d.ts
@@ -0,0 +1,6 @@
+/**
+ * @implements globalThis.Attr
+ */
+export class XmlAttr extends Attr implements globalThis.Attr {
+}
+import { Attr } from "./attr.js";
diff --git a/types/esm/shared/constants.d.ts b/types/esm/shared/constants.d.ts
@@ -18,3 +18,7 @@ export const DOCUMENT_POSITION_CONTAINS: 8;
 export const DOCUMENT_POSITION_CONTAINED_BY: 16;
 export const DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
 export const SVG_NAMESPACE: "http://www.w3.org/2000/svg";
+export const QUOTE: RegExp;
+export const LT: RegExp;
+export const GT: RegExp;
+export const AMPERSAND: RegExp;
diff --git a/types/esm/shared/mime.d.ts b/types/esm/shared/mime.d.ts
@@ -2,32 +2,37 @@ export const Mime: {
     'text/html': {
         docType: string;
         ignoreCase: boolean;
+        isXml: boolean;
         voidElements: RegExp;
     };
     'image/svg+xml': {
         docType: string;
         ignoreCase: boolean;
+        isXml: boolean;
         voidElements: {
             test: () => boolean;
         };
     };
     'text/xml': {
         docType: string;
         ignoreCase: boolean;
+        isXml: boolean;
         voidElements: {
             test: () => boolean;
         };
     };
     'application/xml': {
         docType: string;
         ignoreCase: boolean;
+        isXml: boolean;
         voidElements: {
             test: () => boolean;
         };
     };
     'application/xhtml+xml': {
         docType: string;
         ignoreCase: boolean;
+        isXml: boolean;
         voidElements: {
             test: () => boolean;
         };

diff --git a/worker.js b/worker.js
@@ -3476,6 +3476,12 @@ const DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 0x20;
 // SVG
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
+// Characters
+const QUOTE = /"/g;
+const LT = /</g;
+const GT = />/g;
+const AMPERSAND = /&/g;
+
 const {
   assign,
   create: create$1,
@@ -4418,8 +4424,6 @@ let Node$1 = class Node extends DOMEventTarget {
   }
 };
 
-const QUOTE = /"/g;
-
 /**
  * @implements globalThis.Attr
  */
@@ -11224,26 +11228,31 @@ const Mime = {
   'text/html': {
     docType: '<!DOCTYPE html>',
     ignoreCase: true,
+    isXml: false,
     voidElements: /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i
   },
   'image/svg+xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'text/xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'application/xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   },
   'application/xhtml+xml': {
     docType: '<?xml version="1.0" encoding="utf-8"?>',
     ignoreCase: false,
+    isXml: true,
     voidElements
   }
 };
@@ -11442,6 +11451,21 @@ class TreeWalker {
   }
 }
 
+/**
+ * @implements globalThis.Attr
+ */
+class XmlAttr extends Attr$1 {
+  constructor(ownerDocument, name, value = '') {
+    super(ownerDocument, name, value);
+  }
+
+  toString() {
+    const {name, [VALUE]: value} = this;
+    return emptyAttributes.has(name) && !value ?
+            name : `${name}="${value.replace(AMPERSAND, '&amp;').replace(QUOTE, '&quot;').replace(LT, '&lt;').replace(GT, '&gt;')}"`;
+  }
+}
+
 const query = (method, ownerDocument, selectors) => {
   let {[NEXT]: next, [END]: end} = ownerDocument;
   return method.call({ownerDocument, [NEXT]: next, [END]: end}, selectors);
@@ -11577,7 +11601,7 @@ let Document$1 = class Document extends NonElementParentNode {
     return this[EVENT_TARGET];
   }
 
-  createAttribute(name) { return new Attr$1(this, name); }
+  createAttribute(name) { return this[MIME].isXml ? new XmlAttr(this, name) : new Attr$1(this, name); }
   createComment(textContent) { return new Comment$1(this, textContent); }
   createDocumentFragment() { return new DocumentFragment$1(this); }
   createDocumentType(name, publicId, systemId) { return new DocumentType$1(this, name, publicId, systemId); }