A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. title: Never see localhost HTTPS warnings again
  2. url: https://certsimple.com/blog/localhost-ssl-fix
  3. hash_url: 63e224124ceedf8c6e787bbbc7896165
  4. <p>If you've done any web development you'll be used to seeing this every time you connect to <code>https://localhost</code>:</p>
  5. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/untrusted-localhost.png"/></p>
  6. <p>Unless your OS has already been hacked - at which point it's already too late, since the attacker could have already installed anything they wanted - <code>localhost</code> is likely to still be yourself and not an attacker as the message suggests.</p>
  7. <p>If you're tired of seeing the warning, and the two clicks required to show localhost over HTTPS, you can make your machine trust itself. It takes <strong>less than ten minutes</strong>, there's only one command, and you'll never see localhost SSL warnings again.</p>
  8. <h2 id="step-1-create-a-self-signed-root-certificate">Step 1. Create a self-signed root certificate</h2>
  9. <p>Start 'Applications' &gt; 'Utilities' &gt; 'Keychain Access'</p>
  10. <p>Inside KeyChain access, in the menu bar, click 'Keychain Access' &gt; 'Certificate Assistant' &gt; 'Create a Certificate'</p>
  11. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/create-a-certificate.png"/></p>
  12. <p>On the 'Create a Certificate' screen:</p>
  13. <ul>
  14. <li>Change 'Name' to 'localhost'</li>
  15. <li>Leave 'Identity Type' as 'Self Signed Root'</li>
  16. <li>Change 'Certificate Type' to 'SSL Server'</li>
  17. </ul>
  18. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/create-your-certificate.png"/></p>
  19. <p>Then hit 'Create'. OS X will tell you that a self signed certificate doesn't provide the security guarantee of a certificate assigned by a CA, which is true: <a href="/blog/domain-validated-ssl">encryption has very little value without identity.</a>. However your self signed certificate is only for your local machine, and not for anyone else to trust.</p>
  20. <p>Hit 'Continue' to indicate you understand.</p>
  21. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/self-signed-certificates-are-worthless.png"/></p>
  22. <p>The new certificate will be shown. Click 'Done'</p>
  23. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/successfully-created.png"/></p>
  24. <h2 id="step-2-trust-the-new-root-certificate">Step 2. Trust the new root certificate</h2>
  25. <p>You'll be back in Keychain's list of certificates. Click the certificate you just made - it will have a gold certificate icon beside it. Search for 'localhost' if you can't see it.</p>
  26. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/keychain-list-of-certificates.png"/></p>
  27. <p>Expand 'Trust'. Change 'Secure Sockets Layer (SSL)' to 'Always Trust'</p>
  28. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/trust-new-certificate.png"/></p>
  29. <p>Enter your password when asked to make the change.</p>
  30. <h2 id="step-3-use-the-key-in-your-apps">Step 3. Use the key in your apps</h2>
  31. <p>Now you'll need to set up the private key and certificate for use in your development web server. Most openssl apps (like nginx, node, etc) typically use <code>pem</code> format keys, so we're going to export the key and change the key format into .pem.</p>
  32. <p>Back in the list of certificates, find the private key for localhost (it will have a key icon next to it).</p>
  33. <p>Right click the private key and export it. Select a folder, and change file format to be 'Personal Information Exchange (.p12)'. Hit 'Save'. You'll be asked to create a password to encrypt the file: you can enter one or you can just hit OK to skip. Then you'll be asked for your own password again to allow the extraction.</p>
  34. <p><amp-img layout="responsive" alt="an image" src="/images/blog/localhost-ssl-fix/export-localhost.png"/></p>
  35. <p>Now let's change it into a PEM file. Open Terminal, then run:</p>
  36. <pre><code class="hljs">openssl pkcs12 -<span class="hljs-keyword">in</span> Certificates.p12 -out Certificates.pem -nodes
  37. </code></pre><p>You'll be asked what the password is, just press enter since you didn't set the password:</p>
  38. <pre><code class="hljs">Enter Import Password:
  39. MAC verified OK
  40. </code></pre><p>This creates <code>Certificates.pem</code>, a single file with both the private key and the certificate inside.</p>
  41. <p>Since most web servers prefer seperate files, you can separate <code>Certificates.pem</code> file into separate files. I like to make a <code>~/.localhost-ssl</code> directory to put the files into, so everyone working on a project can use their own keys. Eg, put:</p>
  42. <pre><code class="hljs">-----BEGIN CERTIFICATE-----
  43. certificateGoesHere
  44. -----END CERTIFICATE-----
  45. </code></pre><p>into <code>~/.localhost-ssl/cert.pem</code>.</p>
  46. <p>Then put:</p>
  47. <pre><code class="hljs">-----BEGIN RSA PRIVATE KEY-----
  48. privateKeyGoesHere
  49. -----END RSA PRIVATE KEY-----
  50. </code></pre><p>into <code>~/.localhost-ssl/key.pem</code>.</p>
  51. <p>Now make your web server use <code>cert.pem</code> for the certificate and <code>key.pem</code> for the private key and when running on localhost - this is up to your individual web server.</p>
  52. <p>Et voila! No more localhost warnings!</p>
  53. <h2 id="bonus-quick-command-line-https-server">Bonus: quick command line HTTPS server</h2>
  54. <p>Sometimes you need a quick command line web server to share out a folder for a quick proof of concept. You can use your key and cert files to make a trusted HTTPS server too.</p>
  55. <p>Install <a href="https://nodejs.org/en/download/">node</a> if you haven't already, and grab the <a href="https://www.npmjs.com/package/http-server"><code>http-server</code></a> module:</p>
  56. <pre><code class="hljs">sudo npm install -g http-server
  57. </code></pre><p>You can then then start and HTTPS server with:</p>
  58. <pre><code class="hljs">http-server --ssl --cert /path/to/cert.pem --key /path/to/key.pem
  59. </code></pre><p>This will share out your currently directory on <code>https://localhost:8080</code></p>
  60. <p>Since that's an awful lot of typing, add this to your <code>.bash_profile</code></p>
  61. <pre><code class="hljs"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">https</span>-<span class="hljs-title">server</span> (<span class="hljs-params"/>) </span>{
  62. http-server --ssl --cert ~<span class="hljs-regexp">/.localhost-ssl/</span>localhost-ssl/cert.pem --key ~<span class="hljs-regexp">/.localhost-ssl/</span>key.pem
  63. }
  64. </code></pre><p>You can then simply type <code>https-server</code> to share out the current directory over HTTPS.</p>