SasanLabs / VulnerableApp-facade

VulnerableApp-facade is probably most modern lightweight distributed farm of Vulnerable Applications built for handling wide range of vulnerabilities across tech stacks.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Back button handling

preetkaran20 opened this issue · comments

As VulnerableApp-Facade UI is a Single Page Application, hence there is no routing and all communication is done using Ajax hence browser history stack doesn't store any information of the navigations. under this enhancement, we need to introduce the history tied to the browser navigations such that back button navigates to the previous step.

** Solutions **
The general solution in Single page applications is adding the actions into the browser's history e.g: using history api of browser: https://developer.mozilla.org/en-US/docs/Web/API/History_API

The first solution that is coming to my mind is just add the state into the history and on back button, overwriting the state of the react.

Information about VulnerableApp-Facade code:
State interface: https://github.com/SasanLabs/VulnerableApp-facade/blob/main/facade-app/src/interface/State.tsx
Global State manipulation:

setGlobalState = (globalState: GlobalState) => {

we use react and for state management, we are not using redux, instead, we rely on parent component to expose a method that will be called by a child on state change so that other components can be updated.
The parent component is App.tsx.

commented

Hi, I would like to try this.

Hi @Duy-L,

Great, I have assigned the issue to you.

thanks,
Karan

Hi @Duy-L ,

Are you still working on this issue?

React has a feature called Context that can handle global state management if an external library like Redux would be overkill. Using Context and React hooks would organize how state is managed and is better for maintainability.

https://reactjs.org/docs/context.html

@Dripcoding Shall I work on this?

@amrendranath yes, please go ahead on this.

thanks,
Karan