Security hardening: authentication, input validation, OWASP compliance, architecture improvements, and CSP fixes for browser mode (#942)

app/src/components/Layout/TitleBar.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import CloudOff from '@mui/icons-material/CloudOff'
+import Logout from '@mui/icons-material/Logout'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 const ConnectionHealthIndicatorAny = ConnectionHealthIndicator as any
 import Menu from '@mui/icons-material/Menu'
@@ -12,6 +13,7 @@ import { connect } from 'react-redux'
 import { connectionActions, globalActions, settingsActions } from '../../actions'
 import { Theme } from '@mui/material/styles'
 import { withStyles } from '@mui/styles'
+import { isBrowserMode } from '../../utils/browserMode'
 
 const styles = (theme: Theme) => ({
   title: {
@@ -35,6 +37,9 @@ const styles = (theme: Theme) => ({
   disconnect: {
     margin: 'auto 8px auto auto',
   },
+  logout: {
+    margin: 'auto 0 auto 8px',
+  },
   disconnectLabel: {
     color: theme.palette.primary.contrastText,
   },
@@ -56,6 +61,22 @@ class TitleBar extends React.PureComponent<Props, {}> {
     this.state = {}
   }
 
+  private handleLogout = async () => {
+    // Disconnect first
+    this.props.actions.connection.disconnect()
+    
+    // Clear credentials from sessionStorage
+    if (typeof sessionStorage !== 'undefined') {
+      sessionStorage.removeItem('mqtt-explorer-username')
+      sessionStorage.removeItem('mqtt-explorer-password')
+    }
+    
+    // Reload page to reset all state and show login dialog
+    if (typeof window !== 'undefined') {
+      window.location.reload()
+    }
+  }
+
   public render() {
     const { actions, classes } = this.props
 
@@ -79,9 +100,19 @@ class TitleBar extends React.PureComponent<Props, {}> {
             className={classes.disconnect}
             sx={{ color: 'primary.contrastText' }}
             onClick={actions.connection.disconnect}
+            data-testid="disconnect-button"
           >
             Disconnect <CloudOff className={classes.disconnectIcon} />
           </Button>
+          {isBrowserMode && (
+            <Button
+              className={classes.logout}
+              sx={{ color: 'primary.contrastText' }}
+              onClick={this.handleLogout}
+            >
+              Logout <Logout className={classes.disconnectIcon} />
+            </Button>
+          )}
           <ConnectionHealthIndicatorAny withBackground={true} />
         </Toolbar>
       </AppBar>