luci/modules/luci-mod-status/luasrc/view/admin_status/iptables.htm

<%#
 Copyright 2008-2009 Steven Barth <steven@midlink.org>
 Copyright 2008-2018 Jo-Philipp Wich <jo@mein.io>
 Licensed to the public under the Apache License 2.0.
-%>

<%-
	local fs = require "nixio.fs"
	local has_ip6tables = fs.access("/usr/sbin/ip6tables")
	local mode = 4

	if has_ip6tables then
		mode = luci.dispatcher.context.requestpath
	    mode = tonumber(mode[#mode] ~= "iptables" and mode[#mode]) or 4
	end
-%>

<%+header%>

<style type="text/css">
	span.jump, .cbi-tooltip-container {
		border-bottom: 1px dotted blue;
		cursor: pointer;
	}

	ul {
		list-style: none;
	}

	.references {
		position: relative;
	}

	.references .cbi-tooltip {
		left: 0 !important;
		top: 1.5em !important;
	}

	h4 > span {
		font-size: 90%;
	}
</style>

<script type="text/javascript">//<![CDATA[
	var table_names = [ 'Filter', 'NAT', 'Mangle', 'Raw' ];

	function create_table_section(table)
	{
		var idiv = document.getElementById('iptables'),
		    tdiv = idiv.querySelector('[data-table="%s"]'.format(table)),
		    title = '<%:Table%>: %s'.format(table);

		if (!tdiv) {
			tdiv = E('div', { 'data-table': table }, [
				E('h3', {}, title),
				E('div')
			]);

			if (idiv.firstElementChild.nodeName.toLowerCase() === 'p')
				idiv.removeChild(idiv.firstElementChild);

			var added = false, thisIdx = table_names.indexOf(table);

			idiv.querySelectorAll('[data-table]').forEach(function(child) {
				var childIdx = table_names.indexOf(child.getAttribute('data-table'));

				if (added === false && childIdx > thisIdx) {
					idiv.insertBefore(tdiv, child);
					added = true;
				}
			});

			if (added === false)
				idiv.appendChild(tdiv);
		}

		return tdiv.lastElementChild;
	}

	function create_chain_section(table, chain, policy, packets, bytes, references)
	{
		var tdiv = create_table_section(table),
		    cdiv = tdiv.querySelector('[data-chain="%s"]'.format(chain)),
		    title;

		if (policy)
			title = '<%:Chain%> <em>%s</em> <span>(<%:Policy%>: <em>%s</em>, %d <%:Packets%>, %.2mB <%:Traffic%>)</span>'.format(chain, policy, packets, bytes);
		else
			title = '<%:Chain%> <em>%s</em> <span class="references">(%d <%:References%>)</span>'.format(chain, references);

		if (!cdiv) {
			cdiv = E('div', { 'data-chain': chain }, [
				E('h4', { 'id': 'rule_%s_%s'.format(table.toLowerCase(), chain) }, title),
				E('div', { 'class': 'table' }, [
					E('div', { 'class': 'tr table-titles' }, [
						E('div', { 'class': 'th center' }, '<%:Pkts.%>'),
						E('div', { 'class': 'th center' }, '<%:Traffic%>'),
						E('div', { 'class': 'th' }, '<%:Target%>'),
						E('div', { 'class': 'th' }, '<%:Prot.%>'),
						E('div', { 'class': 'th' }, '<%:In%>'),
						E('div', { 'class': 'th' }, '<%:Out%>'),
						E('div', { 'class': 'th' }, '<%:Source%>'),
						E('div', { 'class': 'th' }, '<%:Destination%>'),
						E('div', { 'class': 'th' }, '<%:Options%>'),
						E('div', { 'class': 'th' }, '<%:Comment%>')
					])
				])
			]);

			tdiv.appendChild(cdiv);
		}
		else {
			cdiv.firstElementChild.innerHTML = title;
		}

		return cdiv.lastElementChild;
	}

	function update_chain_section(chaintable, rows)
	{
		if (!chaintable)
			return;

		cbi_update_table(chaintable, rows, '<%:No rules in this chain.%>');

		if (rows.length === 0 &&
		    document.querySelector('form > [data-hide-empty="true"]'))
			chaintable.parentNode.style.display = 'none';
		else
			chaintable.parentNode.style.display = '';

		chaintable.parentNode.setAttribute('data-empty', rows.length === 0);
	}

	function hide_empty(btn)
	{
		var hide = (btn.getAttribute('data-hide-empty') === 'false');

		btn.setAttribute('data-hide-empty', hide);
		btn.value = hide ? '<%:Show empty chains%>' : '<%:Hide empty chains%>';
		btn.blur();

		document.querySelectorAll('[data-chain][data-empty="true"]')
			.forEach(function(chaintable) {
				chaintable.style.display = hide ? 'none' : '';
			});
	}

	function jump_target(ev)
	{
		var link = ev.target,
		    table = findParent(link, '[data-table]').getAttribute('data-table'),
		    chain = link.textContent,
		    num = +link.getAttribute('data-num'),
		    elem = document.getElementById('rule_%s_%s'.format(table.toLowerCase(), chain));

		if (elem) {
			(document.documentElement || document.body.parentNode || document.body).scrollTop = elem.offsetTop - 40;
			elem.classList.remove('flash');
			void elem.offsetWidth;
			elem.classList.add('flash');

			if (num) {
				var rule = elem.nextElementSibling.childNodes[num];
				if (rule) {
					rule.classList.remove('flash');
					void rule.offsetWidth;
					rule.classList.add('flash');
				}
			}
		}
	}

	function parse_output(table, s)
	{
		var current_chain = null;
		var current_rules = [];
		var seen_chains = {};
		var chain_refs = {};
		var re = /([^\n]*)\n/g;
		var m, m2;

		while ((m = re.exec(s)) != null) {
			if (m[1].match(/^Chain (.+) \(policy (\w+) (\d+) packets, (\d+) bytes\)$/)) {
				var chain = RegExp.$1,
				    policy = RegExp.$2,
				    packets = +RegExp.$3,
				    bytes = +RegExp.$4;

				update_chain_section(current_chain, current_rules);

				seen_chains[chain] = true;
				current_chain = create_chain_section(table, chain, policy, packets, bytes);
				current_rules = [];
			}
			else if (m[1].match(/^Chain (.+) \((\d+) references\)$/)) {
				var chain = RegExp.$1,
				    references = +RegExp.$2;

				update_chain_section(current_chain, current_rules);

				seen_chains[chain] = true;
				current_chain = create_chain_section(table, chain, null, null, null, references);
				current_rules = [];
			}
			else if (m[1].match(/^num /)) {
				continue;
			}
			else if ((m2 = m[1].match(/^(\d+) +(\d+) +(\d+) +(.*?) +(\S+) +(\S*) +(\S+) +(\S+) +([a-f0-9:.]+\/\d+) +([a-f0-9:.]+\/\d+) +(.+)$/)) !== null) {
				var num = +m2[1],
				    pkts = +m2[2],
				    bytes = +m2[3],
				    target = m2[4],
				    proto = m2[5],
				    indev = m2[7],
				    outdev = m2[8],
				    srcnet = m2[9],
				    dstnet = m2[10],
				    options = m2[11] || '-',
				    comment = '-';

				options = options.trim().replace(/(?:^| )\/\* (.+) \*\//,
					function(m1, m2) {
						comment = m2.replace(/^!fw3(: |$)/, '').trim() || '-';
						return '';
					}) || '-';

				current_rules.push([
					'%.2m'.format(pkts).nobr(),
					'%.2mB'.format(bytes).nobr(),
					target ? '<span class="target">%s</span>'.format(target) : '-',
					proto,
					(indev !== '*') ? '<span class="ifacebadge">%s</span>'.format(indev) : '*',
					(outdev !== '*') ? '<span class="ifacebadge">%s</span>'.format(outdev) : '*',
					srcnet,
					dstnet,
					options,
					comment
				]);

				if (target) {
					chain_refs[target] = chain_refs[target] || [];
					chain_refs[target].push([ current_chain, num ]);
				}
			}
		}

		update_chain_section(current_chain, current_rules);

		document.querySelectorAll('[data-table="%s"] [data-chain]'.format(table))
			.forEach(function(cdiv) {
				if (!seen_chains[cdiv.getAttribute('data-chain')]) {
					cdiv.parentNode.removeChild(cdiv);
					return;
				}

				cdiv.querySelectorAll('.target').forEach(function(tspan) {
					if (seen_chains[tspan.textContent]) {
						tspan.classList.add('jump');
						tspan.addEventListener('click', jump_target);
					}
				});

				cdiv.querySelectorAll('.references').forEach(function(rspan) {
					var refs = chain_refs[cdiv.getAttribute('data-chain')];
					if (refs && refs.length) {
						rspan.classList.add('cbi-tooltip-container');
						rspan.appendChild(E('small', { 'class': 'cbi-tooltip ifacebadge', 'style': 'top:1em; left:auto' }, [ E('ul') ]));

						refs.forEach(function(ref) {
							var chain = ref[0].parentNode.getAttribute('data-chain'),
							    num = ref[1];

							rspan.lastElementChild.lastElementChild.appendChild(E('li', {}, [
								'<%:Chain%> ',
								E('span', {
									'class': 'jump',
									'data-num': num,
									'onclick': 'jump_target(event)'
								}, chain),
								', <%:Rule%> #%d'.format(num)
							]));
						});
					}
				});
			});
	}

	table_names.forEach(function(table) {
		XHR.poll(5, '<%=url("admin/status/iptables_dump", tostring(mode))%>/' + table.toLowerCase(), null,
			function (xhr) {
				parse_output(table, xhr.responseText);
			});
	});
//]]></script>

<h2 name="content"><%:Firewall Status%></h2>

<% if has_ip6tables then %>
<ul class="cbi-tabmenu">
	<li class="cbi-tab<%= mode ~= 4 and "-disabled" %>"><a href="<%=url("admin/status/iptables/4")%>"><%:IPv4 Firewall%></a></li>
	<li class="cbi-tab<%= mode ~= 6 and "-disabled" %>"><a href="<%=url("admin/status/iptables/6")%>"><%:IPv6 Firewall%></a></li>
</ul>
<% end %>

<div style="position: relative">
	<form method="post" action="<%=url("admin/status/iptables_action")%>" style="position: absolute; right: 0">
		<input type="hidden" name="token" value="<%=token%>" />
		<input type="hidden" name="family" value="<%=mode%>" />
		<input type="button" class="cbi-button" data-hide-empty="false" value="<%:Hide empty chains%>" onclick="hide_empty(this)" />
		<input type="submit" class="cbi-button" name="zero" value="<%:Reset Counters%>" />
		<input type="submit" class="cbi-button" name="restart" value="<%:Restart Firewall%>" />
	</form>
</div>

<div id="iptables">
	<p><em><%:Collecting data...%></em></p>
</div>

<%+footer%>