fix: sanitize input

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="/">
+        <Route path="*">
-          <Home />
+          <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 (
     <>

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]);
 

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, '');
+}