Code Monkey home page Code Monkey logo

dev-certificates's Introduction

Create development certificates the easy way!

If you're a web developer and need to test your websites locally on HTTPs, you probably don't want to buy an SSL certificate for this.

Instead, you want to generate your own certificates! ๐Ÿ’ช

However, working with the openssl CLI can be intimidating. Options are hard to remember. So I've put together these scripts and instructions to make my life, and yours, easier!

Download

Right click below, Save Link As...:

Generate your own Certificate Authority

The Certificate Authority is what will make your browser trust the certificates that you'll generate for your development domains. Your browser is bundled with a list of Certificate Autorities that it trusts by default, but because you'll be signing your certificates yourself, you need to instruct it to trust your own certificates.

Just run:

create-ca.sh 

create-ca.sh

You only need to perform this step once.

Generate a certificate for your domain

To generate a certificate for example.dev and its subdomains, run:

create-certificate.sh example.dev

create-certificate.sh

You can now install the .key and .crt files in your web server, such as Apache or Nginx.

Repeat this step if you need certificates for other domain names.

Import the CA in your browser

You only need to perform this step once for each browser, whatever the number of certificates you'll generate.

Edge & Chrome on Windows 10

  • open certmgr.msc
  • expand "Trusted Root Certification Authorities"
  • right-click on "Certificates", then "All Tasks" > "Import..."
  • click "Next"
  • choose the ca.crt file
  • click "Next" then "Finish"

Chrome on Linux

  • go to chrome://settings/certificates
  • click the "Authorities" tab
  • click "Import"
  • select the ca.crt file
  • check "Trust this certificate for identifying websites"
  • click "OK"

Firefox on Windows & Linux

  • go to about:preferences#privacy
  • scroll down to "Certificates"
  • click "View Certificates..."
  • click "Import..."
  • select the ca.crt file
  • check "Trust this CA to identify websites"
  • click "OK"

Safari on macOS

No instructions yet. Pull request welcome!

Safari, Chrome & Firefox on iOS

  • Download your certificate:
    • host your ca.crt certificate file somewhere on the web (I use gist.github.com)
    • open the URL to the certificate in your mobile browser (I generate a QR code to the raw gist URL)
    • You should be asked "This website is trying to download a configuration profile. Do you want to allow this?", tap "Allow"
  • Install the certificate:
    • Open the Settings app
    • Underneath your name, tap "Profile Downloaded"
    • In the top right corner, tap "Install"
    • Enter your passcode
    • In the warning page that opens, tap "Install" again
  • Enable the certificate for websites:
    • Go back to Settings > General > About > Certificate Trust Settings
    • In the "Enable Full Trust for Root Certificates" section, enable the certificate you just installed
    • In the warning that opens, click "Continue"

That's it!

You should now be greeted with:

Chrome Secure

If you need to create certificates for other domains, just run create-certificate.sh again. No need to create or import the CA again!

Enjoy! ๐Ÿ‘‹

Credits

These scripts have been created from the steps highlighted in this StackOverflow answer by @entrity.

Icons by Pixel perfect.

dev-certificates's People

Contributors

benmorel avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.