免费SSL证书申请（解决http无法获取剪贴板内容问题）

原创已于 2025-07-31 17:16:25 修改 · 463 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#ssl #http #网络协议

于 2025-07-31 01:22:54 首次发布

error 同时被 2 个专栏收录

10 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

问题

网站开发过程中，本地开发环境下可以正常使用navigator.clipboard获取剪贴板内容，但部署到服务器后该API返回undefined。

原因：浏览器安全策略限制——剪贴板API仅能在安全上下文（HTTPS协议）中使用。

解决方案需要：

为网站配置SSL证书
在Nginx服务器中启用HTTPS协议

为网站配置SSL证书

网站：https://www.sslforfree.com

注册
在输入框中填写要申请的域名，然后点击绿色按钮。
点击蓝色按钮New Certificate

输入框中输入域名，不要点击I need a wildcard certificate（会员功能，要收费）。
系统默认会勾选一年的选项，但是要选择90天（否则收费）。
后面的选项就是全部勾选。

然后会进入验证节点。

勾选第二个DNS(CNAME)选项，注意这里有两个要复制的信息，一个是Name，一个是Point To。
在这里插入图片描述

到你的域名管理页面，选择解析。
在这里插入图片描述

在解析页面，点击添加记录，会出现下面的页面。
在这里插入图片描述

域名的输入框填写刚刚复制的Name，因为这里的输入框后面已经自动补足了你的域名，也就是红色的码掉的部分，所以复制的Name记得删除这部分。
记录类型选择CNAME
点击蓝色按钮添加记录值，记录值的输入框输入刚刚复制的Point To
提交。

然后回到sslforfree网站就可以点击Verify Domain按钮，进行验证了。如果验证不通过不用担心，等几分钟在验证一般就好了。
验证通过后就可以获取ssl证书，点击Download SSL Certificate按钮，就可以下载压缩包。里面有crt文件和key文件。

在Nginx服务器中启用HTTPS协议

这一步主要是修改nginx.conf文件，这是启用HTTPS协议之前的：
(因为只修改了http中的server部分，为了减少篇幅，就只放这部分。)

server {
        listen 80;
        server_name 你的主机名;
        
        # 静态资源服务
        root /etc/nginx/html; 
        index index.html;
    }

启用HTTPS协议：

首先把你前面获取的ssl证书放到你的服务器某个文件夹中，建议跟nginx放一起。比如我的nginx文件夹在/etc/nginx，可以在里面建一个cert文件夹，把证书放里面。现在你的证书位置分别是/etc/nginx/cert/certificate.crt和/etc/nginx/cert/private.key，在下面的配置里面分别填在ssl_certificate和ssl_certificate_key。
在下面的配置中最尾巴几行，也就是location ~ ^/(\d+)(/.*)?$那几行是为了动态端口转发。比如你的后端端口是6666，你的域名是hahaha.com，本来你的http请求是这样发http://hahaha.com:6666/login，现在你的https请求这样发https://hahaha.com/6666/login。

# HTTP 重定向到 HTTPS
server {
    listen 80;
    server_name 你的主机名;
    return 301 https://$host$request_uri;
}

# HTTPS 服务器配置
server {
    listen 443 ssl http2;
    server_name 你的域名; 

    # SSL 配置
    ssl_certificate 你的位置crt证书位置(我的示例：/etc/nginx/cert/certificate.crt);
    ssl_certificate_key 你的位置key文件位置(我的示例：/etc/nginx/cert/private.key);

    # SSL 优化配置
    ssl_session_timeout 1d;
    ssl_session_cache shared:SSL:50m;
    ssl_session_tickets off;

    # 现代加密套件配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';
    ssl_prefer_server_ciphers on;

    # HSTS 安全头
    add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;

    # 静态资源服务
    root /etc/nginx/html;
    index index.html;

    # 动态端口转发规则（关键新增部分）
    location ~ ^/(\d+)(/.*)?$ {
        proxy_pass http://127.0.0.1:$1$2$is_args$args;  # 保留查询参数
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

然后重启服务，让nginx.conf生效。

sudo nginx -t
sudo systemctl reload nginx

问题

后面发现一个问题，有的浏览器（如edge）无法访问，提示证书不完整。

当时下载证书，其实文件夹中有三个文件：

ca_bundle.crt（根证书）
certificate.crt（域名证书）
private.key

只用上了2和3，根证书被忽略了。解决问题很简单，进入你的cert文件夹，合并两个证书，取个新名字（我把新证书合并后的证书命名为new.crt，可以随意命名）：

cat certificate.crt ca_bundle.crt > new.crt

（如果你是windows，直接用记事本打开两个文件，复制两个文件内容到新文件中，新文件命名为new.crt。）

然后在nginx.conf中修改ssl_certificate：
/etc/nginx/cert/certificate.crt改为/etc/nginx/cert/new.crt

重启服务。

sudo nginx -t
sudo systemctl reload nginx

刷新网站，发现问题解决了。