Update cookie handling

src/bootstrap/client/start.js

@@ -4,7 +4,6 @@ import 'react-app-polyfill/stable';
 
 // import react-dom
 import ReactDOM from 'react-dom';
-import CookieJar from '../utils/CookieJar';
 
 /* eslint-disable no-underscore-dangle */
 const data = window.__DATA__;
@@ -30,22 +29,7 @@ const render = (component) => {
 // eslint-disable-next-line import/no-unresolved
 const hydrate = require('appClientEntry').default;
 
-const cookies = new CookieJar();
-
-const headers = {
-  create: () => ctx.network.csrfHeader,
-};
-
-const ctxClientOnly = {
-  ...ctx,
-  network: {
-    ...ctx.network,
-    cookies,
-    headers,
-  },
-};
-
-hydrate(ctxClientOnly, { render, root }, data);
+hydrate(ctx, { render, root }, data);
 
 if (process.env.APP_MODE === 'development' && !ssr) {
   // eslint-disable-next-line no-console

src/bootstrap/server/createHttpServer.js

@@ -1,7 +1,7 @@
 const Express = require('express');
 const http = require('http');
 const compression = require('compression');
-const createProxy = require('../utils/createProxy');
+const createProxy = require('./utils/createProxy');
 const createReactAppOnServer = require('./createReactAppOnServer');
 const paths = require('../../config/paths');
 

src/bootstrap/server/createReactAppOnServer.js

@@ -1,32 +1,43 @@
 const ReactDOMServer = require('react-dom/server');
 const path = require('path');
-const CookieJar = require('../utils/CookieJar');
-const detectDevice = require('../utils/detectDevice');
-const detectLocale = require('../utils/detectLocale');
-const handleCsrfProtection = require('../utils/handleCsrfProtection');
-const getRealPath = require('../utils/getRealPath');
-const generateHtmlSnippets = require('../utils/generateHtmlSnippets');
+const cookie = require('cookie');
+const detectDevice = require('./utils/detectDevice');
+const detectLocale = require('./utils/detectLocale');
+const handleCsrfProtection = require('./utils/handleCsrfProtection');
+const getRealPath = require('./utils/getRealPath');
+const generateHtmlSnippets = require('./utils/generateHtmlSnippets');
 const paths = require('../../config/paths');
 
+const getCookies = (req, res) => {
+  const cache = cookie.parse(req.headers.cookie);
+
+  return {
+    get(name) {
+      return cache[name];
+    },
+    set(name, value, options) {
+      res.cookie(name, value, options);
+    },
+  };
+};
+
 module.exports = function createAppOnServer(config) {
   return (req, res) => {
-    const cookies = new CookieJar(req, res);
+    const cookies = getCookies(req, res);
+    const userAgent = req.headers['user-agent'];
+    const { url } = req;
 
     const [locale, localeSource] = detectLocale(req, cookies, config.intl);
-    const device = detectDevice(req, cookies, config.media);
-    const csrfHeader = handleCsrfProtection(cookies, config.network);
-    const [basename, realPath] = getRealPath(req, locale, localeSource);
+    const device = detectDevice(userAgent, cookies, config.device);
+    const csrf = handleCsrfProtection(cookies, config.csrf);
+    const [basename, realPath] = getRealPath(url, locale, localeSource);
 
     const ctx = {
       basename,
       path: realPath,
       ssr: config.ssr,
-      network: {
-        csrfHeader,
-      },
-      media: {
-        device,
-      },
+      csrf,
+      device,
       intl: {
         locale,
         localeSource,
@@ -35,22 +46,10 @@ module.exports = function createAppOnServer(config) {
       },
     };
 
-    const headers = {
-      create: () => ({
-        cookie: cookies.serialize(),
-        ...csrfHeader,
-      }),
-    };
-
     const ctxServerOnly = {
-      ...ctx,
       req,
       res,
-      network: {
-        ...ctx.network,
-        cookies,
-        headers,
-      },
+      ...ctx,
     };
 
     // define render, redirect and error function for hydrate function

src/bootstrap/server/defaultConfig.js

@@ -3,14 +3,14 @@ module.exports = {
   port: 8080,
   proxies: [],
   ssr: true,
-  network: {
-    csrfProtection: true,
-    csrfHeaderName: 'X-Csrf-Token',
-    csrfCookieName: 'csrf',
+  csrf: {
+    protection: true,
+    headerName: 'X-Csrf-Token',
+    cookieName: 'csrf',
   },
-  media: {
-    deviceDetection: true,
-    deviceCookieName: 'view',
+  device: {
+    detection: true,
+    cookieName: 'view',
   },
   intl: {
     localeDetection: true,

src/bootstrap/utils/detectDevice.js → src/bootstrap/server/utils/detectDevice.js

@@ -1,12 +1,14 @@
 const DeviceDetector = require('device-detector-js');
 
-module.exports = function detectDevice(req, cookies, config) {
+module.exports = function detectDevice(source, cookies, config) {
+  const { detection, cookieName } = config;
+
   // we don't want to detect the device
-  if (!config.deviceDetection) {
+  if (!detection) {
     return null;
   }
 
-  const cookie = cookies.get(config.deviceCookieName);
+  const cookie = cookies.get(cookieName);
 
   // device is set by cookie
   if (cookie === 'mobile' || cookie === 'desktop') {
@@ -15,7 +17,7 @@ module.exports = function detectDevice(req, cookies, config) {
 
   // detect device from user agent
   const deviceDetector = new DeviceDetector();
-  const device = deviceDetector.parse(req.headers['user-agent']);
+  const device = deviceDetector.parse(source);
 
   if (device.device && device.device.type === 'smartphone') {
     // phone

src/bootstrap/server/utils/getRealPath.js

@@ -0,0 +1,12 @@
+module.exports = function getRealPath(url, locale, localeSource) {
+  if (localeSource !== 'url') {
+    const basename = '';
+
+    return [basename, url];
+  }
+
+  const basename = `/${locale}`;
+  const path = url.substring(locale.length + 1, url.length);
+
+  return [basename, path];
+};

src/bootstrap/server/utils/handleCsrfProtection.js

@@ -0,0 +1,33 @@
+const randomString = require('randomstring');
+
+const TOKEN_LENGTH = 32;
+
+module.exports = function handleCsrfProtection(cookies, config) {
+  const { protection, cookieName, headerName } = config;
+
+  if (!protection) {
+    return {
+      headers: {},
+    };
+  }
+
+  const cookie = cookies.get(cookieName);
+
+  if (cookie && cookie.length === TOKEN_LENGTH) {
+    return {
+      headers: {
+        [headerName]: cookie,
+      },
+    };
+  }
+
+  const token = randomString.generate(TOKEN_LENGTH);
+
+  cookies.set(cookieName, token, { httpOnly: true });
+
+  return {
+    headers: {
+      [headerName]: token,
+    },
+  };
+};