Filtering, Tagging, and TablerUI css updates

randomactsofsecurity commented 2 years ago

Lots of changes in this PR, feel free to provide feedback on the UI/UX design etc, if you think there's a better approach to some of these changes (e.g. modals vs something else). I went with what was easiest in my mind.

Tested against:

Debian 5.10.92-1

Chromium 98.0.4758.102 built on Debian 11.2, running on Debian 11.2

Mozilla Firefox 91.6.0esr

1. CSS/JS Updates

In order to facilitate some of the other Tabler UI features, I updated the JS & CSS to version version 1.0.0-beta9. With that change, I had to modify a bit of the html to fit in with the new css, some of the formatting became shifted but it should all look proper now.

Additionally, as mentioned in https://github.com/sensepost/gowitness/pull/118 I put the pagination flex-wrap in the proper place in the html now.

2. Pagination Update

The pagination had a tiny bug where the numbers would not come to a final stop, so that's been addressed as well. Previously, it would say "48, 48".

3. Filtering

The more interesting changes are described below. Note: I could care less what the final HTML/CSS design looks like, so feel free to modify/adjust as you see fit. https://github.com/sensepost/gowitness/issues/122

Filter by HTTP status codes: This filter allows you to select from all of the status codes that are generated within a gowitness session, and you can select multiple filters to drill down.

Custom Tagging and Notes

Selecting the customize tags option allows you to set specific names for the tags. These fields are then applied to colors that have been created as tags. These colors are the hardcoded TablerUI colors, and are pre-populated on first run on a blank gowitness report session.

These tags will then appear as badges underneath the technologies badges. Tags do not have to have a predefined category, if left blank they will still appear. as such.

Tags are assigned by clicking the 'notes' button. If this becomes too annoying, it may be beneficial to have a 'quick' tag option instead of the 'notes' button so its not in a modal.
Notes can be added within this same modal, there is a generic name field and a bigger text box for 'notes'. I'm not entirely sure what the purpose of the generic name would be, but its there as a feature.

Notes also appear on the details page at the very bottom. Maybe it should be higher up the page, idk.

Visibility

The last filters deal with visibility, you can hide any gowitness item to kinda act as a 'analyzed' option. And you can also filter by only showing the hosts you've made a note on. Probably need to add a way to do the inverse of these options, but couldn't think of a nice clean UI for that. Cause we probably want to be able to identify the hosts we've hidden.. or reset them.

Anyways, that's most of the changes. On the code side, I've tweaked a lot of the original 'filtering' query statements as I needed to do some table joins to query the additional structures. Preloading during a query was not working for me, so I've had to go with a bit more annoying approach. If you can figure out a way to get preload to work that would help cut down on the additional queries, but I didn't really see any performance impact at this point with a DB of 1000 screenshots.

This PR probably needs some more testing, I'm not 100% sure I got all the query statements right. I'll be using it regularly soon and see if I catch anything I forgot.

leonjza commented 2 years ago

Wow. What a huge PR. Thank you! I gave the interface a very quick test run and overall it looks great. In my few minutes I only noticed one bug where the filter toggles seem to get confused and almost act in reverse when toggling them (eg. opening the filters when you actually want to disable them).

I'll give the queries some thought and revert on that!

Thanks again 🙌

randomactsofsecurity commented 2 years ago

Good catch about that sticking, I think adding an autocomplete=off to the response codes & tags toggle checkbox will resolve that issue (at least on firefox). I'm going to play around with the table view format a bit more, I've used this PR a tiny bit and realized that having that ability to quickly see what notes you've made is very helpful in the UI (besides the JSON where I already put it).

I'm thinking that having the tagging as a standalone 'quick' button within the little commands here, instead of clicking the 'notes' button, might be a better approach. Though the downside is an additional button which starts to get crowded w/ 4 buttons.

Something like this perhaps.. idk of a better way to 'condense' it

leonjza commented 2 years ago

@randomactsofsecurity I'd love to land this, but the PR has diverged a bit far from the base branch now. I bumped tabler in https://github.com/sensepost/gowitness/commit/05f3c32086588f89b10937f7b303486705cb2d6d and did some UI tweaks overall to the reporting UI (all in preparation for the next major release).

Would you be up for rebasing this PR so that can merge this before the next release?

randomactsofsecurity commented 1 year ago

Closing this PR, as the UI has been changed which would cause a lot of tweaking to be done w/ the current state of this code. This would have to be reimplemented off of the TablerUI to Fluid. One day will revisit...

sensepost / gowitness