Jero/hotfix/product card long description (#892)

* feat (utils) add sanitizeHTML function * feat (pages/Store/Product) use sanitizeHTML for long description
StoriqaTeam · Jan 21, 2019 · b16f098 · b16f098
1 parent 3151d79
commit b16f098
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 42 deletions.
diff --git a/src/pages/Store/About/About.js b/src/pages/Store/About/About.js
@@ -2,8 +2,7 @@
 
 import React, { PureComponent } from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
-import xss from 'xss';
-import { addressToString, getNameText } from 'utils';
+import { addressToString, getNameText, sanitizeHTML } from 'utils';
 
 // import ImageLoader from 'libs/react-image-loader';
 // import BannerLoading from 'components/Banner/BannerLoading';
@@ -26,36 +25,7 @@ class About extends PureComponent<PropsType> {
     // $FlowIgnoreMe
     const address = addressToString(shop.addressFull);
     /* eslint-disable no-underscore-dangle */
-    const __html = xss(longDescription, {
-      whiteList: {
-        br: [],
-        hr: [],
-        a: ['class', 'style', 'href', 'target', 'rel'],
-        p: ['class', 'style'],
-        ol: ['class', 'style'],
-        h1: ['class', 'style'],
-        h2: ['class', 'style'],
-        h3: ['class', 'style'],
-        h4: ['class', 'style'],
-        h5: ['class', 'style'],
-        h6: ['class', 'style'],
-        ul: ['class', 'style'],
-        li: ['class', 'style'],
-        em: ['class', 'style'],
-        img: ['class', 'style', 'src', 'sizes', 'srcset', 'width', 'height'],
-        sub: ['class', 'style'],
-        sup: ['class', 'style'],
-        div: ['class', 'style'],
-        span: ['class', 'style'],
-        strong: ['class', 'style'],
-        iframe: ['class', 'style', 'src', 'width', 'height', 'frameborder'],
-        table: ['class', 'style'],
-        tr: ['class', 'style'],
-        td: ['class', 'style'],
-        tbody: ['class', 'style'],
-        thead: ['class', 'style'],
-      },
-    });
+    const __html = sanitizeHTML(longDescription);
     return (
       <div styleName="container">
         <div styleName="title">

diff --git a/src/pages/Store/Product/Product.js b/src/pages/Store/Product/Product.js
@@ -4,7 +4,6 @@ import React, { Component } from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
 import { routerShape } from 'found';
 import PropTypes from 'prop-types';
-import xss from 'xss';
 import {
   isNil,
   head,
@@ -25,7 +24,13 @@ import { AppContext, Page } from 'components/App';
 import { Col, Row } from 'layout';
 import { AddInCartMutation } from 'relay/mutations';
 import { withShowAlert } from 'components/Alerts/AlertContext';
-import { extractText, isEmpty, log, convertCountries } from 'utils';
+import {
+  extractText,
+  isEmpty,
+  log,
+  convertCountries,
+  sanitizeHTML,
+} from 'utils';
 import { productViewTracker, addToCartTracker } from 'rrHalper';
 
 import type { AddAlertInputType } from 'components/Alerts/AlertContext';
@@ -283,6 +288,8 @@ class Product extends Component<PropsType, StateType> {
       'EN',
       t.noLongDescription,
     ).replace(/\n/g, '<hr />');
+    /* eslint-disable no-underscore-dangle */
+    const __html = sanitizeHTML(modifLongDescription);
     const tabs: Array<TabType> = [
       {
         id: '0',
@@ -292,14 +299,7 @@ class Product extends Component<PropsType, StateType> {
             styleName="longDescription"
             // eslint-disable-next-line
             dangerouslySetInnerHTML={{
-              __html: xss(`${modifLongDescription}`, {
-                whiteList: {
-                  img: ['src', 'style', 'sizes', 'srcset'],
-                  br: [],
-                  hr: [],
-                  div: ['style'],
-                },
-              }),
+              __html,
             }}
           />
         ),

diff --git a/src/utils/index.js b/src/utils/index.js
@@ -39,3 +39,4 @@ export { default as vendorCodeGenerator } from './vendorCodeGenerator';
 export { default as jwt } from './jwt';
 export { default as getQueryRefParams } from './getQueryRefParams';
 export { default as isJson } from './isJson';
+export { default as sanitizeHTML } from './sanitizeHTML';
diff --git a/src/utils/sanitizeHTML.js b/src/utils/sanitizeHTML.js
@@ -0,0 +1,37 @@
+// @flow strict
+// $FlowIgnoreMe
+import xss from 'xss';
+
+const sanitizeHTML = (html: string): string =>
+  xss(html, {
+    whiteList: {
+      a: ['class', 'style', 'href', 'target', 'rel'],
+      p: ['class', 'style'],
+      br: ['class', 'style'],
+      hr: ['class', 'style'],
+      ol: ['class', 'style'],
+      h1: ['class', 'style'],
+      h2: ['class', 'style'],
+      h3: ['class', 'style'],
+      h4: ['class', 'style'],
+      h5: ['class', 'style'],
+      h6: ['class', 'style'],
+      ul: ['class', 'style'],
+      li: ['class', 'style'],
+      em: ['class', 'style'],
+      img: ['class', 'style', 'src', 'sizes', 'srcset', 'width', 'height'],
+      sub: ['class', 'style'],
+      sup: ['class', 'style'],
+      div: ['class', 'style'],
+      span: ['class', 'style'],
+      strong: ['class', 'style'],
+      iframe: ['class', 'style', 'src', 'width', 'height', 'frameborder'],
+      table: ['class', 'style'],
+      tr: ['class', 'style'],
+      td: ['class', 'style'],
+      tbody: ['class', 'style'],
+      thead: ['class', 'style'],
+    },
+  });
+
+export default sanitizeHTML;