From 2887f6d378c580888b6dc62e6e59439545f25c54 Mon Sep 17 00:00:00 2001 From: Jan Dittberner Date: Fri, 19 May 2023 19:30:30 +0200 Subject: [PATCH] Implement a client only solution This commit contains a client only (aka semi-manual) solution for creating client certificate key stores with a modern web browser. --- README.md | 107 +++------ src/index.html | 592 ++++++++++++++++++++++++++++++++++--------------- 2 files changed, 443 insertions(+), 256 deletions(-) diff --git a/README.md b/README.md index e3b14b1..fc81048 100644 --- a/README.md +++ b/README.md @@ -1,102 +1,51 @@ -# Browser PKCS#10 CSR generation PoC +# Browser based client certificate creation -This repository contains a small proof of concept implementation of browser -based PKCS#10 certificate signing request and PKCS#12 key store generation -using [node-forge](https://github.com/digitalbazaar/forge). +This repository contains an implementation to create a client certificate key store in a modern Web browser. -The backend is implemented in [Go](https://golang.org/) and utilizes openssl -for the signing operations. The instructions below have been tested on Debian -11 (Bullseye). Debian 10 works when you use a manual installation of Go. +The implementation uses the excellent [node-forge](https://github.com/digitalbazaar/forge) library. + +[Bootstrap 5](https://getbootstrap.com/docs/5.2/) is used for styling the user interface. + +This is meant as a replacement for the `` tag that has been removed from browsers. + +The following steps have been implemented: + +- choose a common name for the subject of the certificate signing request +- generate an RSA key pair with a selectable size +- generate a certificate signing request (PKCS#10 CSR) +- paste the certificate signed by the certificate authority +- build a PKCS#12 (also known as .p12 or .pfx) key store file with a password chosen by the user. That file contains the + generated key pair, the client certificate, and the CA certificate chain + +The implementation contains the [CAcert CA certificates](https://secure.cacert.org/index.php?id=3) for CA chain +building. ## Running 1. Install dependencies - ``` - sudo apt install git npm openssl golang-go + ```shell + sudo apt install git npm ``` 2. Clone the repository - ``` - git clone https://code.cacert.org/jandd/poc-browser-csr-generation.git + ```shell + git clone https://code.cacert.org/cacert/browser-csr-generation.git ``` 3. Get dependencies and build assets - ``` - cd poc-browser-csr-generation + ```shell + cd browser-csr-generation npm install --no-save --user gulp-cli npm install npm run build ``` -3. Setup the example CA and a server certificate and key - - ``` - ./setup_example_ca.sh - openssl req -new -x509 -days 365 -subj "/CN=localhost" \ - -addext subjectAltName=DNS:localhost -newkey rsa:3072 \ - -nodes -out server.crt.pem -keyout server.key.pem - ``` - -4. Run the Go based backend - - ``` - go run main.go - ``` - - Open https://localhost:8000/ in your browser. - -5. Run gulp watch - - You can run a - [gulp watch](https://gulpjs.com/docs/en/getting-started/watching-files/) - in a second terminal window to automatically publish changes to the files in - the `src` directory: - +4. Open `public/index.html` in a Web browser +5. Run ``` npm run watch ``` - -## Translations - -This PoC uses [go-i18n](https://github.com/nicksnyder/go-i18n/) for -internationalization (i18n) support. - -The translation workflow needs the `go18n` binary which can be installed via - -``` -go get -u github.com/nicksnyder/go-i18n/v2/goi18n -``` - -To extract new messages from the code run - -``` -goi18n extract -``` - -Then use - -``` -goi18n merge active.*.toml -``` - -to create TOML files for translation as `translate..toml`. After -translating the messages run - -``` -goi18n merge active.*.toml translate.*.toml -``` - -to merge the messages back into the active translation files. To add a new -language you need to add the language code to `main.go`'s i18n bundle loading -code - -``` -for _, lang := range []string{"en-US", "de-DE"} { - if _, err := bundle.LoadMessageFile(fmt.Sprintf("active.%s.toml", lang)); err != nil { - log.Panic(err) - } -} -``` + to continuously update the `public/index.html` when changing `src/index.html` diff --git a/src/index.html b/src/index.html index a7260a3..f847e40 100644 --- a/src/index.html +++ b/src/index.html @@ -8,203 +8,441 @@ - CSR generation in your browser + CAcert client certificate generation in your browser -
-

CSR generation in your browser

-
-
-
-
- - - Please input your name as it should be added to - your certificate -
-
- - -
-
- RSA Key Size -
- - -
-
- - -
-
- - +
+
+ +

Client certificate generation in your browser

+
+
+
+
Start
- An RSA key pair will be generated in your - browser. Longer key sizes provide better security but take longer to generate. -
- -
+
+
-
-
-
-
Loading ... + +
+
+
+
+

1. Generate a key pair

+
+
+ + + Please input your name as it should be added + to + your certificate +
+

Choose an RSA key size

+
+ An RSA key pair will be generated in your + browser. Longer key sizes provide better security but take longer to generate. +
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+
+
+ +
+ 

                 

             

         

-        

-            
Your key material is ready for download. The downloadable file contains your private
-                key and your certificate encrypted with your password. You can now use the file to install your
-                certificate in your browser or other applications.

-            
-                
-                    
-                    
-                
-                Download
+        

+            

+                
2. Paste the CSR into the CAcert form

+                
The CAcert web application allows you to paste a custom Certificate Signing Request (CSR) when you
+                    request a client certificate. Use the button below to copy your CSR to the clipboard.
+                

+                

+                
+            

+        

+        

+            

+                
3. Get your certificate signed

+                
Go to the New client certificate
+                    page of the CAcert web application and click the checkbox "Show advanced options". This will
+                    show
+                    you a text area where you can paste the copied CSR.

+                
+                
+            

+        

+        

+            

+                
4. Build the client certificate file

+                
You now have all the ingredients for downloading your certificate and corresponding key pair. Enter a
+                    password of your choice and click on the "Prepare Download" button to generate a file that you can
+                    use
+                    in your Browser, email client, or other applications.

+                

+                    
+                    
+                

+                
+            

+        

+        

+            

+                
5. Download ready

+                
Your key material is ready for download. The downloadable file contains your private
+                    key and your certificate encrypted with your password. You can now use the file to install your
+                    certificate in your browser or other applications.

+                
+                    
+                        
+                    
+                    Download
+                
+            

         

     

-    

-    

-    

-

+

+

+    

+        
© 2023 CAcert

+    

+