Files
nip/document_root/index.html
2015-08-29 13:44:01 -07:00

171 lines
6.8 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must*
come first in the head; any other head content must come *after* these tags -->
<title>Welcome to sslip.io</title>
<meta name="description" content="sslip.io">
<meta name="author" content="Brian Cunnie">
<!-- cute Green Lock icon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
<!-- Latest
compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/starter-template.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via
file:// -->
<!--[if lt IE 9]> <script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle
collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation
</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="/">sslip.io</a> </div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>sslip.io</h1>
<h3>Turn your red lock into a green lock!</h3>
<br />
<div class="col-sm-5">
<img src="img/red_lock.png" height="71" />
</div>
<div class="col-sm-1">
<p></p>
</div>
<div class="col-sm-5">
<img src="img/green_lock.png" height="71" />
</div>
<div class="col-sm-1"></div>
<div class="row"></div>
<h3>What is it?</h3>
<p><b>sslip.io</b> is a special DNS domain that maps crafted hostnames
to IP addresses (e.g. <i>192-168-0-1.sslip.io</i> resolves to <i>192.168.0.1</i>).
Combined with a valid sslip.io wildcard SSL certificate installed on your server, it allows
your server to present a valid SSL certificate when browsed to using the
crafted sslip.io hostname. It works for your webserver, your docker registry, etc....
All in a matter of seconds.</p>
<h3>How do I use it?
</h3>
<p class="lead">First, find your server's IP address to determine its sslip.io hostname</p>
<p>Your server's sslip.io hostname is a mash-up of your server's IP address and the <b>sslip.io</b> domain. Here are some examples:</p>
<table class="sslip">
<tr>
<th>Server's IP Address</th>
<th>sslip.io Hostname</th>
</tr>
<tr>
<td>52.0.56.137</td>
<td><a href="https://52-0-56-137.sslip.io/">52-0-56-137.sslip.io</a></td>
</tr>
<tr>
<td>127.0.0.1</td>
<td>127-0-0-1.sslip.io</td>
</tr>
<tr>
<td>10.1.1.2</td>
<td>www-10-1-1-2.sslip.io</td>
</tr>
<tr>
<td>172.16.0.1</td>
<td>console-172-16-0-1.sslip.io</td>
</tr>
</table>
<br />
<p style="font-style: italic;">Note that in the last two examples we prepended additional information to the hostname, i.e. "www-" and "console-", respectively. This allows sslip.io to work with <a href="https://en.wikipedia.org/wiki/Virtual_hosting#Name-based">name-based
virtual hosting</a>.</p>
<p class="lead">Second, download sslip.io's SSL certificate and key from GitHub</p>
<p>Download the SSL key (<a href="https://raw.githubusercontent.com/cunnie/sslip.io/master/ssl/sslip.io.key.pem">sslip.io.key.pem</a>) and wildcard SSL certificate chain (<a href="https://raw.githubusercontent.com/cunnie/sslip.io/master/ssl/sslip.io.chained.crt.pem">sslip.io.chained.crt.pem</a>)
from GitHub. You may use <i>curl</i> if you prefer the command line:</p>
<pre>
curl -OL https://raw.githubusercontent.com/cunnie/sslip.io/master/ssl/sslip.io.key.pem
curl -OL https://raw.githubusercontent.com/cunnie/sslip.io/master/ssl/sslip.io.chained.crt.pem
</pre>
<p class="lead">Third, configure the webserver with your sslip.io hostname, SSL certificate, and SSL key</p>
<p>Configure your webserver. Set the server name to sslip.io hostname, and configure the SSL portion to use the key and certificate downloaded from GitHub. Here is a sample from sslip.io's webserver's <i>nginx.conf</i> (modified for clarity):</p>
<pre>
server {
server_name 52-0-56-137.sslip.io;
listen 443 ssl;
ssl_certificate /etc/ssl/sslip.io.chained.crt.pem;
ssl_certificate_key /etc/ssl/sslip.io.key.pem;
</pre>
<p class="lead">Finally, restart your webserver and browse to its sslip.io address via HTTPS</p>
<p>Admire the beautiful green lock in your browser's address bar.<p>
<div class="row">
<p></p>
</div>
<p>&copy; 2015 Brian Cunnie, Pivotal Software</p>
</div>
</div>
<!-- /.container -->
<!-- Bootstrap core JavaScript ================================================== -->
<!--
Placed at the end of the document so the pages load faster -->
<!-- jQuery
(necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--
Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--
IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://raw.githubusercontent.com/twbs/bootstrap/master/docs/assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-43107212-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>