fix: xss security issue under invalid json data

example/app/Example.jsx

@@ -99,6 +99,10 @@ ReactDOM.render(
       <h4>Custom theme:</h4>
       <JSONPretty className="test-3" themeClassName="custom-json-pretty" data={obj3}></JSONPretty>
     </div>
+    <div>
+      <h4>XSS pretection</h4>
+      <JSONPretty id="json-pretty" style={{fontSize: "1.1em"}} data={{data: "<img onerror='alert(document.cookie)' src='invalid-image' />"}}></JSONPretty>
+    </div>
   </div>,
   document.getElementById('example')
 );

src/JSONPretty.tsx

@@ -12,8 +12,31 @@ interface IProps {
   silent?: boolean;
 }
 
+function getStyleValue(name: string, theme: ITheme): string {
+  return theme ? theme[name] || '' : '';
+}
+
 function getStyle(name: string, theme: ITheme): string {
-  return theme ? theme[name] ? ` style="${theme[name]}"` : '' : '';
+  const value = getStyleValue(name, theme);
+  return value ? ` style="${value}"` : '';
+}
+
+const xssmap: {[key: string]: string} = {
+  '"': '"',
+  '\'': ''',
+  '&': '&',
+  '>': '>',
+  '<': '&lt',
+};
+
+function xss(s: string): string {
+  if (!s) {
+    return s;
+  }
+
+  return s.replace(/<|>|&|"|'/g, (m) => {
+    return xssmap[m];
+  });
 }
 
 class JSONPretty extends React.Component<IProps, {}> {
@@ -52,7 +75,7 @@ class JSONPretty extends React.Component<IProps, {}> {
         return(
           <div {...rest} dangerouslySetInnerHTML={
             {__html:
-              `<pre class=${themeClassName}${getStyle('main', theme)}>${obj}</pre>`
+              `<pre class=${themeClassName}${getStyle('main', theme)}>${xss(obj)}</pre>`
             }
           }>
           </div>

tests/JSONPretty.test.tsx

@@ -222,8 +222,6 @@ test('invalid json', () => {
 test('invalid space', () => {
   const box = shallow(<JSONPretty json={'12345'} space={NaN}></JSONPretty>);
 
-  console.log(box.html());
-
   `<div><pre class=__json-pretty__><span class=__json-value__>12345</span></pre></div>`
     .split('\n')
     .map((line) => line.trim())
@@ -288,3 +286,9 @@ test('complex object with format', () => {
       expect(box.html()).to.include(line);
     });
 });
+
+test('xss pretection', () => {
+  const data = `{data: \"<img onerror='alert(document.cookie)' src='invalid-image' />}`;
+  const box = shallow(<JSONPretty json={data}></JSONPretty>);
+  expect(box.html()).to.eql('<div><pre class=__json-pretty__>{data: &quot;&ltimg onerror=&apos;alert(document.cookie)&apos; src=&apos;invalid-image&apos; /&gt;}</pre></div>');
+});