Create a self-signed certificate for localhost testing with IE11 and Webpack

Sources:

• https://stackoverflow.com/questions/44988163/create-self-signed-certificate-for-testing-localhost-and-have-it-accepted-by-the
• http://woshub.com/how-to-create-self-signed-certificate-with-powershell/
• https://stackoverflow.com/questions/4691699/how-to-convert-crt-to-pem/4691749#4691749
• https://webpack.js.org/configuration/dev-server/#devserver-https

If you develop with Webpack under Windows and you want to open your localhost server in HTTPS with IE11 you may receive a message like :

« Content was blocked because it was not signed by a valid security certificate. »

Below I explain the steps to make it work with IE11:

1. Open Powershell in Administrator mode
2. Type (no need to change anything, just copy/paste):

   New-SelfSignedCertificate -certstorelocation cert:\localmachine\my -dnsname localhost -FriendlyName "Dev localhost" -NotAfter (Get-Date).AddMonths(240) -TextExtension @("2.5.29.37={text}1.3.6.1.5.5.7.3.1")

   It should return a Thumbprint:

      PSParentPath: Microsoft.PowerShell.Security\Certificate::LocalMachine\my
   
   Thumbprint                                Subject
   ----------                                -------
   1D97DFF290FBACE0871F16AD1B38172F253CA048  CN=localhost

   You may want to open certlm.msc to see the new certificate in Personal

3. Export to .cer with the below Powershell command (make sure to replace 1D97DFF290FBACE0871F16AD1B38172F253CA048 with the Thumbprint you received before)… it will be exported to C:\localhost.cert (but you can change the path):

   Export-Certificate -Cert Cert:\LocalMachine\My\1D97DFF290FBACE0871F16AD1B38172F253CA048 -FilePath C:\localhost.cer (example: Export-Certificate -Cert Cert:\LocalMachine\My\PREVIOUS_Thumbprint_HERE -FilePath C:\localhost.cer)

4. We now need to export to .pfx with the below Powershell commands:

   $CertPassword = ConvertTo-SecureString -String "YourPassword" -Force –AsPlainText
   Export-PfxCertificate -Cert cert:\LocalMachine\My\2779C7928D055B21AAA0Cfe2F6BE1A5C2CA83B30 -FilePath C:\localhost.pfx -Password $CertPassword
   

5. Next we’ll use the opensource application called XCA: download and install it.
6. Open XCA and go to : File > New Database
7. Choose where you want to have this database and provide a password (to make it easy, you can choose the same « YourPassword » than before)
8. Go to tab Certificates
9. Click Import and select the previous created localhost.cer
10. Once imported, right click the cert and Export > File, then select « *.crt » for the file format
11. Go to the Private Keys tab and click on Import PFX
12. Select the previously created PFX and click Import All
13. Right click on « localhost_key » and Export > File, then select « PEM Private (*.pem) » for the file format
14. Close XCA and go to the folder with all your files
15. Double-click on the file localhost.crt you have just created
16. Windows shows a popup with a "Install Certificate..." button; Click on this button
17. Choose Current User, and next, click on « Place all certificates in the following store », and browse to « Trusted Root Certification Authorities »
18. Finally, in your Webpack config, you should enter something like the below:

    module.exports = {
      //...
      devServer: {
        https: {
          key: fs.readFileSync('C:\\localhost.pem'),
          cert: fs.readFileSync('C:\\localhost.crt')
        }
      }
    };
    

Launch your webpack server and open IE to your localhost server. It should work…

If you need to do CORS request, you may need to open IE settings, then go to Security and make sure to add localhost in the Local Intranet/Trusted Sites, then click on « Custom Level… », go to « Miscellaneous » and select « Enable » for « Access data sources across domains ».