Migrate config to KV data format (#8392)

- adding oauth support to MinIO browser (#8400) by @kanagaraj
- supports multi-line get/set/del for all config fields
- add support for comments, allow toggle
- add extensive validation of config before saving
- support MinIO browser to support proper claims, using STS tokens
- env support for all config parameters, legacy envs are also
  supported with all documentation now pointing to latest ENVs
- preserve accessKey/secretKey from FS mode setups
- add history support implements three APIs
  - ClearHistory
  - RestoreHistory
  - ListHistory
- add help command support for each config parameters
- all the bug fixes after migration to KV, and other bug
  fixes encountered during testing.

browser/app/js/App.js

@@ -18,11 +18,13 @@ import React from "react"
 import { Route, Switch, Redirect } from "react-router-dom"
 import Browser from "./browser/Browser"
 import Login from "./browser/Login"
+import OpenIDLogin from "./browser/OpenIDLogin"
 import web from "./web"
 
 export const App = () => {
   return (
     <Switch>
+      <Route path={"/login/openid"} component={OpenIDLogin} />
       <Route path={"/login"} component={Login} />
       <Route path={"/:bucket?/*"} component={Browser} />
     </Switch>

browser/app/js/browser/AboutModal.js

@@ -19,7 +19,7 @@ import { Modal } from "react-bootstrap"
 import logo from "../../img/logo.svg"
 
 export const AboutModal = ({ serverInfo, hideAbout }) => {
-  const { version, memory, platform, runtime } = serverInfo
+  const { version, platform, runtime } = serverInfo
   return (
     <Modal
       className="modal-about modal-dark"
@@ -42,10 +42,6 @@ export const AboutModal = ({ serverInfo, hideAbout }) => {
               <div>Version</div>
               <small>{version}</small>
             </li>
-            <li>
-              <div>Memory</div>
-              <small>{memory}</small>
-            </li>
             <li>
               <div>Platform</div>
               <small>{platform}</small>

browser/app/js/browser/ChangePasswordModal.js

@@ -80,13 +80,6 @@ export class ChangePasswordModal extends React.Component {
 
   generateAuth(e) {
     const { serverInfo } = this.props
-    // Generate random access key only for root user
-    if (!serverInfo.userInfo.isIAMUser) {
-      this.setState({
-        newAccessKey: getRandomAccessKey()
-      })
-    }
-
     this.setState({
       newSecretKey: getRandomSecretKey(),
       newSecretKeyVisible: true
@@ -100,10 +93,16 @@ export class ChangePasswordModal extends React.Component {
       return false
     }
 
-    // When credentials are set on ENV, password change not allowed for owner
-    if (serverInfo.info.isEnvCreds && !serverInfo.userInfo.isIAMUser) {
+    // Password change is not allowed for temporary users(STS)
+    if(serverInfo.userInfo.isTempUser) {
       return false
     }
+
+    // Password change is only allowed for regular users
+    if (!serverInfo.userInfo.isIAMUser) {
+      return false
+    }
+
     return true
   }
 
@@ -186,24 +185,6 @@ export class ChangePasswordModal extends React.Component {
           </div>
 
           <div className="has-toggle-password m-t-30">
-            {!serverInfo.userInfo.isIAMUser && (
-              <InputGroup
-                value={this.state.newAccessKey}
-                id="newAccessKey"
-                label={"New Access Key"}
-                name="newAccesskey"
-                type="text"
-                spellCheck="false"
-                required="required"
-                autoComplete="false"
-                align="ig-left"
-                onChange={e => {
-                  this.setState({ newAccessKey: e.target.value })
-                }}
-                readonly={serverInfo.userInfo.isIAMUser}
-              />
-            )}
-
             <i
               onClick={() => {
                 this.setState({

browser/app/js/browser/Login.js

@@ -22,14 +22,18 @@ import Alert from "../alert/Alert"
 import * as actionsAlert from "../alert/actions"
 import InputGroup from "./InputGroup"
 import web from "../web"
-import { Redirect } from "react-router-dom"
+import { Redirect, Link } from "react-router-dom"
+import qs from "query-string"
+import storage from "local-storage-fallback"
+import history from "../history"
 
 export class Login extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
       accessKey: "",
-      secretKey: ""
+      secretKey: "",
+      discoveryDoc: {}
     }
   }
 
@@ -83,6 +87,14 @@ export class Login extends React.Component {
     document.body.classList.add("is-guest")
   }
 
+  componentDidMount() {
+    web.GetDiscoveryDoc().then(({ DiscoveryDoc }) => {
+      this.setState({
+        discoveryDoc: DiscoveryDoc
+      })
+    })
+  }
+
   componentWillUnmount() {
     document.body.classList.remove("is-guest")
   }
@@ -127,6 +139,15 @@ export class Login extends React.Component {
               <i className="fas fa-sign-in-alt" />
             </button>
           </form>
+          {this.state.discoveryDoc &&
+            this.state.discoveryDoc.authorization_endpoint && (
+            <div className="openid-login">
+              <div className="or">or</div>
+              <a href={"/login/openid"} className="btn openid-btn">
+                Log in with OpenID
+              </a>
+            </div>
+          )}
         </div>
         <div className="l-footer">
           <a className="lf-logo" href="">

browser/app/js/browser/OpenIDLogin.js

@@ -0,0 +1,170 @@
+/*
+ * MinIO Cloud Storage (C) 2019 MinIO, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { connect } from "react-redux"
+import logo from "../../img/logo.svg"
+import Alert from "../alert/Alert"
+import * as actionsAlert from "../alert/actions"
+import InputGroup from "./InputGroup"
+import web from "../web"
+import { Redirect } from "react-router-dom"
+import qs from "query-string"
+import { getRandomString } from "../utils"
+import storage from "local-storage-fallback"
+import jwtDecode from "jwt-decode"
+
+export class OpenIDLogin extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      clientID: "",
+      discoveryDoc: {}
+    }
+    this.clientIDChange = this.clientIDChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  clientIDChange(e) {
+    this.setState({
+      clientID: e.target.value
+    })
+  }
+
+  handleSubmit(event) {
+    event.preventDefault()
+    const { showAlert } = this.props
+    let message = ""
+    if (this.state.clientID === "") {
+      message = "Client ID cannot be empty"
+    }
+    if (message) {
+      showAlert("danger", message)
+      return
+    }
+
+    if (this.state.discoveryDoc && this.state.discoveryDoc.authorization_endpoint) {
+      const redirectURI = window.location.href.split("#")[0]
+      var params = new URLSearchParams()
+      params.set("response_type", "id_token")
+      params.set("scope", "openid")
+      params.set("client_id", this.state.clientID)
+      params.set("redirect_uri", redirectURI)
+
+      // Store nonce in localstorage to check again after the redirect
+      const nonce = getRandomString(16)
+      params.set("nonce", nonce)
+      storage.setItem("openIDKey", nonce)
+
+      const authURL = `${
+        this.state.discoveryDoc.authorization_endpoint
+      }?${params.toString()}`
+      window.location = authURL
+    }
+  }
+
+  componentWillMount() {
+    const { clearAlert } = this.props
+    // Clear out any stale message in the alert of previous page
+    clearAlert()
+    document.body.classList.add("is-guest")
+
+    web.GetDiscoveryDoc().then(({ DiscoveryDoc }) => {
+      this.setState({
+        discoveryDoc: DiscoveryDoc
+      })
+    })
+  }
+
+  componentDidMount() {
+    const values = qs.parse(this.props.location.hash)
+    if (values.error) {
+      this.props.showAlert("danger", values.error_description)
+      return
+    }
+
+    if (values.id_token) {
+      // Check nonce on the token to prevent replay attacks
+      const tokenJSON = jwtDecode(values.id_token)
+      if (storage.getItem("openIDKey") !== tokenJSON.nonce) {
+        this.props.showAlert("danger", "Invalid auth token")
+        return
+      }
+
+      web.LoginSTS({ token: values.id_token }).then(() => {
+        storage.removeItem("openIDKey")
+        this.forceUpdate()
+        return
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    document.body.classList.remove("is-guest")
+  }
+
+  render() {
+    const { clearAlert, alert } = this.props
+    if (web.LoggedIn()) {
+      return <Redirect to={"/"} />
+    }
+    let alertBox = <Alert {...alert} onDismiss={clearAlert} />
+    // Make sure you don't show a fading out alert box on the initial web-page load.
+    if (!alert.message) alertBox = ""
+    return (
+      <div className="login">
+        {alertBox}
+        <div className="l-wrap">
+          <form onSubmit={this.handleSubmit}>
+            <InputGroup
+              value={this.state.clientID}
+              onChange={this.clientIDChange}
+              className="ig-dark"
+              label="Client ID"
+              id="clientID"
+              name="clientID"
+              type="text"
+              spellCheck="false"
+              required="required"
+            />
+            <button className="lw-btn" type="submit">
+              <i className="fas fa-sign-in-alt" />
+            </button>
+          </form>
+        </div>
+        <div className="l-footer">
+          <a className="lf-logo" href="">
+            <img src={logo} alt="" />
+          </a>
+          <div className="lf-server">{window.location.host}</div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    showAlert: (type, message) =>
+      dispatch(actionsAlert.set({ type: type, message: message })),
+    clearAlert: () => dispatch(actionsAlert.clear())
+  }
+}
+
+export default connect(
+  state => state,
+  mapDispatchToProps
+)(OpenIDLogin)

browser/app/js/browser/__tests__/AboutModal.test.js

@@ -21,7 +21,6 @@ import { AboutModal } from "../AboutModal"
 describe("AboutModal", () => {
   const serverInfo = {
     version: "test",
-    memory: "test",
     platform: "test",
     runtime: "test"
   }

browser/app/js/browser/__tests__/BrowserDropdown.test.js

@@ -21,7 +21,6 @@ import { BrowserDropdown } from "../BrowserDropdown"
 describe("BrowserDropdown", () => {
   const serverInfo = {
     version: "test",
-    memory: "test",
     platform: "test",
     runtime: "test"
   }

browser/app/js/browser/__tests__/ChangePasswordModal.test.js

@@ -54,11 +54,10 @@ jest.mock("../../utils", () => ({
 describe("ChangePasswordModal", () => {
   const serverInfo = {
     version: "test",
-    memory: "test",
     platform: "test",
     runtime: "test",
-    info: { isEnvCreds: false },
-    userInfo: { isIAMUser: false }
+    info: {},
+    userInfo: { isIAMUser: true }
   }
 
   it("should render without crashing", () => {
@@ -76,10 +75,9 @@ describe("ChangePasswordModal", () => {
     ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
   })
 
-  it("should not allow changing password when isEnvCreds is true and not IAM user", () => {
+  it("should not allow changing password when not IAM user", () => {
     const newServerInfo = {
       ...serverInfo,
-      info: { isEnvCreds: true },
       userInfo: { isIAMUser: false }
     }
     const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
@@ -91,21 +89,22 @@ describe("ChangePasswordModal", () => {
     ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
   })
 
-  it("should generate accessKey and secretKey when Generate buttons is clicked", () => {
-    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
-    wrapper.find("#generate-keys").simulate("click")
-    setImmediate(() => {
-      expect(wrapper.state("newAccessKey")).toBe("raccesskey")
-      expect(wrapper.state("newSecretKey")).toBe("rsecretkey")
-    })
+  it("should not allow changing password for STS user", () => {
+    const newServerInfo = {
+      ...serverInfo,
+      userInfo: { isTempUser: true }
+    }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(
+      wrapper
+        .find("ModalBody")
+        .childAt(0)
+        .text()
+    ).toBe("Credentials of this user cannot be updated through MinIO Browser.")
   })
 
   it("should not generate accessKey for IAM User", () => {
-    const newServerInfo = {
-      ...serverInfo,
-      userInfo: { isIAMUser: true }
-    }
-    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
     wrapper.find("#generate-keys").simulate("click")
     setImmediate(() => {
       expect(wrapper.state("newAccessKey")).toBe("minio")
@@ -114,59 +113,24 @@ describe("ChangePasswordModal", () => {
   })
 
   it("should not show new accessKey field for IAM User", () => {
-    const newServerInfo = {
-      ...serverInfo,
-      userInfo: { isIAMUser: true }
-    }
-    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
     expect(wrapper.find("#newAccesskey").exists()).toBeFalsy()
   })
 
-  it("should disble Update button for invalid accessKey or secretKey", () => {
+  it("should disable Update button for secretKey", () => {
     const showAlert = jest.fn()
     const wrapper = shallow(
       <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
     )
-    wrapper
-      .find("#currentAccessKey")
-      .simulate("change", { target: { value: "minio" } })
     wrapper
       .find("#currentSecretKey")
       .simulate("change", { target: { value: "minio123" } })
-    wrapper.find("#newAccessKey").simulate("change", { target: { value: "t" } })
     wrapper
       .find("#newSecretKey")
       .simulate("change", { target: { value: "t1" } })
     expect(wrapper.find("#update-keys").prop("disabled")).toBeTruthy()
   })
 
-  it("should update accessKey and secretKey when Update button is clicked", () => {
-    const showAlert = jest.fn()
-    const wrapper = shallow(
-      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
-    )
-    wrapper
-      .find("#currentAccessKey")
-      .simulate("change", { target: { value: "minio" } })
-    wrapper
-      .find("#currentSecretKey")
-      .simulate("change", { target: { value: "minio123" } })
-    wrapper
-      .find("#newAccessKey")
-      .simulate("change", { target: { value: "test" } })
-    wrapper
-      .find("#newSecretKey")
-      .simulate("change", { target: { value: "test1234" } })
-    expect(wrapper.find("#update-keys").prop("disabled")).toBeFalsy()
-    wrapper.find("#update-keys").simulate("click")
-    setImmediate(() => {
-      expect(showAlert).toHaveBeenCalledWith({
-        type: "success",
-        message: "Credentials updated successfully."
-      })
-    })
-  })
-
   it("should call hideChangePassword when Cancel button is clicked", () => {
     const hideChangePassword = jest.fn()
     const wrapper = shallow(

browser/app/js/browser/__tests__/Login.test.js

@@ -19,21 +19,24 @@ import { shallow, mount } from "enzyme"
 import { Login } from "../Login"
 import web from "../../web"
 
-jest.mock('../../web', () => ({
+jest.mock("../../web", () => ({
   Login: jest.fn(() => {
     return Promise.resolve({ token: "test", uiVersion: "2018-02-01T01:17:47Z" })
   }),
-  LoggedIn: jest.fn()
+  LoggedIn: jest.fn(),
+  GetDiscoveryDoc: jest.fn(() => {
+    return Promise.resolve({ DiscoveryDoc: {"authorization_endpoint": "test"} })
+  })
 }))
 
 describe("Login", () => {
   const dispatchMock = jest.fn()
   const showAlertMock = jest.fn()
   const clearAlertMock = jest.fn()
-  
+
   it("should render without crashing", () => {
-    shallow(<Login 
-      dispatch={dispatchMock} 
+    shallow(<Login
+      dispatch={dispatchMock}
       alert={{ show: false, type: "danger"}}
       showAlert={showAlertMock}
       clearAlert={clearAlertMock}
@@ -42,8 +45,8 @@ describe("Login", () => {
 
   it("should initially have the is-guest class", () => {
     const wrapper = shallow(
-      <Login 
-        dispatch={dispatchMock} 
+      <Login
+        dispatch={dispatchMock}
         alert={{ show: false, type: "danger"}}
         showAlert={showAlertMock}
         clearAlert={clearAlertMock}
@@ -55,8 +58,8 @@ describe("Login", () => {
 
   it("should throw an alert if the keys are empty in login form", () => {
     const wrapper = mount(
-      <Login 
-        dispatch={dispatchMock} 
+      <Login
+        dispatch={dispatchMock}
         alert={{ show: false, type: "danger"}}
         showAlert={showAlertMock}
         clearAlert={clearAlertMock}
@@ -85,8 +88,8 @@ describe("Login", () => {
 
   it("should call web.Login with correct arguments if both keys are entered", () => {
     const wrapper = mount(
-      <Login 
-        dispatch={dispatchMock} 
+      <Login
+        dispatch={dispatchMock}
         alert={{ show: false, type: "danger"}}
         showAlert={showAlertMock}
         clearAlert={clearAlertMock}
@@ -98,7 +101,7 @@ describe("Login", () => {
     })
     wrapper.find("form").simulate("submit")
     expect(web.Login).toHaveBeenCalledWith({
-      "username": "accessKey", 
+      "username": "accessKey",
       "password": "secretKey"
     })
   })

browser/app/js/browser/__tests__/actions.test.js

@@ -25,7 +25,6 @@ jest.mock("../../web", () => ({
   ServerInfo: jest.fn(() => {
     return Promise.resolve({
       MinioVersion: "test",
-      MinioMemory: "test",
       MinioPlatform: "test",
       MinioRuntime: "test",
       MinioGlobalInfo: "test"
@@ -55,7 +54,6 @@ describe("Common actions", () => {
         type: "common/SET_SERVER_INFO",
         serverInfo: {
           version: "test",
-          memory: "test",
           platform: "test",
           runtime: "test",
           info: "test"

browser/app/js/browser/__tests__/reducer.test.js

@@ -76,7 +76,6 @@ describe("common reducer", () => {
         type: actionsCommon.SET_SERVER_INFO,
         serverInfo: {
           version: "test",
-          memory: "test",
           platform: "test",
           runtime: "test",
           info: "test"
@@ -84,7 +83,6 @@ describe("common reducer", () => {
       }).serverInfo
     ).toEqual({
       version: "test",
-      memory: "test",
       platform: "test",
       runtime: "test",
       info: "test"

browser/app/js/browser/actions.js

@@ -51,7 +51,6 @@ export const fetchServerInfo = () => {
     return web.ServerInfo().then(res => {
       const serverInfo = {
         version: res.MinioVersion,
-        memory: res.MinioMemory,
         platform: res.MinioPlatform,
         runtime: res.MinioRuntime,
         info: res.MinioGlobalInfo,

browser/app/js/utils.js

@@ -107,3 +107,13 @@ export const getRandomSecretKey = () => {
   const base64Str = btoa(binStr)
   return base64Str.replace(/\//g, "+").substr(0, 40)
 }
+
+export const getRandomString = length => {
+  var text = ""
+  var possible =
+    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
+  for (var i = 0; i < length; i++) {
+    text += possible.charAt(Math.floor(Math.random() * possible.length))
+  }
+  return text
+}

browser/app/js/web.js

@@ -75,6 +75,16 @@ class Web {
   GetToken() {
     return storage.getItem('token')
   }
+  GetDiscoveryDoc() {
+    return this.makeCall("GetDiscoveryDoc")
+  }
+  LoginSTS(args) {
+    return this.makeCall('LoginSTS', args)
+      .then(res => {
+        storage.setItem('token', `${res.token}`)
+        return res
+      })
+  }
   ServerInfo() {
     return this.makeCall('ServerInfo')
   }
@@ -125,4 +135,4 @@ class Web {
 
 const web = new Web(`${window.location.protocol}//${window.location.host}${minioBrowserPrefix}/webrpc`);
 
-export default web;
+export default web;

browser/app/less/inc/login.less

@@ -95,6 +95,40 @@
     }
 }
 
+.openid-login {
+    margin-top: 30px;
+}
+
+.openid-btn {
+    display: inline-block;
+    margin-top: 30px;
+    border-width: 1px;
+    border-style: solid;
+    opacity: 0.6;
+    font-size: 14px;
+    &:hover {
+        color: @link-color;
+        opacity: 1;
+    }
+}
+
+.or {
+    display:flex;
+    justify-content:center;
+    align-items: center;
+    color:grey;
+  }
+  
+.or:after,
+.or:before {
+    content: "";
+    display: block;
+    background: grey;
+    width: 10px;
+    height: 1px;
+    margin: 0 10px;
+}
+
 /*------------------------------
     Chrome autofill fix
 -------------------------------*/

browser/package-lock.json

@@ -8459,6 +8459,24 @@
         "prepend-http": "^1.0.0",
         "query-string": "^4.1.0",
         "sort-keys": "^1.0.0"
+      },
+      "dependencies": {
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "strict-uri-encode": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+          "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+          "dev": true
+        }
       }
     },
     "npm-path": {
@@ -10287,13 +10305,13 @@
       "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A=="
     },
     "query-string": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
-      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
-      "dev": true,
+      "version": "6.8.2",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-6.8.2.tgz",
+      "integrity": "sha512-J3Qi8XZJXh93t2FiKyd/7Ec6GNifsjKXUsVFkSBj/kjLsDylWhnCz4NT1bkPcKotttPW+QbKGqqPH8OoI2pdqw==",
       "requires": {
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
+        "decode-uri-component": "^0.2.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
       }
     },
     "querystring": {
@@ -12142,6 +12160,11 @@
         }
       }
     },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
     "split-string": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -12312,10 +12335,9 @@
       "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
     },
     "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
     },
     "string-length": {
       "version": "2.0.0",

browser/package.json

@@ -75,6 +75,7 @@
     "mime-db": "^1.25.0",
     "mime-types": "^2.1.13",
     "moment": "^2.24.0",
+    "query-string": "^6.8.2",
     "react": "^16.2.0",
     "react-addons-test-utils": "^0.14.8",
     "react-bootstrap": "^0.32.0",

browser/webpack.config.js

@@ -74,7 +74,8 @@ var exports = {
     proxy: {
       '/minio/webrpc': {
 	target: 'http://localhost:9000',
-	secure: false
+  secure: false,
+  headers: {'Host': "localhost:9000"}
       },
       '/minio/upload/*': {
 	target: 'http://localhost:9000',