mirror of
https://github.com/cunnie/sslip.io.git
synced 2025-10-05 23:56:50 +08:00
161 lines
6.2 KiB
HTML
161 lines
6.2 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">
|
|
<!-- 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 />
|
|
</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 (sslip.io) that maps crafted hostnames to IP addresses (e.g. <i>192-168-0-1.sslip.io</i> maps to IP address <i>192.168.0.1</i>). Combined with a valid wildcard SSL certificate, it provides trusted SSL connections
|
|
to your webserver, your docker registry, etc.... All in a matter of seconds.</p>
|
|
<h3>How do I use it?
|
|
</h3>
|
|
<p class="lead">First, use your server's IP address to determine its sslip.io hostname.</p>
|
|
<p>Your server's sslip.io 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>192.168.0.1</td>
|
|
<td>console-192-168-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://gist.githubusercontent.com/cunnie/b8e12cd45a8777cffc4e/raw/dc167a6cc1dca5a80943723c9434bef859b79176/sslip.io.key.pem">sslip.io.key.pem</a>) and wildcard SSL certificate chain (<a href="https://gist.githubusercontent.com/cunnie/b8e12cd45a8777cffc4e/raw/dc167a6cc1dca5a80943723c9434bef859b79176/sslip.io.chained.crt.pem">sslip.io.chained.crt.pem</a>)
|
|
from GitHub.</p>
|
|
<p class="lead">Third, configure 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>
|
|
<div class="row">
|
|
<p />
|
|
</div>
|
|
<div class="row">© 2015 Brian Cunnie, Pivotal Software</div>
|
|
</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>
|