hgweb: support Content Security Policy
Content-Security-Policy (CSP) is a web security feature that allows
servers to declare what loaded content is allowed to do. For example,
a policy can prevent loading of images, JavaScript, CSS, etc unless
the source of that content is whitelisted (by hostname, URI scheme,
hashes of content, etc). It's a nifty security feature that provides
extra mitigation against some attacks, notably XSS.
Mitigation against these attacks is important for Mercurial because
hgweb renders repository data, which is commonly untrusted. While we
make attempts to escape things, etc, there's the possibility that
malicious data could be injected into the site content. If this happens
today, the full power of the web browser is available to that
malicious content. A restrictive CSP policy (defined by the server
operator and sent in an HTTP header which is outside the control of
malicious content), could restrict browser capabilities and mitigate
security problems posed by malicious data.
CSP works by emitting an HTTP header declaring the policy that browsers
should apply. Ideally, this header would be emitted by a layer above
Mercurial (likely the HTTP server doing the WSGI "proxying"). This
works for some CSP policies, but not all.
For example, policies to allow inline JavaScript may require setting
a "nonce" attribute on <script>. This attribute value must be unique
and non-guessable. And, the value must be present in the HTTP header
and the HTML body. This means that coordinating the value between
Mercurial and another HTTP server could be difficult: it is much
easier to generate and emit the nonce in a central location.
This commit introduces support for emitting a
Content-Security-Policy header from hgweb. A config option defines
the header value. If present, the header is emitted. A special
"%nonce%" syntax in the value triggers generation of a nonce and
inclusion in <script> elements in templates. The inclusion of a
nonce does not occur unless "%nonce%" is present. This makes this
commit completely backwards compatible and the feature opt-in.
The nonce is a type 4 UUID, which is the flavor that is randomly
generated. It has 122 random bits, which should be plenty to satisfy
the guarantees of a nonce.
{header}
<title>{repo|escape}: graph</title>
<link rel="alternate" type="application/atom+xml" href="{url|urlescape}atom-log" title="Atom feed for {repo|escape}"/>
<link rel="alternate" type="application/rss+xml" href="{url|urlescape}rss-log" title="RSS feed for {repo|escape}"/>
<!--[if IE]><script type="text/javascript" src="{staticurl|urlescape}excanvas.js"></script><![endif]-->
</head>
<body>
<div id="container">
<div class="page-header">
<h1 class="breadcrumb"><a href="/">Mercurial</a> {pathdef%breadcrumb} / graph</h1>
<form action="{url|urlescape}log">
{sessionvars%hiddenformentry}
<dl class="search">
<dt><label>Search: </label></dt>
<dd><input type="text" name="rev" /></dd>
</dl>
</form>
<ul class="page-nav">
<li><a href="{url|urlescape}summary{sessionvars%urlparameter}">summary</a></li>
<li><a href="{url|urlescape}shortlog{sessionvars%urlparameter}">shortlog</a></li>
<li><a href="{url|urlescape}changelog{sessionvars%urlparameter}">changelog</a></li>
<li class="current">graph</li>
<li><a href="{url|urlescape}tags{sessionvars%urlparameter}">tags</a></li>
<li><a href="{url|urlescape}bookmarks{sessionvars%urlparameter}">bookmarks</a></li>
<li><a href="{url|urlescape}branches{sessionvars%urlparameter}">branches</a></li>
<li><a href="{url|urlescape}file/{symrev}{sessionvars%urlparameter}">files</a></li>
<li><a href="{url|urlescape}help{sessionvars%urlparameter}">help</a></li>
</ul>
</div>
<h2 class="no-link no-border">graph</h2>
<div id="noscript">The revision graph only works with JavaScript-enabled browsers.</div>
<div id="wrapper">
<ul id="nodebgs"></ul>
<canvas id="graph" width="{canvaswidth}" height="{canvasheight}"></canvas>
<ul id="graphnodes"></ul>
</div>
<script{if(nonce, ' nonce="{nonce}"')}>
<!-- hide script content
document.getElementById('noscript').style.display = 'none';
var data = {jsdata|json};
var graph = new Graph();
graph.scale({bg_height});
graph.vertex = function(x, y, color, parity, cur) \{
this.ctx.beginPath();
color = this.setColor(color, 0.25, 0.75);
this.ctx.arc(x, y, radius, 0, Math.PI * 2, true);
this.ctx.fill();
var bg = '<li class="bg parity' + parity + '"></li>';
var left = (this.bg_height - this.box_size) + (this.columns + 1) * this.box_size;
var nstyle = 'padding-left: ' + left + 'px;';
var tagspan = '';
if (cur[7].length || cur[8].length || (cur[6][0] != 'default' || cur[6][1])) \{
tagspan = '<span class="logtags">';
if (cur[6][1]) \{
tagspan += '<span class="branchtag" title="' + cur[6][0] + '">';
tagspan += cur[6][0] + '</span> ';
} else if (!cur[6][1] && cur[6][0] != 'default') \{
tagspan += '<span class="inbranchtag" title="' + cur[6][0] + '">';
tagspan += cur[6][0] + '</span> ';
}
if (cur[7].length) \{
for (var t in cur[7]) \{
var tag = cur[7][t];
tagspan += '<span class="tagtag">' + tag + '</span> ';
}
}
if (cur[8].length) \{
for (var t in cur[8]) \{
var bookmark = cur[8][t];
tagspan += '<span class="bookmarktag">' + bookmark + '</span> ';
}
}
tagspan += '</span>';
}
var item = '<li style="' + nstyle + '"><span class="desc">';
item += '<a href="{url|urlescape}rev/' + cur[0] + '{sessionvars%urlparameter}" title="' + cur[0] + '">' + cur[3] + '</a>';
item += '</span>' + tagspan + '<span class="info">' + cur[5] + ', by ' + cur[4] + '</span></li>';
return [bg, item];
}
graph.render(data);
// stop hiding script -->
</script>
<div class="page-path">
<a href="{url|urlescape}graph/{symrev}{lessvars%urlparameter}">less</a>
<a href="{url|urlescape}graph/{symrev}{morevars%urlparameter}">more</a>
| {changenav%navgraph}
</div>
<script type="text/javascript"{if(nonce, ' nonce="{nonce}"')}>
ajaxScrollInit(
'{url|urlescape}graph/{rev}?revcount=%next%&style={style}',
{revcount}+60,
function (htmlText, previousVal) \{ return previousVal + 60; },
'#wrapper',
'<div class="%class%" style="text-align: center;">%text%</div>',
'graph'
);
</script>
{footer}