From 4e30dcdec5d3ab62eb3ec85f3441f7c98513011c Mon Sep 17 00:00:00 2001
From: Tiago Alves Dulce <tiagoalvesdulce@outlook.com>
Date: Mon, 10 Dec 2018 11:34:20 -0300
Subject: [PATCH] clean up svg code (#941)

---
 mocks/api/v1/policy/GET.json                  |  1 -
 src/components/Form/Fields/FilesField.js      |  9 +--
 src/components/ProposalImages/helpers.js      | 19 ------
 src/components/ProposalImages/index.js        |  4 +-
 .../test/ProposalImages.test.js               | 37 ----------
 .../__snapshots__/ProposalImages.test.js.snap | 68 -------------------
 6 files changed, 3 insertions(+), 135 deletions(-)
 delete mode 100644 src/components/ProposalImages/test/ProposalImages.test.js
 delete mode 100644 src/components/ProposalImages/test/__snapshots__/ProposalImages.test.js.snap

diff --git a/mocks/api/v1/policy/GET.json b/mocks/api/v1/policy/GET.json
index bc862f41f..ecf903b2c 100644
--- a/mocks/api/v1/policy/GET.json
+++ b/mocks/api/v1/policy/GET.json
@@ -14,7 +14,6 @@
   "validmimetypes":[
     "image/jpeg",
     "image/png",
-    "image/svg+xml",
     "text/plain",
     "text/plain; charset=utf-8"
   ],
diff --git a/src/components/Form/Fields/FilesField.js b/src/components/Form/Fields/FilesField.js
index c68ac6fba..86ea7ca35 100644
--- a/src/components/Form/Fields/FilesField.js
+++ b/src/components/Form/Fields/FilesField.js
@@ -4,11 +4,7 @@ import ReactFileReader from "react-file-reader";
 import { change } from "redux-form";
 import ProposalImages from "../../ProposalImages";
 import PolicyErrors from "./PolicyErrors";
-import {
-  validateFiles,
-  getFormattedFiles,
-  sanitizeSVGFiles
-} from "../../ProposalImages/helpers";
+import { validateFiles, getFormattedFiles } from "../../ProposalImages/helpers";
 
 class FilesField extends React.Component {
   constructor(props) {
@@ -29,13 +25,12 @@ class FilesField extends React.Component {
       ? formattedFiles.concat(input.value)
       : formattedFiles;
     const validation = validateFiles(inputAndNewFiles, policy);
-    const sanitizedFiles = sanitizeSVGFiles(validation.files);
 
     this.setState({
       policyErrors: validation.errors ? validation.errors : []
     });
 
-    return dispatch(change("form/proposal", "files", sanitizedFiles));
+    return dispatch(change("form/proposal", "files", inputAndNewFiles));
   };
 
   render() {
diff --git a/src/components/ProposalImages/helpers.js b/src/components/ProposalImages/helpers.js
index 6f249c37b..f59d79b48 100644
--- a/src/components/ProposalImages/helpers.js
+++ b/src/components/ProposalImages/helpers.js
@@ -1,5 +1,3 @@
-import DOMPurify from "dompurify";
-
 export const errorTypes = {
   MAX_SIZE: "max_size",
   MAX_IMAGES: "max_length",
@@ -112,20 +110,3 @@ function validateMimeTypes({ files, errors, policy }) {
     errors
   };
 }
-
-const isSVG = file => file.mime === "image/svg+xml";
-
-export const sanitizeSVGFiles = files => {
-  files = files.map(file => {
-    if (!isSVG(file)) return file;
-
-    const decodedStr = window.atob(file.payload);
-    const sanitizedPayload = DOMPurify.sanitize(decodedStr);
-    const payload = window.btoa(sanitizedPayload);
-    return {
-      ...file,
-      payload
-    };
-  });
-  return files;
-};
diff --git a/src/components/ProposalImages/index.js b/src/components/ProposalImages/index.js
index d58c415b9..f09578ae3 100644
--- a/src/components/ProposalImages/index.js
+++ b/src/components/ProposalImages/index.js
@@ -1,6 +1,5 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import { sanitizeSVGFiles } from "./helpers";
 
 class ProposalImages extends Component {
   constructor(props) {
@@ -15,11 +14,10 @@ class ProposalImages extends Component {
 
   render() {
     const { files, readOnly } = this.props;
-    const sanitizedFiles = sanitizeSVGFiles(files || []);
 
     return (
       <div className="attached-images">
-        {sanitizedFiles.map(({ name, mime, payload }, idx) => (
+        {files.map(({ name, mime, payload }, idx) => (
           <div key={`prop-image-${idx}`} className="attached-image-ct">
             <div style={{ display: "flex", alignItems: "center" }}>
               <h5 className="attached-image-title">{name}</h5>
diff --git a/src/components/ProposalImages/test/ProposalImages.test.js b/src/components/ProposalImages/test/ProposalImages.test.js
deleted file mode 100644
index 87175c8b8..000000000
--- a/src/components/ProposalImages/test/ProposalImages.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from "react";
-import ProposalImages from "../index";
-import renderer from "react-test-renderer";
-
-const maliciousSVGFile = {
-  name: "malicious",
-  mime: "image/svg+xml",
-  payload: `PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEU
-  gc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9y
-  Zy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgoKPHN2ZyB2ZXJzaW9uPSIxLjEiI
-  GJhc2VQcm9maWxlPSJmdWxsIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg
-  ogICA8cG9seWdvbiBpZD0idHJpYW5nbGUiIHBvaW50cz0iMCwwIDAsNTAgNTAsMCIgZmlsbD0
-  iIzAwOTkwMCIgc3Ryb2tlPSIjMDA0NDAwIi8+CiAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZh
-  c2NyaXB0Ij4KICAgIHdpbmRvdy5sb2NhdGlvbi5yZXBsYWNlKCJodHRwOi8vd3d3Lmdvb2dsZ
-  S5jb20iKTs7CiAgIDwvc2NyaXB0Pgo8L3N2Zz4K`,
-  size: 405
-};
-
-const notMaliciousFile = {
-  name: "notMalicious",
-  mime: "image/svg+xml",
-  payload: `PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICA8cG9
-  seWdvbiBzdHJva2U9IiMwMDQ0MDAiIGZpbGw9IiMwMDk5MDAiIHBvaW50cz0iMCwwIDAsNTAg
-  NTAsMCIgaWQ9InRyaWFuZ2xlIj48L3BvbHlnb24+CiAgIAo8L3N2Zz4K`
-};
-
-it("sanitize SVG files", () => {
-  const tree = renderer
-    .create(
-      <ProposalImages
-        files={[maliciousSVGFile, notMaliciousFile]}
-        onChange={() => null}
-      />
-    )
-    .toJSON();
-  expect(tree).toMatchSnapshot();
-});
diff --git a/src/components/ProposalImages/test/__snapshots__/ProposalImages.test.js.snap b/src/components/ProposalImages/test/__snapshots__/ProposalImages.test.js.snap
deleted file mode 100644
index 7cfd3c968..000000000
--- a/src/components/ProposalImages/test/__snapshots__/ProposalImages.test.js.snap
+++ /dev/null
@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`sanitize SVG files 1`] = `
-<div
-  className="attached-images"
->
-  <div
-    className="attached-image-ct"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-        }
-      }
-    >
-      <h5
-        className="attached-image-title"
-      >
-        malicious
-      </h5>
-      <a
-        className="attached-image-remove"
-        onClick={[Function]}
-        title="Remove image"
-      >
-        ✖
-      </a>
-    </div>
-    <img
-      alt="malicious"
-      className="attached-image"
-      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICA8cG9seWdvbiBzdHJva2U9IiMwMDQ0MDAiIGZpbGw9IiMwMDk5MDAiIHBvaW50cz0iMCwwIDAsNTAgNTAsMCIgaWQ9InRyaWFuZ2xlIj48L3BvbHlnb24+CiAgIAo8L3N2Zz4K"
-    />
-  </div>
-  <div
-    className="attached-image-ct"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-        }
-      }
-    >
-      <h5
-        className="attached-image-title"
-      >
-        notMalicious
-      </h5>
-      <a
-        className="attached-image-remove"
-        onClick={[Function]}
-        title="Remove image"
-      >
-        ✖
-      </a>
-    </div>
-    <img
-      alt="notMalicious"
-      className="attached-image"
-      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICA8cG9seWdvbiBpZD0idHJpYW5nbGUiIHBvaW50cz0iMCwwIDAsNTAgNTAsMCIgZmlsbD0iIzAwOTkwMCIgc3Ryb2tlPSIjMDA0NDAwIj48L3BvbHlnb24+CiAgIAo8L3N2Zz4K"
-    />
-  </div>
-</div>
-`;