zap-hud icon indicating copy to clipboard operation
zap-hud copied to clipboard

[WIP] Add storage interactions in the bottom-drawer

Open Pamplemousse opened this issue 6 years ago • 6 comments

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 avatar Feb 06 '19 17:02 Pamplemousse

@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 :/

psiinon avatar Feb 22 '19 17:02 psiinon

https://jsfiddle.net/Benjol/HMEVd/ failed too :/

psiinon avatar Feb 22 '19 18:02 psiinon

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 avatar Mar 05 '19 13:03 psiinon

@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...

Pamplemousse avatar Mar 05 '19 14:03 Pamplemousse

Hey @Pamplemousse I must be doing something wrong. I'm still not seeing anything in storage: image

Do i need to do something to install the front-end-tracker as well?

dscrobonia avatar Mar 15 '19 16:03 dscrobonia

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!

Pamplemousse avatar May 20 '19 12:05 Pamplemousse