{"id":1912,"date":"2018-08-23T12:41:50","date_gmt":"2018-08-23T10:41:50","guid":{"rendered":"https:\/\/blog.kodono.info\/wordpress\/?p=1912"},"modified":"2018-08-23T12:41:50","modified_gmt":"2018-08-23T10:41:50","slug":"create-a-self-signed-certificate-for-localhost-testing-with-ie11-and-webpack","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2018\/08\/23\/create-a-self-signed-certificate-for-localhost-testing-with-ie11-and-webpack\/","title":{"rendered":"Create a self-signed certificate for localhost testing with IE11 and Webpack"},"content":{"rendered":"<p>Sources: <\/p>\n<ul>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/44988163\/create-self-signed-certificate-for-testing-localhost-and-have-it-accepted-by-the\">https:\/\/stackoverflow.com\/questions\/44988163\/create-self-signed-certificate-for-testing-localhost-and-have-it-accepted-by-the<\/a><\/li>\n<li><a href=\"http:\/\/woshub.com\/how-to-create-self-signed-certificate-with-powershell\/\">http:\/\/woshub.com\/how-to-create-self-signed-certificate-with-powershell\/<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/4691699\/how-to-convert-crt-to-pem\/4691749#4691749\">https:\/\/stackoverflow.com\/questions\/4691699\/how-to-convert-crt-to-pem\/4691749#4691749<\/a><\/li>\n<li><a href=\"https:\/\/webpack.js.org\/configuration\/dev-server\/#devserver-https\">https:\/\/webpack.js.org\/configuration\/dev-server\/#devserver-https<\/a><\/li>\n<\/ul>\n<p>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 :<\/p>\n<blockquote><p>&#8220;Content was blocked because it was not signed by a valid security certificate.&#8221;<\/p><\/blockquote>\n<p>Below I explain the steps to make it work with IE11:<\/p>\n<ol>\n<li>Open <strong>Powershell in Administrator mode<\/strong><\/li>\n<li>Type (no need to change anything, just copy\/paste):\n<pre class=\"brush:bash\">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\")<\/pre>\n<p>It should return a <strong>Thumbprint<\/strong>:<\/p>\n<pre class=\"brush:bash\">   PSParentPath: Microsoft.PowerShell.Security\\Certificate::LocalMachine\\my\r\n\r\nThumbprint                                Subject\r\n----------                                -------\r\n1D97DFF290FBACE0871F16AD1B38172F253CA048  CN=localhost<\/pre>\n<p>You may want to open <code>certlm.msc<\/code> to see the new certificate in Personal<\/li>\n<li><strong>Export to .cer<\/strong> with the below Powershell command (make sure to <strong>replace<\/strong> <code>1D97DFF290FBACE0871F16AD1B38172F253CA048<\/code> with the <strong>Thumbprint<\/strong> you received before)&#8230; it will be exported to <code>C:\\localhost.cert<\/code> (but you can change the path):\n<pre class=\"brush:bash\">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)<\/pre>\n<\/li>\n<li>We now need to <strong>export to .pfx<\/strong> with the below Powershell commands:\n<pre class=\"brush:bash\">\r\n$CertPassword = ConvertTo-SecureString -String \"YourPassword\" -Force \u2013AsPlainText\r\nExport-PfxCertificate -Cert cert:\\LocalMachine\\My\\2779C7928D055B21AAA0Cfe2F6BE1A5C2CA83B30 -FilePath C:\\localhost.pfx -Password $CertPassword\r\n<\/pre>\n<\/li>\n<li>Next we&#8217;ll use the opensource application called <strong>XCA<\/strong>: <a href=\"https:\/\/hohnstaedt.de\/xca\/\">download<\/a> and install it.<\/li>\n<li>Open XCA and go to : <code>File > New Database<\/code><\/li>\n<li>Choose where you want to have this database and provide a password (to make it easy, you can choose the same &#8220;YourPassword&#8221; than before)<\/li>\n<li>Go to tab <strong>Certificates<\/strong><\/li>\n<li>Click <strong>Import<\/strong> and select the previous created <strong>localhost.cer<\/strong><\/li>\n<li>Once imported, right click the cert and <strong>Export > File<\/strong>, then <strong>select &#8220;*.crt&#8221;<\/strong> for the file format<\/li>\n<li>Go to the <strong>Private Keys<\/strong> tab and click on <strong>Import PFX<\/strong><\/li>\n<li>Select the previously created PFX and click <strong>Import All<\/strong><\/li>\n<li>Right click on &#8220;localhost_key&#8221; and <strong>Export > File<\/strong>, then <strong>select &#8220;PEM Private (*.pem)&#8221;<\/strong> for the file format<\/li>\n<li>Close XCA and go to the folder with all your files<\/li>\n<li>Double-click on the file <code>localhost.crt<\/code> you have just created<\/li>\n<li>Windows shows a popup with a <code>\"Install Certificate...\"<\/code> button; Click on this button<\/li>\n<li>Choose Current User, and next, click on <strong>&#8220;Place all certificates in the following store&#8221;<\/strong>, and browse to <strong>&#8220;Trusted Root Certification Authorities&#8221;<\/strong><\/li>\n<li>Finally, in your Webpack config, you should enter something like the below:\n<pre class=\"brush:javascript\">\r\nmodule.exports = {\r\n  \/\/...\r\n  devServer: {\r\n    https: {\r\n      key: fs.readFileSync('C:\\\\localhost.pem'),\r\n      cert: fs.readFileSync('C:\\\\localhost.crt')\r\n    }\r\n  }\r\n};\r\n<\/pre>\n<\/li>\n<\/ol>\n<p>Launch your webpack server and open IE to your localhost server. It should work&#8230;<\/p>\n<p>If you need to do <strong>CORS request<\/strong>, you may need to open <strong>IE settings<\/strong>, then go to <strong>Security<\/strong> and make sure to add localhost in the <strong>Local Intranet\/Trusted Sites<\/strong>, then click on <strong>&#8220;Custom Level&#8230;&#8221;<\/strong>, go to <strong>&#8220;Miscellaneous&#8221;<\/strong> and select &#8220;Enable&#8221; for <strong>&#8220;Access data sources across domains&#8221;<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 : &#8220;Content was blocked because it was not signed by a valid security certificate.&#8221; Below I explain the steps to make it work with IE11: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,170,20,33,8],"tags":[123,92,155,158,148],"class_list":["post-1912","post","type-post","status-publish","format-standard","hentry","category-astuce","category-english","category-niveau-expert","category-programmation","category-windows","tag-english","tag-internet-explorer","tag-niveau-expert","tag-programmation","tag-windows"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=1912"}],"version-history":[{"count":4,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1912\/revisions"}],"predecessor-version":[{"id":1916,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/1912\/revisions\/1916"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=1912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=1912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=1912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}