Free DMARC management from Cloudflare

[mayall]

DMARC-SRG is terrific and I rely on it.

Cloudflare now provides free DMARC management to anyone who hosts DNS there:

https://developers.cloudflare.com/dmarc-management/

Like other services they provide, the DMARC management is nicely implemented. If you have DNS hosted at Cloudflare, I suggest you add it to your DMARC records to supplement the DMARC-SRG reports.

There are a couple features I suggest considering for DMARC-SRG:

1. Graphs. This is by far the biggest addition since it gives immediate visual information.
2. Summaries by source sender (Google, AWS, etc.) and IP. This is useful to find IP addresses that should be authorized for sending.

[williamdes]

Yeah, I also have cloudflare DMARC setup. But it's 90% less fun than dmarc srg
Let's add nice graphs to this tool and it will rock and kill all other tools haha

@liuch any opinions about new js libraries for this project?
Only pure JS ones maybe?

[liuch]

@mayall , I don't have a DNS hosted at Cloudflare and the link you gave only has general information. Charts are good. I already thought about it. Unfortunately, I have no experience in drawing graphs on JS yet, and I do not plan to use external libraries, because the project will immediately cease to be small and light, as it was originally intended. Thanks for the info, I'll think about it again.

Summaries by source sender (Google, AWS, etc.) and IP. This is useful to find IP addresses that should be authorized for sending.

What do you mean exactly?

[liuch]

@williamdes Unfortunately I don't have time to dig into any new JS libraries and I don't tend to plug external code thoughtlessly. Except for the fact that I don't like external dependencies.

[liuch]

To avoid misunderstandings: JavaScript is not my primary programming language. It's not even on the list of my favorite languages. In any case, I will try to improve UI.

[mayall]

The charting package I've used is Chart.js. I have little JS experience but found it easy to use. It seems to be popular and well supported:

https://www.chartjs.org/

Summaries by source sender (Google, AWS, etc.) and IP. This is useful to find IP
addresses that should be authorized for sending.

Attached is an example Cloudflare DMARC report. Clicking through on a source gives you IPs and more info.

Will Mayall

[liuch]

Thank you!

[andrewhenke]

The charting package I've used is Chart.js. I have little JS experience but found it easy to use. It seems to be popular and well supported:

https://www.chartjs.org/

Summaries by source sender (Google, AWS, etc.) and IP. This is useful to find IP
addresses that should be authorized for sending.

Attached is an example Cloudflare DMARC report. Clicking through on a source gives you IPs and more info.

Will Mayall

I have experience in ChartJS and would be more than happy to help with designing charts, if it would be of help! Please feel free to bring to a new issue @liuch and we can work on it! :)

[Shnoulle]

I really like to have a light tools. Adding chartjs (or any other js lib) are not really needed.

Maybe add a plugin system ?

[andrewhenke]

I'm curious what you think about moving to a laravel or framework based system for the project? I feel like this would potentially allow for easier integration/development of plugins/third party integrations.

[liuch]

No, I'm not planning moving to any framework. On the one hand increased convenience, but on the other hand less control over the code that will run on my servers and more compute resource consumption.

[ShawnPConroy]

Regarding graphs and charts, there are a lot of features that can be depicted without using JavaScript.

For example, once I made a dashboard indicator that would show errors over the the last week using simple emoji:

Last 7 Days: 🟩 🟩 🟥 🟨 🟩 🟨 🟩 

For a dashboard, you could also list the domains and use the <meter> element. For each domain have a meter showing fully aligned results:

<label for="default-com-meter">Fuel level:</label>
<meter id="default-com-meter" min="0" max="100" low="80" high="80" optimum="90" value="85">85% aligned</meter

Or, you could show multiple meters per domain, without an optimum, each with their own color-coded CSS class:

Aligned <meter min="0" max="100"  value="85">85% aligned</meter>
Partial (DMARC pass) <meter min="0" max="100"  value="10">50% partial aligned</meter>
Quarantined <meter min="0" max="100"  value="3">3% quarantined</meter>
Rejected <meter min="0" max="100"  value="50">2% rejected</meter>

Or, using some inline-block divs:

<div class="domain-meter"><div class="aligned" style="width:50%">&nbsp;</div><div class="partial" style="width:20%">&nbsp;</div><div class="quar" style="width:20%">&nbsp;</div><div class="rej" style="width:10%">&nbsp;</div>
</div>

With some CSS like:

.domain-meter {
  width: 100%;

  div { 
    display: inline-block;
    font-size: xx-small;
  }

  .aligned {background-color: green; }
  .partial {background-color: yellow; }
  .quar {background-color: orange; }
  .rej { background-color: red; }
}

However, rather than inline-style, which would violate a strict CSP, you may need to make additional classes in .domain-meter such as percent-10, percent-20, percent-30, as well as some percent-1, percent-2, percent-4, percent-6 etc.

Using flex divs, or even grid, might be a better solution, but would require the 10-20 percent classes.

[liuch]

Regarding graphs and charts, there are a lot of features that can be depicted without using JavaScript.

I always look for a way to do without using JS first, and only then I use a script. For example, the main menu button works without a script (only HTML and CSS). But sometimes you can't do things without JS.

Most of these techniques I already know, thank you. However, in some cases, nothing can replace a good old-fashioned chart. And for that you need JS and Canvas...

Looking ahead a bit, there are several local branches in my git repository, and one of them is 'dashboard'.