Merge pull request #204 from mashmatrix/fix-icon-property-sanitization

Add prop sanitization in icon/category property of Icon component

Author: stomita

src/scripts/Icon.js

@@ -144,16 +144,19 @@ export default class Icon extends Component {
       {
         'slds-icon': !/slds\-button__icon/.test(className),
         [`slds-icon--${size}`]: /^(x-small|small|medium|large)$/.test(size),
-        [`slds-icon-text-${textColor}`]: /^(default|warning|error)$/.test(textColor) &&
-        !iconColor,
+        [`slds-icon-text-${textColor}`]: /^(default|warning|error)$/.test(textColor) && !iconColor,
         [`slds-icon-${iconColor}`]: !container && iconColor,
         'slds-m-left--x-small': align === 'right',
         'slds-m-right--x-small': align === 'left',
       },
       className
     );
 
-    const useHtml = `${getAssetRoot()}/icons/${category}-sprite/svg/symbols.svg#${icon}`;
+    // icon and category prop should not include chars other than alphanumerics, underscore, and hyphen
+    icon = (icon || '').replace(/[^\w\-]/g, ''); // eslint-disable-line no-param-reassign
+    category = (category || '').replace(/[^\w\-]/g, ''); // eslint-disable-line no-param-reassign
+
+    const iconUrl = `${getAssetRoot()}/icons/${category}-sprite/svg/symbols.svg#${icon}`;
     return (
       <svg
         className={ iconClassNames }
@@ -162,7 +165,7 @@ export default class Icon extends Component {
         style={ style }
         {...props}
       >
-        <use xlinkHref={useHtml} />
+        <use xlinkHref={iconUrl} />
       </svg>
     );
   }