First go to this url to find out the ip ranges Cloudflare has: https://www.cloudflare.com/ips/. The ips will look something like this:
173.245.48.0/20
I did not know what the /20 meant so I simply removed it when whitelisting and of course it did not work. For all the ips listed you have to find out the subnet mask which you can do with the CIDR which is the /20 in this case. You can use this subnet calculator site in order to find out the subnet mask: https://mxtoolbox.com/subnetcalculator.aspx. Input the ip address and select the CIDR (the number after the forward slash) in order to retrieve the subnet mask.
Since I use dotnet with web.config and ipsecurity, the final whitelisting result will look like this:
<add allowed="true" ipAddress="173.245.48.0" subnetMask="255.255.240.0" />
<add allowed="true" ipAddress="103.21.244.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="103.22.200.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="103.31.4.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="141.101.64.0" subnetMask="255.255.192.0" />
<add allowed="true" ipAddress="108.162.192.0" subnetMask="255.255.192.0" />
<add allowed="true" ipAddress="190.93.240.0" subnetMask="255.255.240.0" />
<add allowed="true" ipAddress="188.114.96.0" subnetMask="255.255.240.0" />
<add allowed="true" ipAddress="197.234.240.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="198.41.128.0" subnetMask="255.255.128.0" />
<add allowed="true" ipAddress="162.158.0.0" subnetMask="255.254.0.0" />
<add allowed="true" ipAddress="104.16.0.0" subnetMask="255.240.0.0" />
<add allowed="true" ipAddress="172.64.0.0" subnetMask="255.248.0.0" />
<add allowed="true" ipAddress="131.0.72.0" subnetMask="255.255.252.0" />
the example above will probably get outdated eventually as Cloudflare updates their ip addresses. But now you know how to retrieve the new subnet masks.
In my case I wanted to whitelist Cloudflare in order to gain access to this sites back office editor/admin section. I also had to whitelist my own ips such as my home network in order to gain access.
My final whitelisting looks like this:
<location path="umbraco">
<system.webServer>
<security>
<ipSecurity enableProxyMode="true" allowUnlisted="false" denyAction="Unauthorized">
<add allowed="true" ipAddress="{privateIp}" />
<add allowed="true" ipAddress="{privateIp}" />
<add allowed="true" ipAddress="{privateIp}" />
<!-- Cloudflare whitelist-->
<add allowed="true" ipAddress="173.245.48.0" subnetMask="255.255.240.0" />
<add allowed="true" ipAddress="103.21.244.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="103.22.200.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="103.31.4.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="141.101.64.0" subnetMask="255.255.192.0" />
<add allowed="true" ipAddress="108.162.192.0" subnetMask="255.255.192.0" />
<add allowed="true" ipAddress="190.93.240.0" subnetMask="255.255.240.0" />
<add allowed="true" ipAddress="188.114.96.0" subnetMask="255.255.240.0" />
<add allowed="true" ipAddress="197.234.240.0" subnetMask="255.255.252.0" />
<add allowed="true" ipAddress="198.41.128.0" subnetMask="255.255.128.0" />
<add allowed="true" ipAddress="162.158.0.0" subnetMask="255.254.0.0" />
<add allowed="true" ipAddress="104.16.0.0" subnetMask="255.240.0.0" />
<add allowed="true" ipAddress="172.64.0.0" subnetMask="255.248.0.0" />
<add allowed="true" ipAddress="131.0.72.0" subnetMask="255.255.252.0" />
</ipSecurity>
</security>
</system.webServer>
</location>
So in dotnet you also have to enable proxy mode in the ip security element like so:
<ipSecurity enableProxyMode="true" ..