diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index c56c088304..0a4a6334c9 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -670,7 +670,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       const attributes = this.getAttrToHTML();
 
       for (let attr in attributes) {
-        const value = attributes[attr];
+        const value = attributes[attr].replace(/"/g, '"');
 
         if (!isUndefined(value)) {
           attrs.push(`${attr}="${value}"`);
diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index ccc051a260..b04f2eedef 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -135,6 +135,16 @@ module.exports = {
         expect(obj.toHTML()).toEqual('<div/>');
       });
 
+      it('Component toHTML with quotes in attribute', () => {
+        obj = new Component();
+        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', () => {
         var el = document.createElement('div');
         obj = Component.isComponent(el);