Integrate front-end security tools

[Pamplemousse]

We have new tools

Recently, some work about bringing ZAP into the browser has been released (or is soon-to-be):

• The front-end-tracker package (available on npm): extend the DOM and Javascript APIs for debugging and security testing.
• The FrontEndScanner addon to inject Javascript in any targeted page, which:
  • loads user scripts to be executed
  • integrates the front-end-tracker
  • have utilities functions to report Alerts back to ZAP

Make them work together

There were some discussions about adding the front-end-tracker to the HUD, for example to be able to report DOM events or Storage interactions in the bottom-drawer (see #156 - stale).

However, I think it would then be redundant to have the FrondEndScanner *and* the HUD running side-by-side. Therefore exposing features in the FrontEndScanner to be consumed by the HUD would be IMHO more valuable. One could then for example:

• report DOM events and Storage interactions to the bottom-drawer
• list client-side passive scripts running in the front-end
• report alerts raised by those in the bottom-drawer

Considerations

Some things to consider when implementing:

• The loading of elements in the page: the HUD and the FrontEndScanner both inject themselves using <script> tags. This is already causing trouble, see: issue #136. This is something that's worth having in mind in #160.
• Communication between the HUD and the "javascript code injected by the FrontEndScanner" (running on the target domain).

[dscrobonia]

Hey @Pamplemousse Just getting around to going through my inbox post vacation. This is a great write up! I totally agree with your thoughts on how to integrate them. They should be seperate, but usable if both are installed. Figuring out what is the most sustainable, and simplest way to that though is still a challenge. I hope to look at this after multitabs is done because this is pretty key.

Thanks for this write up! :)