{"id":4328,"date":"2022-06-26T15:02:57","date_gmt":"2022-06-26T13:02:57","guid":{"rendered":"https:\/\/oelna.de\/blog\/?p=4328"},"modified":"2022-06-26T15:58:57","modified_gmt":"2022-06-26T13:58:57","slug":"set-up-a-simpleish-http-2-webserver-on-macos","status":"publish","type":"post","link":"https:\/\/oelna.de\/blog\/4328","title":{"rendered":"Set up a simple(ish) HTTP\/2 webserver on macOS"},"content":{"rendered":"\n

There have been moments where having HTTP\/2 on localhost would have been handy. Over the years I have tried a few things and recently I found a way I liked. I tend to dislike having to install too many things, but for this, it seems impossible to avoid. My instructions are based on macOS Catalina (10.15) (for Safari<\/strong>), but should work for previous versions and future versions as well.<\/p>\n\n\n\n

My steps were:<\/p>\n\n\n\n

From the Terminal app, generate a self-signed certificate to use for SSL. (maybe change to the directory you’d like to store the certs in first?, in my case “\/Users\/oelna\/.certificates”)<\/p>\n\n\n\n

openssl req -x509 -nodes -newkey rsa:2048 -keyout key.pem -out cert.pem<\/code><\/pre>\n\n\n\n
This will create two .pem files (without setting a password for the key, which I found invaluable on a local machine, since I don’t want to enter a password every time I start the server.)<\/p>\n\n\n\n
During creation I chose to put in some reasonable values for country name, organization name and common name (“localhost.”).<\/p>\n\n\n\n
I tried to figure out a way to do this with the Python built-in HTTP server, but couldn’t, so I begrudgingly installed twisted for Python 3.<\/p>\n\n\n\n
pip3 install twisted<\/code><\/pre>\n\n\n\n
Depending on where you saved the .pem files generated earlier, you may have to adjust the paths for them in the following start command for twisted:<\/p>\n\n\n\n
twistd -n web --path=. -c \/Users\/oelna\/.certificates\/cert.pem -k \/Users\/oelna\/.certificates\/key.pem --https=4433<\/code><\/pre>\n\n\n\n
The parameters are pretty self-explanatory: -c is the certificate location, -k is the key file location, –https is the port the server will listen on, and –path is your website root (Most of the time I run the command from the directory the files are in, so I just put . there (=current directory)<\/p>\n\n\n\n
Twisted should start up and if it doesn’t fail, your site is ready for you at https:\/\/localhost:4433<\/strong><\/p>\n\n\n\n
Safari will complain, when you load the page, but you can click your way through.<\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
Chrome is a completely different beast, though, and I have needed to make a few changes to how the certificates are created.<\/p>\n\n\n\n
Chrome<\/strong>
The instructions above worked well for me, but for Chrome I needed to go about it a little differently (sadly, more complicated). For this I used the instructions on Stackoverflow<\/a>.<\/p>\n\n\n\n
You need to become your own CA (“certificate authority”) and trust it on your machine. This fake CA will issue a certificate for localhost (which has to include something called subjectAltName<\/strong>). The resulting certificate for localhost also needs to be imported to Keychain and trusted for use with SSL. Let’s do it!<\/p>\n\n\n\n
# generate the CA key and cert\nopenssl genrsa -des3 -out myCA.key 2048\nopenssl req -x509 -new -nodes -key myCA.key -sha256 -days 825 -out myCA.pem<\/code><\/pre>\n\n\n\n
Prepare this localhost.ext<\/strong> file beforehand:<\/p>\n\n\n\n
authorityKeyIdentifier=keyid,issuer\nbasicConstraints=CA:FALSE\nextendedKeyUsage=serverAuth,clientAuth\nkeyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment\nsubjectAltName = @alt_names\n[alt_names]\nDNS.1 = localhost\nIP.1 = 127.0.0.1<\/code><\/pre>\n\n\n\n
Next, generate a key and certificate signing request for localhost. (I think I read that when asked for the “common name” for the cert, you should put a period at the end, to make it a fully-qualified domain name (FQDN), like so: “localhost.”). It worked for me.
The “days” parameter can’t be larger than 825 on macOS, so that’s what I put.<\/p>\n\n\n\n
openssl genrsa -out localhost.key 2048\nopenssl req -new -key localhost.key -out localhost.csr\nopenssl x509 -req -in localhost.csr -CA myCA.pem -CAkey myCA.key -CAcreateserial -out localhost.crt -days 825 -sha256 -extfile localhost.ext<\/code><\/pre>\n\n\n\n
Import myCA.pem<\/strong> and localhost.crt<\/strong> into macOS Keychain Access.app<\/strong>
“Get Info” on both of them and trust them with “Always Trust”.<\/p>\n\n\n\n
 If ever you need a .pem file of the cert, just concat the .crt and .key like so:<\/p>\n\n\n\n
cat localhost.crt localhost.key > localhost.pem<\/code><\/pre>\n\n\n\n
With these newly created and trusted certificates you can finally run Twisted again. Chrome will complain, but this time, you’ll be able to click through!<\/p>\n\n\n\n
twistd -n web --path=. -c \/Users\/oelna\/.certificates\/localhost.crt -k \/Users\/oelna\/.certificates\/localhost.key --https=4433<\/code><\/pre>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
There have been moments where having HTTP\/2 on localhost would have been handy. Over the years I have tried a few things and recently I found a way I liked. I tend to dislike having to install too many things, but for this, it seems impossible to avoid. My instructions are based on macOS Catalina […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[3,1],"tags":[],"class_list":["post-4328","post","type-post","status-publish","format-standard","hentry","category-english","category-general"],"_links":{"self":[{"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/posts\/4328","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/comments?post=4328"}],"version-history":[{"count":6,"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/posts\/4328\/revisions"}],"predecessor-version":[{"id":4339,"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/posts\/4328\/revisions\/4339"}],"wp:attachment":[{"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/media?parent=4328"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/categories?post=4328"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oelna.de\/blog\/wp-json\/wp\/v2\/tags?post=4328"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}