Loolob

welcome to Loolob

0%

来此加密证书申请

发表于 更新于

证书申请

来此加密申请免费证书，3个月一续

证书验证

DNS验证

去域名商那里加个dns的Txt解析，将指定的子域名指向一段特定的文本。

尝试nameslio设置失败，已经设置了解析，但无法返回正确结果，放弃(不影响证书验证)

  • 后续更正

不是nameslio设置失败，是nameslio更新DNS设置后需要等待较长时间才会生效

Http验证

在服务器下放一个特定文件，通过指定域名能取到这个文件即可通过验证

证书下载使用

下载后丢到服务器，修改nginx设置以启用证书

nginx设置参考文档，来此加密版
nginx设置参考文档，阿里云版

Nginx配置

主要配置两个server:

  1. https server 含有证书信息
  2. http server 配置了跳转，将http请求都转发到https(含api字段的请求除外)

其余配置基本相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
server {
    listen 443 ssl http2;

    server_name loolob;

    # 阿里云证书配置 Start
    ssl_certificate /root/pem/fullchain.crt;
    ssl_certificate_key /root/pem/private.pem;
    ssl_session_timeout 5m;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;
    # 阿里云证书配置 End


    # 设置跨域配置 Start
    set $cors_origin "";
    if ($http_origin ~* "^http://localhost$"){
            set $cors_origin $http_origin;
    }

    # add_header Access-Control-Allow-Origin $cors_origin always;
    add_header Access-Control-Allow-Origin http://loolob.cn;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
    add_header Access-Control-Allow-Credentials true always;
    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
    add_header Access-Control-Max-Age 1728000 always;

    # 预检请求处理
    if ($request_method = OPTIONS) {
        return 204;
    }
    # #设置跨域配置 End

    include /root/loolob_blog/live2d_api/nginx.conf;
    include /root/loolob_blog/liry-web-go/nginx.conf;
}

server {
    listen 80;
    server_name loolob

    # 设置跨域配置 Start
    set $cors_origin "";
    if ($http_origin ~* "^http://localhost$"){
            set $cors_origin $http_origin;
    }

    # add_header Access-Control-Allow-Origin $cors_origin always;
    add_header Access-Control-Allow-Origin http://loolob.cn;
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
    add_header Access-Control-Allow-Credentials true always;
    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
    add_header Access-Control-Max-Age 1728000 always;

    # 预检请求处理
    if ($request_method = OPTIONS) {
        return 204;
    }
    # #设置跨域配置 End

    rewrite ^(?!.*api).*$ https://$host$1;

    # include /root/loolob_blog/hexo_blog/nginx.conf;
    include /root/loolob_blog/live2d_api/nginx.conf;
    include /root/loolob_blog/liry-web-go/nginx.conf;
}

index.html 修改

由于之前的代码写的接口都是发起的http请求，在https页面中请求http资源会有如下报错：

1
Mixed Content: The page at 'https://loolob.cn/' was loaded over HTTPS, but requested an insecure XM...

解决方法：

  1. 修改代码中的接口，改为都发起https请求
  2. 修改index.html加入如下字段，自动将http的不安全请求升级为https
    1
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

hexo 工程需要在 head.swig 这个文件中添加，如下：

1
2
3
4
5
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="{{ theme.android_chrome_color }}">
<meta name="generator" content="Hexo {{ hexo_version }}">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

react 工程需要在 index.html 这个文件中添加，如下：

1
2
3
4
5
6
7
8
9
10
11
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
    name="description"
    content="Web site created using create-react-app"
/>
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />