From 0a11ea864237c3beea47011e2d1dbfa1b872eb76 Mon Sep 17 00:00:00 2001
From: Ryan Deba <ryandeba@gmail.com>
Date: Wed, 7 Mar 2018 20:23:12 -0600
Subject: [PATCH 1/3] add failing unit test

---
 test/specs/dom_components/model/Component.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index ccc051a26..86ca5b5d6 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -135,6 +135,14 @@ module.exports = {
         expect(obj.toHTML()).toEqual('<div/>');
       });
 
+      it('Component toHTML with quotes in attribute', () => {
+        obj = new Component();
+        let attr = obj.get('attributes');
+        attr['data-foo'] = '"bar"';
+        obj.set('attributes', attr);
+        expect(obj.toHTML()).toEqual('<div data-foo="&quot;foo&quot;"></div>');
+      });
+
       it('Component parse empty div', () => {
         var el = document.createElement('div');
         obj = Component.isComponent(el);

From 48a3bccb22dd29057c95e09a3f03646684e4d905 Mon Sep 17 00:00:00 2001
From: Ryan Deba <ryandeba@gmail.com>
Date: Wed, 7 Mar 2018 20:53:12 -0600
Subject: [PATCH 2/3] modify Component.toHTML to property encode attribute
 values

---
 src/dom_components/model/Component.js        | 27 +++++++++++++++-----
 test/specs/dom_components/model/Component.js | 10 +++++---
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index c56c08830..9f4305524 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -669,20 +669,33 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const sTag = model.get('void');
       const attributes = this.getAttrToHTML();
 
+      let el = document.createElement(tag);
+
       for (let attr in attributes) {
         const value = attributes[attr];
 
         if (!isUndefined(value)) {
-          attrs.push(`${attr}="${value}"`);
+          el.setAttribute(attr, value);
         }
       }
 
-      let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
-      let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get(
-        'content'
-      )}`;
-      model.get('components').each(comp => (code += comp.toHTML()));
-      !sTag && (code += `</${tag}>`);
+      if (!sTag) {
+        let innerHTML = model.get('content');
+        model.get('components').each(comp => (innerHTML += comp.toHTML()));
+        el.innerHTML = innerHTML;
+      }
+
+      let code = el.outerHTML;
+
+      if (sTag) {
+        // remove the closing tag in case this is a custom void element
+        code = code.replace('</' + tag + '>', '');
+
+        // void elements created through document.createElement may not have the ending slash
+        if (code.substr(-2) != '/>') {
+          code = code.substr(0, code.length - 1) + '/>';
+        }
+      }
 
       return code;
     },
diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index 86ca5b5d6..b04f2eede 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -137,10 +137,12 @@ module.exports = {
 
       it('Component toHTML with quotes in attribute', () => {
         obj = new Component();
-        let attr = obj.get('attributes');
-        attr['data-foo'] = '"bar"';
-        obj.set('attributes', attr);
-        expect(obj.toHTML()).toEqual('<div data-foo="&quot;foo&quot;"></div>');
+        let attrs = obj.get('attributes');
+        attrs['data-test'] = '"value"';
+        obj.set('attributes', attrs);
+        expect(obj.toHTML()).toEqual(
+          '<div data-test="&quot;value&quot;"></div>'
+        );
       });
 
       it('Component parse empty div', () => {

From ff15c3454a828150562d0e9e8afe3031b7a27e1e Mon Sep 17 00:00:00 2001
From: Ryan Deba <ryandeba@gmail.com>
Date: Thu, 8 Mar 2018 21:07:38 -0600
Subject: [PATCH 3/3] escpae quotes in Component.toHTML

---
 src/dom_components/model/Component.js | 29 ++++++++-------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 9f4305524..0a4a6334c 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -669,33 +669,20 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const sTag = model.get('void');
       const attributes = this.getAttrToHTML();
 
-      let el = document.createElement(tag);
-
       for (let attr in attributes) {
-        const value = attributes[attr];
+        const value = attributes[attr].replace(/"/g, '&quot;');
 
         if (!isUndefined(value)) {
-          el.setAttribute(attr, value);
+          attrs.push(`${attr}="${value}"`);
         }
       }
 
-      if (!sTag) {
-        let innerHTML = model.get('content');
-        model.get('components').each(comp => (innerHTML += comp.toHTML()));
-        el.innerHTML = innerHTML;
-      }
-
-      let code = el.outerHTML;
-
-      if (sTag) {
-        // remove the closing tag in case this is a custom void element
-        code = code.replace('</' + tag + '>', '');
-
-        // void elements created through document.createElement may not have the ending slash
-        if (code.substr(-2) != '/>') {
-          code = code.substr(0, code.length - 1) + '/>';
-        }
-      }
+      let attrString = attrs.length ? ` ${attrs.join(' ')}` : '';
+      let code = `<${tag}${attrString}${sTag ? '/' : ''}>${model.get(
+        'content'
+      )}`;
+      model.get('components').each(comp => (code += comp.toHTML()));
+      !sTag && (code += `</${tag}>`);
 
       return code;
     },