ZAP Friendly Report

A friendly ZAP Report converter from XML to HTML and Material Design.

The following import methods are supported:

• URL
• File upload
• XML string

Status

This project is still a Work In Progress.

TODO:

• Finish the main form
• Fix dark theme
• Fix charts style issues
• Fix dark theme not applied when the report is loaded after theme selection
• Display found evidences (#3)

What's missing:

• Add support multi-sites reports (thanks to @JavanXD for pointing it)
• Replace Materializecss by Fomantic-UI
• Split main code in several parts
• Add translations and country flags
• Add dark theme detection from user environment
• Create a wiki
• Create a ZAP pluggin version

Debugging

There is a debug mode which can be turned on. Just edit the file main.js:

$(function (event) {
    // Config
    var Settings = {
        'debug': false,

Set the value to true to enable the debug mode.

Improve themes

You can improve the whole theming by changing two parts in the project.

CSS

You can change the whole design by changing style properties in the main.css file.

You should avoid chaning properties of the body and main blocks.

If you do so, you might break the whole design.

Javascript

You can change witch elements will be styled in dark in the main.js file by changing the following parts:

// User want it dark!
if (theme === 'dark') {
    ...

    // Change body classes
    Framework.body.removeClass('grey lighten-5 grey-text text-darken-3');
    Framework.body.addClass('grey darken-2 white-text');

    // Change report source fieldset classes
    $('#report-source').addClass('grey darken-3');

    // Change generated collapsibles classes
    $('.collapsible').each(function () {
        $(this).addClass('grey darken-4 white-text');
    });
    $('.collapsible-header').each(function () {
        $(this).addClass('grey darken-3 white-text');
    });
}

// User want it light... (booo! lol)
else {
    ...

    // Change body classes
    Framework.body.removeClass('grey darken-2 white-text');
    Framework.body.addClass('grey lighten-5 grey-text text-darken-3');

    // Change report source fieldset classes
    $('#report-source').removeClass('grey darken-3');

    // Change generated collapsibles classes
    $('.collapsible').each(function () {
        $(this).removeClass('grey darken-4 white-text');
    });
    $('.collapsible-header').each(function () {
        $(this).removeClass('grey darken-3 white-text');
    });
}

Near line 305 in the selectTheme function.

Preview (light theme)

Home

Report loaded

Report opened

Report graph

Report alerts

Report alert details

Preview (dark theme)

Home

Report loaded

Report opened

Report graph

Report alerts

Report alert details

Pictures are subject to changes during the development. I will try to keep them updated.

Charts

Charts are provided by the open-source project named eCharts.

Configure charts themes

Charts themes are generated and downloaded from https://echarts.baidu.com/theme-builder/. Once downloaded, modify the following files:

• index.html: Add a new javascript include line at the end of the file. (next to the others already existing)
• main.js: Modify the following parts:

themes: [
    // Available 'dark' chart themes:
    // - dark
    // - chalk
    // - purple-passion
    {name: 'dark', category: 'dark'},
    {name: 'chalk', category: 'dark', default: true},
    {name: 'purple-passion', category: 'dark'},

    // Available 'light' chart themes:
    // - light
    // - vintage
    // - westeros
    // - wonderland
    // - macarons
    // - walden
    {name: 'light', category: 'light'},
    {name: 'vintage', category: 'light'},
    {name: 'westeros', category: 'light'},
    {name: 'wonderland', category: 'light'},
    {name: 'macarons', category: 'light'},
    {name: 'walden', category: 'light', default: true},
],
theme: 'walden', // Set default chart them
themeCategory: 'light' // Set default chart them category

From the Report.charts object near line 319 in main.js file.

Feedback / Discussions

If you want to send any feedback or having any ideas you want to share regarding this project, feel free to check:

• the dedicated group on Google: https://groups.google.com/forum/#!msg/zaproxy-users/d7sQrlvR0Tg/SkflKmq1BAAJ
• or the dedicated thread on Twitter: https://twitter.com/psiinon/status/1141352908266659840

Contribute

Feel free to open issues / pull requests if you want to contribute to this project.

Thanks to

The people who helped me to make this project better and better.

• @Sevendogs5: Who provided me sample report data and brainstorming.
• @psiinon: Who support me for this project.
• @javanrasokat: For the new upcomming features.

Contact

• Twitter