Added proxy for elasticsearch requests

Strings are now properly sanitized before being sent to the
elasticsearch server.
Since this API endpoint is on the same domain, this also removes
the requirement to allow CORS in elasticsearch.

Closes #1

README.md

@@ -14,19 +14,6 @@ Search across subtitle files to find relevant screenshots
 * Load the extracted JSON subtitles using commands like...
 `curl -XPOST 'http://localhost:9200/seinfeld/external' -d @json/filename.json`. I used `find` with `-exec` to help with this.
 * Create 1 screenshot per second from your video files with something like `ffmpeg -i Video.mkv -vf fps=1 %d.png`. Each video file should have it's screenshots saved into a separate folder, and serve the root folder with `python -m SimpleHTTPServer`
-* To allow the web app to communicate with Elasticsearch, change the CORS permissions with...
-
-```
-vagrant ssh
-vi /etc/elasticsearch/es-01/elasticsearch.yml
-
-# Add these lines...
-
-http.cors.enabled : true
-http.cors.allow-origin : "*"
-http.cors.allow-methods : OPTIONS, HEAD, GET, POST, PUT, DELETE
-http.cors.allow-headers : X-Requested-With,X-Auth-Token,Content-Type, Content-Length
-```
 
 * Set up the web application in `./webapp` with `npm install`
 * Start it with `npm start`. Your browser should launch with The Jerryatric!

webapp/package.json

@@ -9,6 +9,7 @@
     "babel-core": "5.8.34",
     "bluebird": "3.1.1",
     "classnames": "2.2.1",
+    "elasticsearch-sanitize": "2.0.0",
     "eventemitter3": "1.1.1",
     "express": "4.13.3",
     "fastclick": "1.0.6",

webapp/src/api/search.js

@@ -0,0 +1,22 @@
+import { Router } from 'express';
+import fetch from '../core/fetch';
+import escapeElastic from 'elasticsearch-sanitize';
+
+const router = new Router();
+
+router.get('/', async (req, res, next) => {
+  try {
+    const q = encodeURIComponent(escapeElastic(req.query.q));
+    const searchUrl = 'http://localhost:9200/seinfeld/_search?q=text:' + q;
+    const response = await fetch(searchUrl);
+    const content = await response.json();
+    const results = content.hits.hits.map(function getResultObject(hit) {
+      return hit._source;
+    });
+    res.status(200).send({ results });
+  } catch (err) {
+    next(err);
+  }
+});
+
+export default router;

webapp/src/components/SearchArea/SearchArea.js

@@ -26,18 +26,18 @@ class SearchArea extends Component {
 
   _handleKeyPress(e) {
     if (e.key === 'Enter') {
-      axios.get('http://localhost:9200/seinfeld/_search?q=text:' + e.target.value)
-        .then(function processResponse(response) {
-          const results = response.data.hits.hits.map(function getResultObject(hit) {
-            return hit._source;
+      const query = e.target.value;
+      if (query) {
+        axios.get('/api/search?q=' + query)
+          .then(function processResponse(response) {
+            this.setState({
+              results: response.data.results,
+            });
+          }.bind(this))
+          .catch(function error(response) {
+            console.log(response);
           });
-          this.setState({
-            results,
-          });
-        }.bind(this))
-        .catch(function error(response) {
-          console.log(response);
-        });
+      }
     }
   }
 

webapp/src/server.js

@@ -28,6 +28,7 @@ server.use(express.static(path.join(__dirname, 'public')));
 // Register API middleware
 // -----------------------------------------------------------------------------
 server.use('/api/content', require('./api/content'));
+server.use('/api/search', require('./api/search'));
 
 //
 // Register server-side rendering middleware

webapp/tools/webpack.config.js

@@ -70,6 +70,7 @@ const config = {
         include: [
           path.resolve(__dirname, '../node_modules/react-routing/src'),
           path.resolve(__dirname, '../node_modules/axios'),
+          path.resolve(__dirname, '../node_modules/elasticsearch-sanitize'),
           path.resolve(__dirname, '../src'),
         ],
         loader: 'babel-loader',