Don't use dangerous HTML in Linkify

src/Linkify/Linkify.js

@@ -1,19 +1,46 @@
 import React from 'react';
-import styled from 'styled-components';
 
-const Container = styled.span`
-  a {
-    color: inherit;
-    text-decoration: underline;
-  }
-`;
+const URL_REGEX = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
 
-const REGEX = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
+const detectLinks = ({ children, linkStyle = {} }) =>
+  React.Children.map(children, child => {
+    if (!child) return null;
 
-const parse = string => string.replace(REGEX, url => `<a target="_blank" href="${url}">${url}</a>`);
+    if (typeof child === 'string') {
+      const words = child.split(' ');
+      return words.map((word, index) => {
+        const isLastWord = words.length === index - 1;
 
-const Linkify = props => (
-  <Container style={props.style || {}} dangerouslySetInnerHTML={{ __html: parse(props.children) }} />
-);
+        if (URL_REGEX.test(word)) {
+          return (
+            <>
+              <a
+                key={word}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  color: 'inherit',
+                  textDecoration: 'underline',
+                  ...linkStyle,
+                }}
+                href={word}>
+                {word}
+              </a>
 
-export default Linkify;
+              {isLastWord ? '' : ' '}
+            </>
+          );
+        }
+
+        return isLastWord ? word : `${word} `;
+      });
+    }
+
+    if (React.isValidElement(child)) {
+      return detectLinks({ children: child.props.children, linkStyle });
+    }
+
+    return child;
+  });
+
+export default props => detectLinks(props);

src/Linkify/Linkify.spec.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { renderWithTheme } from '../../test/utils';
+import Linkify from './Linkify';
+
+describe('Linkify', () => {
+  test('converts links to anchor tags', () => {
+    const component = renderWithTheme(<Linkify>Hello! https://google.com is a cool site.</Linkify>);
+
+    expect(component).toMatchSnapshot();
+  });
+
+  test('escapes HTML entities', () => {
+    const component = renderWithTheme(
+      <Linkify>
+        <img src="fake.jpg" onError={() => {}} alt="hacker" />
+        <span>heheh got hacked</span>
+      </Linkify>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/Linkify/__snapshots__/Linkify.spec.js.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Linkify converts links to anchor tags 1`] = `
+Array [
+  "Hello! ",
+  <a
+    href="https://google.com"
+    rel="noopener noreferrer"
+    style={
+      Object {
+        "color": "inherit",
+        "textDecoration": "underline",
+      }
+    }
+    target="_blank"
+  >
+    https://google.com
+  </a>,
+  " ",
+  "is ",
+  "a ",
+  "cool ",
+  "site. ",
+]
+`;
+
+exports[`Linkify escapes HTML entities 1`] = `
+Array [
+  "heheh ",
+  "got ",
+  "hacked ",
+]
+`;