Merge pull request #7665 from Expensify/Rory-FixDesktopCORS

[CP Stg] Fix CORS errors in desktop application

Author: tgolen

config/electron.config.js

@@ -1,8 +1,11 @@
+const ENVIRONMENT = require('../src/CONST/ENVIRONMENT');
+
 module.exports = {
     appId: 'com.expensifyreactnative.chat',
     productName: 'New Expensify',
     extraMetadata: {
         main: './desktop/main.js',
+        electronEnvironment: process.env.SHOULD_DEPLOY_PRODUCTION ? ENVIRONMENT.PRODUCTION : ENVIRONMENT.STAGING,
     },
     mac: {
         category: 'public.app-category.finance',

desktop/ELECTRON_ENVIRONMENT.js

@@ -0,0 +1,30 @@
+// This variable is injected into package.json by electron-builder via the extraMetadata field (specified in electron.config.js)
+// It will be `PROD` on production, `STG` on staging, and `undefined` on dev (because dev doesn't use electron-builder)
+const {electronEnvironment} = require('../package.json');
+const ENVIRONMENT = require('../src/CONST/ENVIRONMENT');
+
+/**
+ * @returns {String} – One of ['PROD', 'STG', 'DEV']
+ */
+function getEnvironment() {
+    // If we are on dev, then the NODE_ENV environment variable will be present (set by the executing shell in start.js)
+    if (process.env.NODE_ENV === 'development') {
+        return ENVIRONMENT.DEV;
+    }
+
+    // Otherwise, use the environment injected into package.json by electron-builder
+    return electronEnvironment;
+}
+
+function isDev() {
+    return getEnvironment() === ENVIRONMENT.DEV;
+}
+
+function isProd() {
+    return getEnvironment() === ENVIRONMENT.PRODUCTION;
+}
+
+module.exports = {
+    isDev,
+    isProd,
+};

desktop/main.js

@@ -11,10 +11,10 @@ const serve = require('electron-serve');
 const contextMenu = require('electron-context-menu');
 const {autoUpdater} = require('electron-updater');
 const log = require('electron-log');
+const ELECTRON_ENVIRONMENT = require('./ELECTRON_ENVIRONMENT');
 const ELECTRON_EVENTS = require('./ELECTRON_EVENTS');
 const checkForUpdates = require('../src/libs/checkForUpdates');
 
-const isDev = process.env.NODE_ENV === 'development';
 const port = process.env.PORT || 8080;
 
 /**
@@ -41,7 +41,7 @@ autoUpdater.logger.transports.file.level = 'info';
 _.assign(console, log.functions);
 
 // setup Hot reload
-if (isDev) {
+if (ELECTRON_ENVIRONMENT.isDev()) {
     try {
         require('electron-reloader')(module, {
             watchRenderer: false,
@@ -124,12 +124,12 @@ const electronUpdater = browserWindow => ({
 });
 
 const mainWindow = (() => {
-    const loadURL = isDev
+    const loadURL = ELECTRON_ENVIRONMENT.isDev()
         ? win => win.loadURL(`http://localhost:${port}`)
         : serve({directory: `${__dirname}/../dist`});
 
     // Prod and staging set the icon in the electron-builder config, so only update it here for dev
-    if (isDev) {
+    if (ELECTRON_ENVIRONMENT.isDev()) {
         app.dock.setIcon(`${__dirname}/icon-dev.png`);
         app.setName('New Expensify');
     }
@@ -147,8 +147,38 @@ const mainWindow = (() => {
                 titleBarStyle: 'hidden',
             });
 
+            /*
+             * The default origin of our Electron app is app://- instead of https://new.expensify.com or https://staging.new.expensify.com
+             * This causes CORS errors because the referer and origin headers are wrong and the API responds with an Access-Control-Allow-Origin that doesn't match app://-
+             *
+             * To fix this, we'll:
+             *
+             *   1. Modify headers on any outgoing requests to match the origin of our corresponding web environment.
+             *   2. Modify the Access-Control-Allow-Origin header of the response to match the "real" origin of our Electron app.
+             */
+            if (!ELECTRON_ENVIRONMENT.isDev()) {
+                const newDotURL = ELECTRON_ENVIRONMENT.isProd() ? 'https://new.expensify.com' : 'https://staging.new.expensify.com';
+
+                // Modify the origin and referer for requests sent to our API
+                const validDestinationFilters = {urls: ['https://*.expensify.com/*']};
+                browserWindow.webContents.session.webRequest.onBeforeSendHeaders(validDestinationFilters, (details, callback) => {
+                    // eslint-disable-next-line no-param-reassign
+                    details.requestHeaders.origin = newDotURL;
+                    // eslint-disable-next-line no-param-reassign
+                    details.requestHeaders.referer = newDotURL;
+                    callback({requestHeaders: details.requestHeaders});
+                });
+
+                // Modify access-control-allow-origin header for the response
+                browserWindow.webContents.session.webRequest.onHeadersReceived(validDestinationFilters, (details, callback) => {
+                    // eslint-disable-next-line no-param-reassign
+                    details.responseHeaders['access-control-allow-origin'] = ['app://-'];
+                    callback({responseHeaders: details.responseHeaders});
+                });
+            }
+
             // Prod and staging overwrite the app name in the electron-builder config, so only update it here for dev
-            if (isDev) {
+            if (ELECTRON_ENVIRONMENT.isDev()) {
                 browserWindow.setTitle('New Expensify');
             }
 
@@ -286,7 +316,7 @@ const mainWindow = (() => {
 
         // Start checking for JS updates
         .then((browserWindow) => {
-            if (isDev) {
+            if (ELECTRON_ENVIRONMENT.isDev()) {
                 return;
             }
 

src/CONST/ENVIRONMENT.js

@@ -0,0 +1,5 @@
+module.exports = {
+    DEV: 'DEV',
+    STAGING: 'STG',
+    PRODUCTION: 'PROD',
+};

src/CONST.js renamed to src/CONST/index.js

@@ -1,6 +1,7 @@
 import lodashGet from 'lodash/get';
 import Config from 'react-native-config';
-import * as Url from './libs/Url';
+import ENVIRONMENT from './ENVIRONMENT';
+import * as Url from '../libs/Url';
 
 const CLOUDFRONT_URL = 'https://d2k5nsl2zxldvw.cloudfront.net';
 const ACTIVE_ENVIRONMENT_NEW_EXPENSIFY_URL = Url.addTrailingForwardSlash(lodashGet(Config, 'EXPENSIFY_URL_CASH', 'https://new.expensify.com'));
@@ -390,12 +391,6 @@ const CONST = {
         ADMIN: '[email protected]',
     },
 
-    ENVIRONMENT: {
-        DEV: 'DEV',
-        STAGING: 'STG',
-        PRODUCTION: 'PROD',
-    },
-
     // Used to delay the initial fetching of reportActions when the app first inits or reconnects (e.g. returning
     // from backgound). The times are based on how long it generally seems to take for the app to become interactive
     // in each scenario.
@@ -614,4 +609,6 @@ const CONST = {
     },
 };
 
+CONST.ENVIRONMENT = ENVIRONMENT;
+
 export default CONST;