chore(frontend): render posts using interweave library

- Use the interweave library to render posts so we're not dangerously settings inner HTMLs.
jerroydmoore · Jan 3, 2020 · b567ad0 · b567ad0
1 parent beadf95
commit b567ad0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,6 +25,7 @@
     "gatsby-plugin-sharp": "^2.3.5",
     "gatsby-source-filesystem": "^2.1.40",
     "gatsby-transformer-sharp": "^2.3.7",
+    "interweave": "^12.1.1",
     "placeholder-loading": "^0.2.4",
     "prop-types": "^15.7.2",
     "query-string": "^6.9.0",

diff --git a/frontend/src/components/jobPost.js b/frontend/src/components/jobPost.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card } from 'react-bootstrap';
+import { Markup } from 'interweave';
 
 const JobPost = ({ job }) => {
   const endOfTitle = job.body.indexOf('<p>');
@@ -9,10 +10,10 @@ const JobPost = ({ job }) => {
     <Card className="job-posting">
       <Card.Body>
         <Card.Title>
-          <div dangerouslySetInnerHTML={{ __html: title }}></div>
+          <Markup content={title} />
         </Card.Title>
         <Card.Text>
-          <div dangerouslySetInnerHTML={{ __html: body }}></div>
+          <Markup content={body} />
           <small className="authorship">
             Posted on{' '}
             <a