cspCalculator is a PoC implementation of a dynamic Content Security Policy creator.
Key features
- Allows on the fly manipulation of Content Security Policy
- Enables UX developers to get visual feedback on how a CSP affects the application functionality
- Minimises the changes required to an existing application to allow this to happen
Overview
Content Security Policies are a new feature of modern browsers that support HTML 5 designed to augment the traditional Same Origin Policy of browsers and help to limit the potential impact of Cross-site Scripting and other content manipulation vulnerabilities that may exist within a given web site and which could be exploited by an attacker. It allows allows web site owners to declare approved sources of content that browsers should be allowed to load on that page out-of-band through the use of additional HTTP headers.
The aim here is to minimise the leg work for UX developers in creating web applications that both function and utilise secure development practices. We do this by reducing the server side code changes down to the injection of some client side JavaScript along with a few lines of server side stub code (in this case, in PHP). Once this has been integrated into application in a staging environment, the UX developer can tweak the CSP from their own browser and see how it affects the application functionality :).
Installation
- Copy styles and js from src/html to your web root
- Copy index.php from src/html/examples/php to your web root or tweak your existing web pages in a similar fashion
Usage
The client side code (HTML) should include the following changes:
<head> ... <link rel="stylesheet" href="styles/cspCalculator.css" type="text/css"/> ... </head> <body> <script src="js/cspCalculator.js"></script> ... </body>
This will result in the CSS and JavaScript used to construct the cspCalculator UI being injected into resultant pages.
Additionally, as a minimum case, the server side code should implement the following logic:
$directiveslist = array("default-src", "connect-src", "font-src", "frame-src", "img-src", "media-src", "object-src", "script-src", "style-src", "sandbox");
$headerslist = array("Content-Security-Policy", "X-Content-Security-Policy", "X-WebKit-CSP");
foreach ($directiveslist as $directivename) {
header("Set-Cookie: " . $directivename . "=" . $_COOKIE[$directivename], false);
}
foreach ($headerslist as $headername) {
$headervalue = "";
foreach ($directiveslist as $directivename) {
$headervalue .= "; " . $directivename . " " . $_COOKIE[$directivename];
}
header($headername . ": " . $headervalue);
}
We use cookies as a back channel to allow changes to the Content Security Policy by the UX developer from the UI to easily be signaled back to the web application so that the appropriate headers can be set. Cookies work nicely for this purpose as they do not interfere with any GET or POST parameters that the application may need to send for normal operation.
Once operational, your web application will now include a drop down cspCalculator box on each of its pages. Within the drop down you will see various text boxes for each of the CSP directives that can be defined. The “Calculate” button next to each will attempt to determine the appropriate policy by examining the page’s DOM (something that isn’t 100% effective yet). The “Apply” button will force a round-trip to the server to force it to send the page with the new CSP headers applied. It is recommended that you use this tool in combination with something such as Chrome’s Inspect Element feature to identify any DOM elements that are blocked and which cspCalculator is unable to identify automatically.
cspCalculator should not be deployed in a production environment, since the setting of cookies and/or a CSP by use of header() calls may itself introduce other classes of vulnerability. Rather, once the appropriate CSP has been identified it should be set statically through the use of header() (as in PHP) or other similar calls.
Examples
Since cspCalculator isn’t particularly easy to demonstrate in a static context, a demo version has been deployed for your amusement. This can be found on at www.cspcalculator.org. It has been presented on a separate domain to minimise the risks outlined above in the Usage section of this page.
