{"id":9659,"date":"2022-11-21T17:43:06","date_gmt":"2022-11-21T17:43:06","guid":{"rendered":"https:\/\/stevepedwards.today\/DebianAdmin\/?p=9525"},"modified":"2023-10-29T02:25:57","modified_gmt":"2023-10-29T02:25:57","slug":"vs-code-live-server-ssl-settings","status":"publish","type":"post","link":"https:\/\/stevepedwards.today\/DebianAdmin\/vs-code-live-server-ssl-settings\/","title":{"rendered":"VS Code Live Server SSL Settings"},"content":{"rendered":"
<\/div>\n

<\/path><\/svg><\/i> \"Loading\"<\/p>\n

<\/div>\n

First you need to set up an SSL certificate for your VS code PC to mimic a Cert Authority locally, so on my Win11 laptop I have installed WSL Ubuntu so openssl can be run to use linux commands for the following cert setup. It doesn't matter what nonsense values you put in the certificate fields, as it's not a real certificate - except for the pass phrase you use that openssl will generate the encrypted keys.<\/p>\n

WSL for windows can be installed from Powershell if you prefer linux.<\/p>\n

\"\"<\/a><\/p>\n

I have opened a WSL terminal in VS Code in my Source Control projects folder. I will create the cert files\/keys here also.<\/p>\n

If you are not linux comfortable then DL openssl for windows from the web and learn how to use it that way...can't help you there right now.<\/p>\n

step 1: Install openssl\/create public key:<\/p>\n

stevee@laptop:\/mnt\/c\/MyShare\/SourceControl$ sudo apt install openssl<\/span><\/p>\n

1. create a private key
\nopenssl genrsa -aes256 -out localhost.key 2048<\/span>
\n\/\/ you will be prompted to provide a password
\n\/\/this will create localhost.key (call it whatever you like)
\nEnter PEM pass phrase:<\/span>
\nVerifying - Enter PEM pass phrase:<\/span><\/p>\n

stevee@localhost:~$ ls -l\u00a0<\/span>
\n-rwxrwxrwx 1 stevee stevee 1766 Nov 21 18:14 localhost.key<\/span><\/p>\n

Step 2: make Certificate Signing Request (CSR)<\/p>\n

stevee@localhost:~$ openssl req -new -key localhost.key -out localhost.csr<\/span>
\nEnter pass phrase for server.key:<\/span>
\nYou are about to be asked to enter information that will be incorporated
\ninto your certificate request.
\nWhat you are about to enter is what is called a Distinguished Name or a DN.
\nThere are quite a few fields but you can leave some blank
\nFor some fields there will be a default value,
\nIf you enter '.', the field will be left blank.
\n-----
\nCountry Name (2 letter code) [AU]:UK<\/span>
\nState or Province Name (full name) [Some-State]:cornwall<\/span>
\nLocality Name (eg, city) []:redruth<\/span>
\nOrganization Name (eg, company) [Internet Widgits Pty Ltd]:localhost<\/span>
\nOrganizational Unit Name (eg, section) []:localhost<\/span>
\nCommon Name (e.g. server FQDN or YOUR name) []:localhost<\/span>
\nEmail Address []:<\/span><\/p>\n

Please enter the following 'extra' attributes<\/span>
\nto be sent with your certificate request<\/span>
\nA challenge password []: xxx<\/span><\/p>\n

In VS Code\u00a0 install the Live Server Extension by Ritwick Dey:<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

To add the user.JSON code for the SSL settings, go to File\/Preferences\/Settings and click the tiny, top right \"open settings\" icon:<\/p>\n

\"\"<\/a><\/p>\n

Paste this code from the Live server docs site:<\/p>\n

https:\/\/github.com\/ritwickdey\/vscode-live-server\/blob\/master\/docs\/settings.md<\/a><\/p>\n

Amend to suit your folders where you placed your keys:<\/p>\n

{\r\n  \"liveServer.settings.root\" : \"\/\",\r\n  \"liveServer.settings.port\" : 5501,\r\n    \"liveServer.settings.http\": {\r\n      \"enable\": true,\r\n      \"cert\": \"C:\\MyShare\\SourceControl\\localhost.pem\",\r\n      \"key\": \"C:\\MyShare\\SourceControl\\localhost.key\",<\/span>\r\n      \"passphrase\": \"urpasswd\"\r\n    }\r\n  }<\/pre>\n
 <\/p>\n
Close the Live Server if running.<\/p>\n
Now open a project index.html file by right click, and open live server again.<\/p>\n
You should see a browser warning as the cert is not real and not verified by an online Certificate Authority obviously, but click Advanced and proceed to site and traffic WILL be encrypted and you VS Code projects emulating being served from an real http server. Note the new port number 5501.<\/p>\n
\"\"<\/a><\/p>\n
If you r click the Not Secure you can see the invalid certificate:<\/p>\n
\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
<\/path><\/svg><\/i> \"Loading\"<\/p>\n
<\/div>\n
First you need to set up an SSL certificate for your VS code PC to mimic a Cert Authority locally, so on my Win11 laptop I have installed WSL Ubuntu so openssl can be run to use linux commands for the following cert setup. It doesn't matter what nonsense values you put in the certificate ...\u00a0 VS Code Live Server SSL Settings<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-9659","post","type-post","status-publish","format-standard","hentry","category-post"],"a3_pvc":{"activated":true,"total_views":9,"today_views":0},"_links":{"self":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/comments?post=9659"}],"version-history":[{"count":3,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9659\/revisions"}],"predecessor-version":[{"id":10094,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/posts\/9659\/revisions\/10094"}],"wp:attachment":[{"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/media?parent=9659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/categories?post=9659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepedwards.today\/DebianAdmin\/wp-json\/wp\/v2\/tags?post=9659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}