Generate IDs cryptographically securely on the server

package.json

@@ -21,9 +21,6 @@
     "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-react-inline-elements": "^6.8.0",
     "babel-preset-es2015": "^6.18.0",
-    "babel-preset-es2016": "^6.16.0",
-    "babel-preset-es2017": "^6.16.0",
-    "babel-preset-latest": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "eslint-plugin-react": "^2.3.0",
     "react-hot-loader": "^1.2.7",
@@ -31,9 +28,11 @@
     "webpack-dev-server": "^1.8.2"
   },
   "dependencies": {
+    "base64-url": "^1.3.3",
     "body-parser": "^1.15.2",
     "freezer-js": "^0.6.0",
     "moment": "^2.17.1",
+    "pug": "^2.0.0-beta6",
     "qrcode.react": "^0.6.1",
     "react": "^0.13.0",
     "react-router": "^2.0.0",

server.js

@@ -1,7 +1,10 @@
 const path = require('path');
 const express = require('express');
+const pug = require('pug');
 const bodyParser = require('body-parser');
 const moment = require('moment');
+const crypto = require('crypto');
+const base64url = require('base64-url');
 
 const app = express();
 
@@ -9,14 +12,21 @@ const host = 'http://127.0.0.1';
 const port = 3000;
 
 app.use(bodyParser.urlencoded({ extended: false }));
+app.set('view engine', 'pug')
 
 function log(message) {
 	console.log(moment().format() + ': ' + message);
 }
 
+function generateID() {
+	const bytes = crypto.randomBytes(30);
+	const string = base64url.encode(bytes);
+	return string.substring(0, 8);
+}
+
 app.use('/', express.static(path.join(__dirname, 'public')));
 app.get('/*', (req, res) => {
-	res.sendFile(path.join(__dirname, 'public/index.html'));
+	res.render('index', { secureID: generateID() })
 });
 
 app.post('*', (req, res) => {

src/ui/Site.js

@@ -31,11 +31,11 @@ export default class Site extends React.Component {
 			if (localStorage.getItem('id')) {
 				this.state.id = url || localStorage.getItem('id');
 			} else {
-				this.state.id = url || Shortid.generate();
+				this.state.id = url || secureID || Shortid.generate();
 			}
 			localStorage.setItem('id', this.state.id);
 		} else {
-			this.state.id = url || Shortid.generate();
+			this.state.id = url || secureID || Shortid.generate();
 		}
 	}
 

views/index.pug

@@ -0,0 +1,4 @@
+doctype html
+script.
+  var secureID = '!{secureID}';
+include ../public/index.html