From 7752eb6f5ad9bb068179af0e6ec04895fe83ec79 Mon Sep 17 00:00:00 2001
From: Yasuaki Uechi <y@uechi.io>
Date: Wed, 5 Feb 2020 17:28:22 +0900
Subject: [PATCH] fix: sanitize input

---
 web/src/App.tsx             | 13 +++++++++----
 web/src/components/Form.tsx |  4 ++--
 web/src/util/text.ts        |  4 ++++
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 63ba56d..af1cc96 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, {createGlobalStyle} from 'styled-components';
 import {Helmet} from 'react-helmet';
 import {useTranslation} from 'react-i18next';
+import {Switch, Route, useParams, Redirect} from 'react-router-dom';
 
 import Welcome from './components/Welcome';
 import Form from './components/Form';
@@ -10,18 +11,21 @@ import Footer from './components/Footer';
 
 import {mobile} from './util/css';
 import {isStandalone} from './util/pwa';
-import {Switch, Route, useParams} from 'react-router-dom';
+import {sanitize} from './util/text';
 
 export default function App() {
   return (
     <>
       <GlobalStyle />
       <Switch>
+        <Route exact path="/">
+          <Home />
+        </Route>
         <Route path="/s/:query">
           <Search />
         </Route>
-        <Route path="/">
-          <Home />
+        <Route path="*">
+          <Redirect to="/" />
         </Route>
       </Switch>
       <Footer />
@@ -30,7 +34,8 @@ export default function App() {
 }
 
 function Search() {
-  const {query: currentQuery} = useParams<{query: string}>();
+  const params = useParams<{query: string}>();
+  const currentQuery = sanitize(params.query);
 
   return (
     <>
diff --git a/web/src/components/Form.tsx b/web/src/components/Form.tsx
index e6e8fb4..b237e7f 100644
--- a/web/src/components/Form.tsx
+++ b/web/src/components/Form.tsx
@@ -2,7 +2,7 @@ import React, {useState, useRef, useEffect} from 'react';
 import styled from 'styled-components';
 import {useTranslation} from 'react-i18next';
 import {Link, useHistory} from 'react-router-dom';
-
+import {sanitize} from '../util/text';
 import {sendQueryStatistics} from '../util/analytics';
 import {useDeferredState} from '../util/hooks';
 import {mobile} from '../util/css';
@@ -56,7 +56,7 @@ const Form: React.FC<{
   }, [query, history]);
 
   useEffect(() => {
-    const modifiedValue = inputValue.replace(/[\s@+!#$%^&*()[\]]/g, '');
+    const modifiedValue = sanitize(inputValue);
     setQuery(modifiedValue);
   }, [inputValue, setQuery]);
 
diff --git a/web/src/util/text.ts b/web/src/util/text.ts
index b48338e..138b393 100644
--- a/web/src/util/text.ts
+++ b/web/src/util/text.ts
@@ -2,3 +2,7 @@ export function capitalize(text: string): string {
   if (text.length === 0) return '';
   return text[0].toUpperCase() + text.slice(1).toLowerCase();
 }
+
+export function sanitize(text: string): string {
+  return text.replace(/[\s@+!#$%^&*()[\]./<>{}]/g, '');
+}