A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

4 anos atrás
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>