initial github pages commit of ssl-config-generator

2 files changed, 570 insertions, 0 deletions

diff --git a/css/screen.css b/css/screen.css
new file mode 100644
index 0000000..b2b7b98
--- /dev/null
+++ b/css/screen.css
@@ -0,0 +1,316 @@
+/*	Less Framework 4
+	http://lessframework.com
+	by Joni Korpi
+	License: http://opensource.org/licenses/mit-license.php	*/
+
+
+/*	Resets
+	------	*/
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
+p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
+img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
+dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figure, figcaption, hgroup, 
+menu, footer, header, nav, section, summary, time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+
+article, aside, canvas, figure, figure img, figcaption, hgroup,
+footer, header, nav, section, audio, video {
+	display: block;
+}
+
+a {color: rgb(175,50,50); text-decoration: none; border-bottom: 1px dotted rgb(175,50,50);}
+
+a img {border: 0;}
+p {margin-bottom: 24px;}
+.mozilla-red {color: rgb(175,50,50);}
+.img-left {float: left;}
+.bg {background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;}
+
+.pad {padding: 4px;}
+
+
+/*	Typography presets
+	------------------	*/
+	
+@font-face {
+	font-family: "OpenSans";
+	src: url(OpenSans-Light.ttf) format("truetype");
+	}
+	
+@font-face {
+	font-family: "OpenSans-Reg";
+	src: url(OpenSans-Regular.ttf) format("truetype");
+	}
+	
+body {font: 16px/24px Georgia, serif;}
+
+.huge, .large, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}
+
+.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;}
+.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;}
+h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
+h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}
+h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}
+h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}
+.small, small {	font-size: 12px; line-height: 100%;}
+
+/*	Oh yes, your Gumdrop Buttons
+	------------------	*/
+	
+	.button {
+
+float: left; 
+display: block; 
+text-decoration: none;
+text-shadow: 0px 1px 0px rgba(0,0,0,0.25);
+font: 14px/48px 'OpenSans-Reg', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+letter-spacing: -0.25px;
+height: 48px; 
+width: 252px; 
+background-color: #81BC2E; 
+text-align: center; 
+color: white;
+border-bottom: none;
+
+
+
+-webkit-border-radius: 0.25em;
+-moz-border-radius: 0.25em;
+border-radius: 0.25em;
+
+-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
+-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1);
+box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.1); 
+
+/* IE10 */ 
+background-image: -ms-linear-gradient(top, #81BC2E 0%, #659C28 100%);
+
+/* Mozilla Firefox */ 
+background-image: -moz-linear-gradient(top, #81BC2E 0%, #659C28 100%);
+
+/* Opera */ 
+background-image: -o-linear-gradient(top, #81BC2E 0%, #659C28 100%);
+
+/* Webkit (Safari/Chrome 10) */ 
+background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #81BC2E), color-stop(1, #659C28));
+
+/* Webkit (Chrome 11+) */ 
+background-image: -webkit-linear-gradient(top, #81BC2E 0%, #659C28 100%);
+
+/* Proposed W3C Markup */ 
+background-image: linear-gradient(top, #81BC2E 0%, #659C28 100%);
+
+-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+-webkit-transition-duration: 0.25s;  
+-webkit-transition-delay: 0s;
+
+-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+-moz-transition-duration: 0.25s;  
+-moz-transition-delay: 0s;
+
+transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+transition-duration: 0.25s;  
+transition-delay: 0s;
+
+}
+
+.button:hover {
+
+-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12 px 24px 2px rgba(124,211,30,1);
+-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px rgba(124,211,30,1);
+box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px rgba(124,211,30,1); 
+
+-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+-webkit-transition-duration: 0.25s;  
+-webkit-transition-delay: 0s;
+
+-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+-moz-transition-duration: 0.25s;  
+-moz-transition-delay: 0s;
+
+transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+transition-duration: 0.25s;  
+transition-delay: 0s;
+
+}
+
+.button:active {
+
+-webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
+-moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2);
+box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0,0,0,0.2), inset 0px 0px 2px 2px rgba(0,0,0,0.2); 
+
+-webkit-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+-webkit-transition-duration: 0.25s;  
+-webkit-transition-delay: 0s;
+
+-moz-transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+-moz-transition-duration: 0.25s;  
+-moz-transition-delay: 0s;
+
+transition-property: -moz-box-shadow, -webkit-box-shadow, box-shadow;  
+transition-duration: 0.25s;  
+transition-delay: 0s;
+
+}
+
+
+
+/*	Column + Row presets
+	------------------	*/
+
+.one-col {width: 68px;}
+.two-col {width: 160px;}
+.three-col {width: 252px;}
+.four-col {width: 344px;}
+.five-col {width: 436px;}
+.six-col {width: 528px;}
+.seven-col {width: 620px;}
+.eight-col {width: 712px;}
+.nine-col {width: 804px;}
+.auto {max-width: 100%;}
+.full {width: 100%;}
+
+.one-col, .two-col, .three-col, .four-col, .five-col, .six-col, .seven-col, .eight-col, .nine-col, .auto, .full img {max-width: 100%;}
+
+.row {clear: both; border-bottom: 1px dotted rgba(175,50,50,0.4); overflow: auto; margin-bottom: 48px; padding-top: 24px;}
+
+.gutter-bottom-24 {margin-bottom: 24px;}
+.gutter-bottom-48 {margin-bottom: 48px;}
+
+.gutter-top-24 {margin-top: 24px;}
+.gutter-left-24 {margin-left: 24px;}
+.gutter-right-24 {margin-right: 24px;}
+
+
+/* Selection colours (easy to forget) */
+
+::selection 	 	{background: rgb(255,255,158);}
+::-moz-selection 	{background: rgb(255,255,158);}
+img::selection 		{background: transparent;}
+img::-moz-selection	{background: transparent;}
+body {-webkit-tap-highlight-color: rgb(255,255,158);}
+
+/*		Default Layout: 992px. 
+		Gutters: 24px.
+		Outer margins: 48px.
+		Leftover space for scrollbars @1024px: 32px.
+-------------------------------------------------------------------------------
+cols    1     2      3      4      5      6      7      8      9      10
+px      68    160    252    344    436    528    620    712    804    896    */
+
+html {
+	border-top: 2px solid white;
+}
+
+
+body {
+	width: 896px;
+	margin: 0px auto;
+	padding: 72px 48px 84px;
+	background: rgb(245,241,232) url('mozorg-gradient.png') repeat-x top center;
+	color: rgb(60,60,60);
+	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
+}
+
+#menu {width: 100%; min-height: 72px; line-height: 72px; text-align: center; margin-bottom: 48px; font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; background-color: white;
+
+-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
+-moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
+box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
+
+}
+.menuItem {display: inline; margin: 0px;}
+#menu a {text-decoration: none; margin: 0px 24px; border-bottom: none;}
+#menu a:hover {color: rgba(0,0,0,0.8);}
+.top {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;}
+
+
+#framework {position: relative;}
+#faux-tabzilla {position: absolute; top: -72px; right: 0px;}
+.style-example {margin-left: 252px; margin-bottom: 48px; min-width: 252px;}
+.style-example img {max-width: 100%;}
+.style-example li {list-style-type: square;}
+.style-example-text {float: left; margin-bottom: 48px; min-width: 252px; min-height: 436px; margin-right: 24px;}
+.style-example-text p {width: 252px;}
+.style-example-text h2 a {border-bottom: none;}
+.css-code {float: left; margin-bottom: 48px; max-width: 160px; margin-right: 24px; line-height: 125%; min-height: 436px;}
+
+
+/*		Tablet Layout: 768px.
+		Gutters: 24px.
+		Outer margins: 28px.
+		Inherits styles from: Default Layout.
+-----------------------------------------------------------------
+cols    1     2      3      4      5      6      7      8
+px      68    160    252    344    436    528    620    712    */
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+	
+	body {
+		width: 712px;
+		padding: 48px 28px 60px;
+	}
+	
+	#faux-tabzilla {top: -48px;}
+	
+}
+
+
+
+/*		Mobile Layout: 320px.
+		Gutters: 24px.
+		Outer margins: 34px.
+		Inherits styles from: Default Layout.
+---------------------------------------------
+cols    1     2      3
+px      68    160    252    */
+
+@media only screen and (max-width: 767px) {
+	
+	body {
+		width: 252px;
+		padding: 48px 34px 60px;
+	}
+	
+.huge {font-size: 64px;}
+.large {font-size: 58px;}
+
+#faux-tabzilla {top: -48px;}
+
+#menu {line-height: 48px;}	
+#menu .menuItem {width: 252px; margin: 0px 24px; padding: 0px;}
+
+.style-example {float: left; margin-bottom: 48px; width: 252px; margin-left: 0px;}
+.style-example li {border-bottom: 1px dotted rgba(0,0,0,0.2); padding: 12px 0px;}
+.style-example-text {float: left; margin-bottom: 48px; width: 252px;}
+.css-code {float: none; max-width: 252px; margin: 0px; margin-bottom: 48px; line-height: 125%; min-height: 0px;}
+	
+}
+
+
+
+/*		Wide Mobile Layout: 480px.
+		Gutters: 24px.
+		Outer margins: 22px.
+		Inherits styles from: Default Layout, Mobile Layout.
+------------------------------------------------------------
+cols    1     2      3      4      5
+px      68    160    252    344    436    */
+
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+	
+	body {
+		width: 436px;
+		padding: 36px 22px 48px;
+	}
+	
+	#faux-tabzilla {top: -36px;}
+	
+}
\ No newline at end of file
diff --git a/ssl-config-generator/index.html b/ssl-config-generator/index.html
new file mode 100644
index 0000000..7154678
--- /dev/null
+++ b/ssl-config-generator/index.html
@@ -0,0 +1,254 @@
+<!doctype html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Generate Mozilla Security Recommended Web Server Configuration Files</title>
+    <link rel="stylesheet" type="text/css" media="all" href="../css/screen.css" />
+    <style>
+        div#server-config-text pre {
+            background-color: #F7F7F7;
+            border-radius: 3px;
+            padding: 2em;
+        }
+        label {
+            font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+            font-weight: normal;
+            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75);
+        }
+        .message {
+            font-size: 150%;
+        }
+    </style>
+
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.min.js"></script>
+    <script>
+        // https://gist.github.com/cowboy/566233
+        var isSemVer=(function(){var a=/^(<|>|[=!<>]=)?\s*(\d+(?:\.\d+){0,2})([a-z][a-z0-9\-]*)?$/i;function b(e,c){var d=(e+"").match(a);return d?(c?(d[1]||"=="):"")+'"'+(d[2]+".0.0").match(/\d+(?:\.\d+){0,2}/)[0].replace(/(?:^|\.)(\d+)/g,function(g,f){return Array(9-f.length).join(0)+f})+(d[3]||"~")+'"':(c?"==0":1)}return function(e){e=b(e);for(var c,d=1;c=arguments[d++];){if(!(new Function("return "+e+b(c,1)))()){return false}}return true}})();
+    </script>
+
+    <script id="nginx-template" type="text/x-handlebars-template">
+<h1>Server : {{server}} {{serverVersion}} | {{securityProfile}} profile</h1>
+Openssl : {{opensslVersion}}<br />
+<pre>
+server {
+    listen 443;
+    ssl on;
+
+    # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
+    ssl_certificate /path/to/signed_cert_plus_intermediates;
+    ssl_certificate_key /path/to/private_key;
+    ssl_session_timeout 5m;
+    ssl_session_cache shared:SSL:50m;
+{{dhparam}}
+
+    # {{securityProfile}} configuration. tweak to your needs.
+    ssl_protocols {{sslProtocols}};
+    ssl_ciphers '{{cipherSuites}}';
+    ssl_prefer_server_ciphers on;
+ 
+{{hsts}}
+{{ocspstapling}}
+
+    resolver &lt;IP DNS resolver&gt;;
+ 
+    ....
+}
+</pre>
+    </script>
+
+    <script id="apache-template" type="text/x-handlebars-template">
+<h1>Server : {{server}} {{serverVersion}} | {{securityProfile}} profile</h1>
+Openssl : {{opensslVersion}}<br />
+<pre>
+&lt;VirtualHost *:443&gt;
+    ...
+    SSLEngine on
+    SSLCertificateFile      /path/to/signed_certificate
+    SSLCertificateChainFile /path/to/intermediate_certificate
+    SSLCertificateKeyFile   /path/to/private/key
+    SSLCACertificateFile    /path/to/all_ca_certs
+
+    # {{securityProfile}} configuration, tweak to your needs
+    SSLProtocol             {{sslProtocols}}
+    SSLCipherSuite          {{cipherSuites}}
+    SSLHonorCipherOrder     on
+{{compression}}
+{{ocspStapling}}
+{{hsts}}
+    ...
+&lt;/VirtualHost&gt;
+</pre>
+</script>
+
+<script id="haproxy-template" type="text/x-handlebars-template">
+<h1>Server : {{server}} {{serverVersion}} | {{securityProfile}} profile</h1>
+Openssl : {{opensslVersion}}<br />
+<span class="message">{{message}}</span>
+<pre style="visibility: {{visibility}};">
+global
+    # set default parameters to the {{securityProfile}} configuration
+    tune.ssl.default-dh-param 2048
+    ssl-default-bind-ciphers {{cipherSuites}}
+
+frontend ft_test
+    mode    http
+    bind    0.0.0.0:443 {{sslProtocols}} crt /path/to/&lt;cert+privkey+intermediate+dhparam&gt;
+{{hsts}}
+</pre>
+    </script>
+
+    <script>
+        var cipherSuites = {
+            modern: 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!3DES:!MD5:!PSK',
+            intermediate: 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA',
+            old: 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:ECDHE-RSA-DES-CBC3-SHA:ECDHE-ECDSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA:AES256-SHA:AES:DES-CBC3-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA'
+        };
+        var sslProtocols = {
+            modern: {
+                apache: 'all -SSLv2 -SSLv3 -TLSv1',
+                nginx: 'TLSv1.1 TLSv1.2',
+                haproxy: 'ssl no-sslv3 no-tlsv10'
+            },
+            intermediate: {
+                apache: 'all -SSLv2 -SSLv3',
+                nginx: 'TLSv1 TLSv1.1 TLSv1.2',
+                haproxy: 'ssl no-sslv3'
+            },
+            old: {
+                apache: 'all -SSLv2',
+                nginx: 'SSLv3 TLSv1 TLSv1.1 TLSv1.2',
+                haproxy: 'ssl'
+            }
+        };
+
+        function getVersionConstrainedDirectives(data) {
+            switch (data.server) {
+                case "nginx":
+                    // http://nginx.org/en/docs/http/ngx_http_core_module.html
+                    if (isSemVer(data.serverVersion, ">=0.7.2")) {
+                        data.dhparam = '\n    # Diffie-Hellman parameter for DHE ciphersuites, recommended 2048 bits' + '\n' +
+                            '    ssl_dhparam /path/to/dhparam.pem;'
+                    }
+                    if (isSemVer(data.serverVersion, ">=1.3.7")) {
+                        data.ocspstapling = '\n    # OCSP Stapling ---' + '\n' +
+                            '    # fetch OCSP records from URL in ssl_certificate and cache them' + '\n' +
+                            '    ssl_stapling on;' + '\n' +
+                            '    ssl_stapling_verify on;' + '\n'
+                    }
+                    if (data.hstsEnabled == "true") {
+                        data.hsts = '    # HSTS' + '\n' +
+                            '    add_header Strict-Transport-Security max-age=15768000;'
+                    }
+                    break;
+                case "apache":
+                    // http://httpd.apache.org/docs/current/mod/mod_ssl.html
+                    data.compression = isSemVer(data.serverVersion, ">=2.4.3") ? '    SSLCompression          off' : ''
+                    if (isSemVer(data.opensslVersion, ">=0.9.8h") && isSemVer(data.serverVersion, '>=2.3.3')) {
+                        data.ocspStapling = '\n    # OCSP Stapling, only in httpd 2.3.3 and later' + '\n' +
+                            '    SSLUseStapling          on' + '\n' +
+                            '    SSLStaplingResponderTimeout 5' + '\n' +
+                            '    SSLStaplingReturnResponderErrors off' + '\n' +
+                            '    SSLStaplingCache        shmcb:/var/run/ocsp(128000)' + '\n' +
+                            '\n' +
+                            '    ## verify chain of trust of OCSP response using Root CA and Intermediate certs' + '\n' +
+                            '    ssl_trusted_certificate /path/to/root_CA_cert_plus_intermediates;'
+                    }
+                    if (data.hstsEnabled == "true") {
+                        data.hsts = '    # HSTS' + '\n' +
+                            '    Header add Strict-Transport-Security "max-age=15768000"'
+                    }
+                    break;
+                case "haproxy":
+                    // http://www.haproxy.org/download/1.5/doc/configuration.txt
+                    if (data.hstsEnabled == "true") {
+                        data.hsts = '    # HSTS' + '\n' +
+                            '    rspadd  Strict-Transport-Security:\ max-age=15768000'
+                    }
+                    if (isSemVer(data.serverVersion, "<1.5")) {
+                        data.visibility = 'hidden';
+                        data.message = "HAProxy version " + data.serverVersion + " doesn't support SSL";
+                    }
+                    break;
+            }
+            return data;
+        }
+
+        $(document).ready(function() {
+            function renderConfig() {
+                var data = {
+                    serverVersion: $("#server-version").val(),
+                    opensslVersion: $("#openssl-version").val(),
+                    hstsEnabled: $("input#hsts-enabled:checkbox:checked").val(),
+                    server: $("div#server-list input:radio:checked").val(),
+                    securityProfile: $("div#security-profile-list input:radio:checked").val()
+                }
+                var source = $("#" + data.server + "-template").html();
+                var template = Handlebars.compile(source);
+                data.visibility = "visible"; 
+                jQuery.extend(data, getVersionConstrainedDirectives(data))
+                jQuery.extend(data, {
+                    sslProtocols: sslProtocols[data.securityProfile][data.server],
+                    cipherSuites: cipherSuites[data.securityProfile]
+                });
+                $("#server-config-text").html(template(data));
+            }
+            $("ul#security-profile-list li button").click(function() {
+                securityProfile = $(this).text();
+                renderConfig();
+            });
+            $("input").change(function() {
+                renderConfig();
+            });
+            renderConfig();
+        });
+    </script>
+
+</head>
+
+<body>
+    <div style="width 100px; float:left; padding:1em;">
+        <div id="server-list">
+            <input type="radio" name="server" id="apache" value="apache" checked="true">
+            <label for="apache">Apache</label>
+            <br />
+            <input type="radio" name="server" id="nginx" value="nginx">
+            <label for="nginx">Nginx</label>
+            <br />
+            <input type="radio" name="server" id="haproxy" value="haproxy">
+            <label for="haproxy">HAProxy</label>
+            <br />
+        </div>
+    </div>
+    <div style="width 100px; float:left; padding:1em;">
+
+        <div id="security-profile-list">
+            <input type="radio" name="security-profile" id="modern" value="modern" checked="true">
+            <label for="modern">modern</label>
+            <br />
+            <input type="radio" name="security-profile" id="intermediate" value="intermediate">
+            <label for="intermediate">intermediate</label>
+            <br />
+            <input type="radio" name="security-profile" id="old" value="old">
+            <label for="old">old</label>
+            <br />
+        </div>
+    </div>
+    <div style="width 100px; float:left; padding:1em;">
+        <label for="server-version">Server Version</label>
+        <input id="server-version" type="text" maxlength="15" value="1.0" />
+        <br />
+        <label for="openssl-version">OpenSSL Version</label>
+        <input id="openssl-version" type="text" maxlength="15" value="0.9.8h" />
+        <br />
+        <label for="hsts-enabled">HSTS Enabled</label>
+        <input id="hsts-enabled" type="checkbox" value="true" checked="true" />
+    </div>
+    <div style="clear:both;"></div>
+    <div id="server-config-text"></div>
+
+
+</body>
+
+</html>