zap-hud
zap-hud copied to clipboard
[WIP] Add storage interactions in the bottom-drawer
Using the front-end-tracker to get storage interactions, then interface that to the HUD's bottom-drawer.
Here a couple of things to have a look at before integrating to the HUD:
- [ ] Do not freeze the HUD when the storage is flooded (for example in juiceshop, where a constant stream of
getItem
is happening) - [ ] Make the UI more consistent with the
history
tab - [ ] (optional) Add missing features: modal for details of an entry, filtering and regex.
- [ ] Opt-in / opt-out per site
@Pamplemousse have you got any sites you recommend testing with? I tried https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local but nothing appeared when I ran the example :/
https://jsfiddle.net/Benjol/HMEVd/ failed too :/
This pull request introduces 1 alert when merging d747ecddcc15ee1c504a7c722920290f129c32fc into 1fdbb47854b79eff672bc6494527fd772689d6a6 - view on LGTM.com
new alerts:
- 1 for Syntax error
Comment posted by LGTM.com
@psiinon In both examples, the storage tab in the bottom-drawer is working, as long as the code interacting with the Storage API is run in the domain on which the HUD is effectively run.
On https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local
The demo code seems to be written in an iframe.
This defeats the front-end-tracker
as the Storage interface's functions inside the iframe cannot be instrumented, so the "reporting code" is not injected.
If, from the console, you try localStorage.removeItem('lastname')
, then the event would show up in the bottom-drawer.
On https://jsfiddle.net/Benjol/HMEVd/
Investigating with the developer console, it appears that the localStorage concerned by the example is fiddle.jshell.net
, and not jsfiddle.net
.
Reading the source of the page, again, the example is run inside an iframe, and indeed, it sources a document hosted on another domain.
To see the tab work: try resizing the grid in the page, and watch for the grid_1-split-sizes
value to be written in the localStorage, and correctly reported in the bottom-drawer.
Just as a mention (not to be tackled)
As the front-end-tracker
has been designed, it cannot report code execution that has not been instrumented, and it does that when injected on top of a page.
Covering the cases of instrumenting code in an iframe
would need some serious thinking, and surely some new design...
Hey @Pamplemousse I must be doing something wrong. I'm still not seeing anything in storage:
Do i need to do something to install the front-end-tracker
as well?
Ah, sorry I did not take the time to give you an update on this...
Having seen the amazing and gigantic work that @jaywon has started in PR #459, I thought it would be smarter for me to wait for a cleaner and refactored structure to build my feature upon rather than hacking it into the current UI.
This is still in a corner of my mind!