本地Web环境支持SSL

淮城一只猫 · · 413次浏览 ·

前言

在开发一个项目中,发现Chrome浏览器给我扔一个错误:

Uncaught (in promise) SecurityError: Only secure origins are allowed (see: https://goo.gl/Y0ZkNV).

大致翻译下是只允许安全的来源,看来非ssl协议是不给加载前端资源的。

无奈只好想办法去支持了。

生成证书

我安装的是WinNMP一键环境包:Nginx + MariaDB + Redis + PHP环境。

首先生成证书,我用的是子系统去生产的。当然你可以安装openssl进行安装

  1. 使用openssl生成密钥privkey.pem:
openssl genrsa -des3 -out server.key 2048
  1. 使用密钥生成证书server.pem:
openssl req -new -key server.key -out server.csr

以下是控制台信息:

PS C:\Users\Jaxson\Desktop> openssl req -new -key server.key -out server.csr
Enter pass phrase for server.key:
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:CN
State or Province Name (full name) [Some-State]:JaxsonWang
Locality Name (eg, city) []:HuaiAn
Organization Name (eg, company) [Internet Widgits Pty Ltd]:Jaxson IT
Organizational Unit Name (eg, section) []:Jaxson IT
Common Name (e.g. server FQDN or YOUR name) []:localhost
Email Address []:wangjin@boxrom.com

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:extra
An optional company name []:localhost
  1. 而这个密码会带来一个副作用,那就是在每次Nginx启动Web服务器时,都会要求输入密码,这显然非常不方便,所以为们删除这个密码:
openssl rsa -in server.key -out server_no_passwd.key
  1. 生成证书:
openssl x509 -req -days 365 -in server.csr -signkey server_no_passwd.key -out server.crt

得到的证书就是一个可以使用的ssl证书了

配置nginx

server {
        listen       443;
        #填写和证书上一直的域名
        server_name  www.test.com;
        ssl on;
        ssl_certificate server.crt;
        ssl_certificate_key server_no_passwd.key;
        ssl_session_timeout 5m;
        ssl_prefer_server_ciphers on;
        location / {
            root   html;
            index  index.html index.htm;
        }
    }

重启Nginx服务器即可。

信任证书

重启后打开地址发现不安全提示:

这时候需要去信任证书。

  1. F12打开控制器到Security窗口导出证书,选项PKCS #7, single certificate即可:
    2.png

  2. 系统安装导出的证书,安装选择如图:
    5.png

导入信任需要受信任的根证书颁发机构

这样IE和斯巴达以及火狐浏览器可以访问ssl协议了

Chrome配置

很无奈在Chrome测试失败,只好下个工具:自签泛域名证书

然后还是不管用,Chrome很蛋疼,暂时没有办法去解决,只好拿别的浏览器去测试~

本博客所有内容采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可

转载文章请注明:本地Web环境支持SSL - https://iiong.com/local-web-environment-supports-ssl.html

分类: 奇淫技巧

淮城一只猫

永远年轻,永远热泪盈眶

1 个评论

· 2018年5月4日 - 下午10:18

如果是centos的话可以用acme.sh 挺简单的。。windows的话签letsencrypt证书真心搞不定了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*