From 039c7b2fe5b059d4cbb7db0b2cf328104b96591f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 29 Apr 2019 17:57:45 +0200
Subject: [PATCH] sanitize search input

---
 client/src/routes/Home.tsx   |  4 +++-
 client/src/routes/Search.tsx | 27 ++++++++++++++++-----------
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/client/src/routes/Home.tsx b/client/src/routes/Home.tsx
index ce70175..8eb4ad5 100644
--- a/client/src/routes/Home.tsx
+++ b/client/src/routes/Home.tsx
@@ -54,7 +54,9 @@ class Home extends Component<HomeProps, HomeState> {
 
     private searchAssets = (event: FormEvent<HTMLFormElement>) => {
         event.preventDefault()
-        this.props.history.push(`/search?text=${this.state.search}`)
+        this.props.history.push(
+            `/search?text=${JSON.stringify(this.state.search)}`
+        )
     }
 }
 
diff --git a/client/src/routes/Search.tsx b/client/src/routes/Search.tsx
index 0f7c866..ec192b8 100644
--- a/client/src/routes/Search.tsx
+++ b/client/src/routes/Search.tsx
@@ -20,6 +20,7 @@ interface SearchState {
     totalPages: number
     currentPage: number
     isLoading: boolean
+    searchTerm: string
 }
 
 export default class Search extends PureComponent<SearchProps, SearchState> {
@@ -29,18 +30,22 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
         offset: 25,
         totalPages: 1,
         currentPage: 1,
-        isLoading: true
+        isLoading: true,
+        searchTerm: ''
     }
 
-    private readonly searchTerm = queryString.parse(this.props.location.search)
-        .text
-    private readonly searchPage = queryString.parse(this.props.location.search)
-        .page
-
     public async componentDidMount() {
+        const searchTerm = await queryString.parse(this.props.location.search)
+            .text
+        const searchPage = queryString.parse(this.props.location.search).page
+
+        await this.setState({
+            searchTerm: JSON.stringify(searchTerm)
+        })
+
         // switch to respective page if query string is present
-        if (this.searchPage) {
-            const currentPage = Number(this.searchPage)
+        if (searchPage) {
+            const currentPage = Number(searchPage)
             await this.setState({ currentPage })
         }
 
@@ -52,7 +57,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
             offset: this.state.offset,
             page: this.state.currentPage,
             query: {
-                text: [this.searchTerm],
+                text: [this.state.searchTerm],
                 price: [-1, 1]
             },
             sort: {
@@ -78,7 +83,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
 
         this.props.history.push({
             pathname: this.props.location.pathname,
-            search: `?text=${this.searchTerm}&page=${toPage}`
+            search: `?text=${this.state.searchTerm}&page=${toPage}`
         })
 
         await this.setState({ currentPage: toPage, isLoading: true })
@@ -108,7 +113,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
                         className={styles.resultsTitle}
                         dangerouslySetInnerHTML={{
                             __html: `${totalResults} results for <span>${
-                                this.searchTerm
+                                this.state.searchTerm
                             }</span>`
                         }}
                     />