博客 (152)

1. 使 lua 支持 resty.http

2. 在 access_by_lua_block 代码块中实现远程鉴权：

   #鉴权-START
   resolver 223.5.5.5;  # 使用公共 DNS
   access_by_lua_block {
       local http = require("resty.http")
       local httpc = http.new()
       httpc:set_timeout(500)  -- 连接超时
       local res, err = httpc:request_uri("https://鉴权地址/", {
           method = "GET",
           headers = {
               ["X-Real-IP"] = ngx.var.remote_addr,
               ["User-Agent"] = ngx.var.http_user_agent,
               ["X-Forwarded-Host"] = ngx.var.host,
               ["X-Forwarded-Uri"] = ngx.var.request_uri,
           },
           ssl_verify = false, -- 禁用 SSL 验证
           timeout = 500,     -- 读取超时
       })
   
       if not res then
           ngx.log(ngx.ERR, "Failed to request: " .. err)
       end
           
       if res and res.status == 403 then
           ngx.exit(ngx.HTTP_FORBIDDEN)
           -- return ngx.redirect("https://一个显示403友好信息的页面.html")
       end
   }
   #鉴权-END

   注意更改接口地址和友情显示 403 页面地址。

   本示例仅捕获 403 状态码，500、408 等其它异常情况视为允许访问，请根据业务需求自行添加状态码的判断。

   若超时也会进入 if not res then 代码块。

   建议将此代码部署在 nginx 主配置文件的 http 代码块中（宝塔面板中的路径：/www/server/nginx/nginx/conf/nginx.conf），如果你只想为单个网站鉴权，也可以放在网站配置文件的 server 块中。
   

3. 若鉴权接口在私网中，建议将鉴权接口域名和私网 IP 添加到 hosts 文件中。

附

1. 直接输出字符串

   ngx.header.content_type = "text/plain";
   ngx.say("hello world!")

2. 输出到日志

   ngx.log(ngx.ERR, "Response status: " .. res.status)

   日志在网站的 站名.error.log 中查看。

   宝塔面板查看方式：日志 - 网站日志 - 异常

3. 若想获取服务器 CPU 使用率等信息并传递给远程鉴权接口，请参考此文。

4. 常见问题

   no resolver defined to resolve

   原因：没有定义 DNS 解析器

   解决方法：在 http 块或 server 块中添加 resolver 8.8.8.8 valid=30s;，当然使用接入商自己的公共 DNS 可能更合适。

   unable to get local issuer certificate

   原因：没有配置 SSL 证书信息

   解决方法：添加 request_uri 参数：

   ssl_verify = true,  -- 启用 SSL 验证
   ssl_trusted_certificate = "证书路径",  -- 指定 CA 证书路径

   或

   ssl_verify = false,  -- 禁用 SSL 验证

5. 若您不想用 lua，可以用 nginx 原生自带的  auth_request 模块来实现。

鉴权方式有许多，譬如可以用 lua 的 access_by_lua 来实现，这里用 nginx 自带的 auth_request，虽然功能简单，但效率更高。

第一步，确保 nginx 已编译安装 auth_request 模块，见此文。

第二步，打开需要鉴权的网站的 nginx 配置文件，添加以下代码块：

    #鉴权-START
    location / {
        auth_request /auth;
        error_page 403 = @error403;
        
        #PHP-INFO-START  PHP引用配置，可以注释或修改
        include enable-php-**.conf;
        #PHP-INFO-END
    }
    location = /auth {
        internal;
        proxy_pass https://鉴权地址;
        proxy_pass_request_body off;
        proxy_set_header Content-Length "";
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header User-Agent $http_user_agent;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Uri $request_uri;
        proxy_intercept_errors on;
        #proxy_read_timeout 1s; # 超时会报 500
    }
    location @error403 {
        #default_type text/plain;
        #return 403 'forbidden';
        return 302 https://一个显示403友好信息的页面.html;
    }
    #鉴权-END

一般放在所有的 location 之前。

这里自定义请求头 X-Forwarded-Host 与 X-Forwarded-Uri 用来传递 host 与 uri。API 应从 Header 中相应取值。

宝塔面板中是通过 include enable-php-**.conf; 的方式调用 PHP ，那么可以将此行移入上面的 location / 代码块中，因为此代码块能匹配所有的请求路径。

最后，若鉴权接口在私网中，将鉴权接口域名和私网 IP 添加到 hosts 文件中。

今天早上同事反映论坛某管理账号无法登录，于是我尝试用创始人账号登录，也不行，第一反应就是中招了。

于是进阿里云控制台，发现云安全中心有许多安全警告，类型是网站后门，幸好 nginx 中设置了仅部分文件可执行 PHP，这些后门文件无法被执行。

尝试在 config_global_default.php 文件中添加创始人，但账号必须是副站长等管理账号才能成为创始人。

于是借用一个小号，从表 pre_ucenter_members 中将这个小号的 password 和 salt 复制到创始人账号中，这样创始人账号就可以用这个小号的密码登录了。

进入论坛后台，在 工具-运行记录-系统记录-后台访问 中查看入侵时间段的记录（操作、时间、IP 等），可搜索。

发现基本上在操作模板管理和专题管理。

对比时间，发现进入后台操作在先，上传后门在后。

查询 web 访问日志，通过访问文件路径或 IP 查询，在进入论坛后台之间，他进入了 UCenter 的后台，但是再往前就没有记录了。

因此基本可以确定：

黑客从 UCenter 修改了某管理员账号的密码（可能是利用漏洞），然后登录论坛后台修改了创始人的密码（可能也是用 UCenter 改的），通过模板管理和专题管理功能的上传功能上传了后门文件。

索性他没有对数据进行破坏性处理，也没有挂马，只是发现后门文件无法执行就放弃了。

本文记录于 2024 年 11 月。

版本选择原因：

• Discuz! X5 刚刚发布，生态尚未成熟，考虑到是老论坛升级，所以选择 X3.5。

• Discuz! X3.5 目前最高支持 PHP 8.2、MySQL 8.0。

完整升级步骤：

1. 购买新的 ECS、PolarDB，具体环境配置步骤参此文；

2. 安装宝塔面板并配置；

3. 安装 nginx 及 PHP；

4. 创建网站、配置 SSL、伪静态、防盗链、可写目录禁执行、仅允许部分入口文件执行等（.conf）；

5. 配置 hosts；

6. 如果是正式升级阶段，关闭论坛，防止产生新数据。

7. 备份原网站程序、PolarDB 数据库；

8. PolarDB 创建快照。

   测试阶段：从快照还原到新实例（MySQL 5.6 不能直接恢复到 MySQL 8.0），然后从 5.6 迁移到 8.0.x；

   正式阶段：全量模式直接从原实例迁移到 8.0.x，若增量模式且存在触发器，建议从快照还原；
   

9. 上传原网站程序到新的站点目录下；

10. 按 Discuz! X 升级文档升级 X3.4 至 X3.5；详情见下文 ↓；

11. 升级完成后切换到 PHP 8；
    

12. 配置 OSS、Redis、更新缓存等；

13. 测试论坛基本功能是否正常；检查附件是否能够正常上传；检查附件是否正常显示；全面检查控制台配置；

14. 逐个开启插件并检查兼容性（短信通、马甲引擎等）；

15. 按二开备忘录逐个按需进行二开；

16. 逐个修改调用论坛接口的项目及直接调用论坛数据库的项目；

17. 调试 MAGAPP 接口；

18. 尝试强制 https 访问；
    

19. 将以上所有修改后的程序保留备份；发布升级公告并关闭论坛；重复以上步骤；修改域名解析；开启论坛；
    

20. 配置 IP 封禁、定时器、日志、自动备份、配置其它 ECS 的 hosts 等；

21. 查看搜索引擎中收录的地址，是否有无法访问的情况；
    

22. 尝试将历史遗留的本地附件全部转移到 OSS；

23. 建议 在新服上创建 3 个网站：

1. 第 1 个用来尝试迁移、升级、二开，并测试所有功能；

2. 第 2 个用来再次重复这些步骤，最终保留程序代码及 UGC 文件，作为最终的网站程序，以正式域名作为网站根目录路径；

3. 第 3 个用来正式升级，主要功能是升级最新数据库。完成后修改第 2 个网站的数据库连接指向到最新的数据库，差异化同步新增的 UGC 文件到第 2 个网站。

Discuz! X 升级步骤及注意点：

• 因 PolarDB MySQL 不支持压缩，所以应移除 Discuz! 和 UCenter 代码中所有的 MYSQLI_CLIENT_COMPRESS，将 , MYSQLI_CLIENT_COMPRESS 替换为 /*, MYSQLI_CLIENT_COMPRESS*/。

• 升级前务必先修改 ./config/ 目录下的数据库/缓存连接信息，以防出现新站连接老库的情况；

• 按官方文档进行升级，升级前先修改一下：

• 【UC】先升级 UCenter 1.6 至 1.7。

  将 /uc_server/data 权限改为 777 并递归。

  打开 update_ucenter_adult.php 修改 $limit 值为 10000 以免执行超时。

  因通信失败的“发送通知失败”可以直接改 URL 参数跳过就完成了，原因可能是因数据量大，发送改名通知执行改名时超时。等DZ升级完成后UC会自动重试改名通知，或单独写个 php 文件将 UCenter 的用户名同步到应用的数据库。
  

• 【DZ】运行到 /install/update_adult.php?step=innodb&table=pre_common_member_grouppm 时报错：Duplicate key name 'gpmid' ALTER TABLE common_member_grouppm ADD INDEX gpmid(gpmid);

  解决方法：先删除索引，因保存时提示失败，应同时取消 gpmid 字段的自增，转换成功后再设置自增。
  

• 【DZ】运行到 /install/update_adult.php?step=file 一片空白而停止

  正在解决
  

• 【问题】common_menber 表用户名字段编码转换失败

  原因是部分用户名包含特殊字符（如全角空格），用以下语句查看两个表同一 uid 的不同用户：

  SELECT 
      u.uid, 
      u.username AS ucenter_username, 
      c.username AS common_username
  FROM 
      pre_ucenter_members u
  JOIN 
      pre_common_member c ON u.uid = c.uid
  WHERE 
      u.username <> c.username

  Discuz! 用户登录都是以 UCenter 中的用户名为主，所以可以写个小程序直接将 pre_ucenter_members 的用户名同步到 pre_common_member 中，另外 pre_ucenter_members 的用户数少于 pre_common_member 是正常的。若 pre_common_member_archive 表遇到错误同理。

• 如果用户登录慢，或打开 UCenter 慢，是因为 UC 正在通知 DZ 改用户名，每次打开一个页面会更改一个用户名，具体可以查看 pre_ucenter_notelist 中 closed 为 0 的队列，或进入 UC 后台-数据列表-通知列表 查看。

• 【问题】发布主题遇到错误：(1062) Duplicate entry '*' for key 'pid'

  【原因】forum_post 中的 pid 不是自动增长的，而是由表 forum_post_tableid 中自动增长的 pid 生成的。如果生成的 pid 值已在 forum_post 表中存在，则会出现此错误。

• 【解决】迁移数据库时应关闭论坛，以防止 forum_post 表有新数据插入。

• 【问题】打开帖子页面 ./thread-***-1-1.html 显示 404 Not Found，而 ./forum.php?mod=viewthread&tid=*** 可以正常打开

  【原因】未配置伪静态（可在宝塔面板中选择）

• 【问题】打开 UCenter 时报错：UCenter info: MySQL Query Error SQL:SELECT value FROM [Table]vars WHERE name='noteexists'

  【解决】打开文件 ./uc_server/data/config.inc.php 配置数据库连接

• 【问题】打开登录 UCenter 后一片空白

  【解决】将目录 ./uc_server/data/ 设为可写

• 需要将原来安装的插件文件移回 ./source/plugin/ 目录，并设置可写；

• 界面-表情管理，界面-编辑器设置-Discuz!代码

后续 Discuz! X3.5 小版本升级注意事项：

1. 确认插件是否支持新版本（如短信通）

2. 先创建一个新网站测试二开代码

3. 保留 /config/、/data/、/uc_client/data/、/uc_server/data/、/source/plugin/，其它移入 old

4. 上传文件

5. 移回其它需要的文件，如：

6. -- 勋章/loading/logo/nv 等：/static/image/common/

7. -- 表情：/static/image/smiley/

8. -- 水印：/static/image/common/watermark.*

9. -- 风格：/template/default/style/t2/nv.png 等

10. -- 默认头像：/uc_server/images/noavatar_***.gif

11. -- 根目录 favicon.ico 等
    

12. -- 及其它非 DZ 文件

13. 再次检查可写目录的写入权限和禁止运行 PHP 效果。

一年前记录过浏览器上如何下载小鹅通的课程视频，现在发现那个插件已经不能用了，所以重新整理了一下，下载过程比上次简单多了。

插件还是那只可爱的小黄猫

GitHub 地址：https://github.com/xifangczy/cat-catch

浏览器扩展安装地址：Chrome / Edge / Firefox

与之前相比，功能改进了不少：

• “从头捕获”，不需要手动拖动进度条，生怕没有录制完全。但是实际使用还是会丢失一部分开头，希望下个版本改进；

• “使用 ffmpeg 合并”可以自动合并捕获的视频和音频，下载得到的是一个完整的视频文件；

• “自动跳转到缓冲尾”可以不间断加载、节省录制时间，对下载非直播画面非常有用；
  

• 可以设置播放速度，点击扩展图标，在“其他页面 / 媒体控制”中可以设置。但是有了“自动跳转到缓冲尾”，我觉得设置播放速度这个功能可有可无。

开始录制：

在浏览器上安装扩展后，打开需要录制视频的页面，点击缓存捕获：

然后在面板上点击“从头捕获”：

插件就自动开始从头播放并记录缓存了。

建议勾选“完成捕获自动下载”、“使用 ffmpeg 合并”。

如果是录制“非直播”，建议勾选“自动跳转到缓冲尾”。

另外两个选项“始终从头捕获”、“清理多余头部数据”我没有深入研究，有兴趣的自己研究下。

播放完成后，会自动打开一个“猫抓 cat-catch”的网页，自动使用 ffmpeg 进行转码与合并。

完成后自动下载该文件。

提示：如果要继续捕获其它视频，请先关闭那个“猫抓 cat-catch”网页，否则捕获完成后无法下载。

因 MySQL 8 默认使用 utf8mb4 字符集，如果是从 MySQL 5-7 等低版本迁移的，那么仍然是 utf8（相当于 utf8mb3）。

这在保存字符串时有可能会报错：

An error occurred while saving the entity changes. See the inner exception for details.

Incorrect string value: '\xF0\xA1\x90\x93\xE6\x9D...' for column 'Html' at row 1

即使连接字符串上加上 CharSet=utf8 或 CharSet=utf8mb3 或 CharSet=utf8mb4 也没用。

那么只能把数据库的字符集改为 utf8mb4。

更改字符集和排序方式前必须先备份数据库！

1. 更改现有数据库的字符集和排序规则

   ALTER DATABASE mydatabase 
   CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci;

2. 更改现有表的字符集和排序规则

   ALTER TABLE mytable 
   CONVERT TO CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci;

3. 更改现有列的字符集和排序规则

   当列单独设置了字符集时执行，未设置的不需要执行，会继承表的字符集

   ALTER TABLE mytable 
   MODIFY mycolumn VARCHAR(255) 
   CHARACTER SET utf8mb4 
   COLLATE utf8mb4_unicode_ci

数据库中可能存在许多表，数据表中可能存在许多列，使用下面的命令可以生成批量执行的命令：

1. 更改所有表的默认字符集和排序规则

   USE database_name; -- 替换为你的数据库名
   
   SELECT CONCAT('ALTER TABLE `', TABLE_SCHEMA, '`.`', TABLE_NAME, '` CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') 
   FROM information_schema.TABLES 
   WHERE TABLE_SCHEMA = 'database_name'; -- 再次替换为你的数据库名

2. 更改所有列的字符集和排序规则

   USE database_name; -- 使用你的数据库名
   
   SELECT CONCAT('ALTER TABLE `', TABLE_SCHEMA, '`.`', TABLE_NAME, '` MODIFY `', COLUMN_NAME, '` ', COLUMN_TYPE, ' CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;') 
   FROM information_schema.COLUMNS 
   WHERE TABLE_SCHEMA = 'database_name'; -- 使用你的数据库名

另外给出几条查询语句：

1. 查看特定数据库的字符集和排序规则

   SELECT DEFAULT_CHARACTER_SET_NAME, DEFAULT_COLLATION_NAME
   FROM information_schema.SCHEMATA
   WHERE SCHEMA_NAME = 'your_database_name';

2. 查看特定表的字符集和排序规则

   SELECT TABLE_SCHEMA, TABLE_NAME, TABLE_COLLATION
   FROM information_schema.TABLES
   WHERE TABLE_SCHEMA = 'your_database_name';

3. 查看特定列的字符集和排序规则

   SELECT COLUMN_NAME, CHARACTER_SET_NAME, COLLATION_NAME 
   FROM information_schema.COLUMNS 
   WHERE TABLE_SCHEMA = 'your_database_name' AND TABLE_NAME = 'your_table_name';

1. 购买 ECS
   

2. 解析域名（非网站域名）、修改实例名称、主机名

3. 设置阿里云（重要）

4. 远程连接进入 ECS（若解析未生效可以先用 IP）（若新服默认使用 22 端口，可在阿里云控制台登录系统，或先在安全组临时放行 22 端口）

5. 修复系统漏洞

6. 将磁盘挂载到目录（fdisk、df 命令参考：https://xoyozo.net/Blog/Details/SSH）

7. 安装宝塔面板（本文以宝塔面板方案为例，选择任何你喜欢的环境部署方案都行）。可以在阿里云控制台ECS实例页安装扩展程序

8. 临时放行宝塔面板端口，进入宝塔面板（http方式），或用命令更改宝塔面板端口

9. 配置面板 SSH、添加新的安全端口、面板设置

10. 更改 SSH 默认端口（参：https://xoyozo.net/Blog/Details/change-default-port）
    

11. 安装 nginx、PHP 等

12. 配置 PHP 扩展（Redis、sqlsrv（注意选择兼容的版本）、memcached 及端口）

13. 创建网站，配置网站（路径、伪静态等）

14. 迁移网站文件（参：https://xoyozo.net/Blog/Details/SSH）

15. 仔细对比新旧网站的配置文件（特别是 .php 的访问权限，参：https://xoyozo.net/Blog/Details/nginx-location-if）

16. 设置写入目录（使用 rsync 同步的文件会同步用户和权限）

17. 解析域名（先改 hosts 测试网站功能）

18. 更改内网其它 ECS 上的 hosts

19. 关闭原 ECS（能马上发现问题，不然等运行一段时间才发现问题就麻烦点）
    

20. 设置 FTP
    

21. 迁移“计划任务”

22. 所有网站和软件的配置文件都要使用 WinMerge 进行对比
    

23. 移除“宝塔面板-安全”和“阿里云-ECS-安全组”中不用的端口

24. 再次检查阿里云设置

25. 在备份工具中添加该服务器的所有备份项

26. 私网中若有 ECS 的 hosts 中域名直接绑定到私网 IP 的，做相应更改

更多文章：

从零搭建一台阿里云 ECS（Windows Server）并迁移网站

SignalR 是一个开源的实时通信库，用于构建实时 Web 应用程序。它提供了一个简单的 API，可以在客户端和服务器之间建立持久连接，以便实时地推送数据。

与传统的 WebSocket 相比，SignalR 提供了更高级的功能和更简单的开发体验。下面是一些主要区别：

• 支持多种传输方式：SignalR 可以使用多种传输方式，包括 WebSocket、Server-Sent Events（SSE）、长轮询和 Forever Frame。这使得 SignalR 在不同的环境中都能提供实时通信的能力，即使某些浏览器不支持 WebSocket，也可以使用其他传输方式。

• 自动处理连接管理：SignalR 管理连接的生命周期，包括连接的建立、断开和重新连接。它会自动处理连接的失败和重新连接的逻辑，简化了开发人员的工作。

• 服务器端推送：SignalR 允许服务器端主动推送消息给客户端，而不需要客户端发起请求。这使得实时通信变得更加高效和实时，适用于聊天应用、实时监控等场景。

• 跨平台支持：SignalR 可以在多个平台上使用，包括 .NET、Java、JavaScript 等。这使得开发人员可以使用自己熟悉的语言和框架来构建实时应用程序。
  

微软官方提供了针对 ASP.NET Core Web 应用（Razor 页面）的详细教程，这里给出 MVC 版本入门教程。

最终将创建一个正常运行的聊天应用：

创建 Web 应用项目

添加 SignalR 客户端库

在“解决方案资源管理器”>中，右键单击项目，然后选择“添加”“客户端库”。

在“添加客户端库”对话框中：

• “提供程序”选择“unpkg”

• “库”，请输入 @microsoft/signalr@latest。

• 选择“选择特定文件”，展开“dist/browser”文件夹，然后选择 signalr.js 和 signalr.min.js。

• 点击“安装” 。
  

创建 SignalR Hubs 类

using Microsoft.AspNetCore.SignalR;

/// <summary>
/// Hub 类管理连接、组和消息
/// </summary>
public class ChatHub : Hub
{
        /// <summary>
        /// 可通过已连接客户端调用 SendMessage，以向所有客户端发送消息
        /// </summary>
    public async Task SendMessage(string user, string message)
    {
        // Clients.All 向所有的客户端发送消息
        // ReceiveMessage 是客户端监听的方法
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

其父类 Hub 可管理连接、组和消息。这里演示的是向所有客户端发送消息。

配置 SignalR

打开 Program.cs，添加注入：

builder.Services.AddSignalR();

添加路由：

app.MapHub<ChatHub>("/chatHub");

添加 SignalR 客户端代码

视图页面：

<div class="container">
    <div class="row p-1">
        <div class="col-1">用户</div>
        <div class="col-5"><input type="text" id="userInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-1">消息</div>
        <div class="col-5"><input type="text" class="w-100" id="messageInput" /></div>
    </div>
    <div class="row p-1">
        <div class="col-6 text-end">
            <input type="button" id="sendButton" value="发送消息" />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <hr />
        </div>
    </div>
    <div class="row p-1">
        <div class="col-6">
            <ul id="messagesList"></ul>
        </div>
    </div>
</div>
<script src="~/lib/microsoft/signalr/dist/browser/signalr.min.js"></script>
<script src="~/js/chat.js"></script>

chat.js 文件：

"use strict";

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

// 在连接建立之前禁用发送按钮
document.getElementById("sendButton").disabled = true;

connection.on("ReceiveMessage", function (user, message) {
    var li = document.createElement("li");
    document.getElementById("messagesList").appendChild(li);
    // 修改此处时应注意脚本注入问题
    li.textContent = `${user} says ${message}`;
});

connection.start().then(function () {
    document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
    return console.error(err.toString());
});

document.getElementById("sendButton").addEventListener("click", function (event) {
    var user = document.getElementById("userInput").value;
    var message = document.getElementById("messageInput").value;
    connection.invoke("SendMessage", user, message).catch(function (err) {
        return console.error(err.toString());
    });
    event.preventDefault();
});

完成。在线示例：https://xoyozo.net/Demo/SignalRDemo

如果手机开启了自动横屏，那么网页就会跟着旋转，导致网页宽度变大，高度变小，页面布局不友好，我们可以通过判断屏幕方向 api，用 css 设置旋转。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>保持竖屏示例</title>
</head>
<body>
    <div id="app">
        <div class="page">
            <div>把手机横过来试试</div>
            <div>页面永远保持竖屏方向</div>
        </div>
    </div>
</body>
</html>

CSS：

body { margin: 0; }
.page { text-align: center; padding-top: 100px; }

@media screen and (orientation: landscape) {
    body { width: 100vh; height: 100vw; overflow: hidden; }
    .page.landscape-primary { transform: rotate(-90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 100%; left: 0; }
    .page.landscape-secondary { transform: rotate(90deg); transform-origin: top left; width: 100vh; height: 100vw; position: absolute; top: 0; left: 100%; }
}

JS:

function fn_set_orientation() {
    var orientation = window.screen.orientation || window.screen.mozOrientation || window.screen.msOrientation;
    const div = document.querySelector('.page');
    console.log(orientation.type)
    switch (orientation.type) {
        case 'landscape-primary': {
            div.classList.remove('landscape-secondary');
            div.classList.add('landscape-primary');
            break;
        }
        case 'landscape-secondary': {
            div.classList.remove('landscape-primary');
            div.classList.add('landscape-secondary');
            break;
        }
        default: {
            div.classList.remove('landscape-primary');
            div.classList.remove('landscape-secondary');
            break;
        }
    }
}
window.addEventListener("orientationchange", function () {
    fn_set_orientation();
});
fn_set_orientation();

示例：

https://xoyozo.net/Demo/Orientation

未能找到路径“\roslyn\csc.exe”的一部分。

解决方法：

在 nuget 中直接卸载 Microsoft.CodeDom.Providers.DotNetCompilerPlatform

如果 web.config 报错，删除与 Microsoft.CodeDom.Providers.DotNetCompilerPlatform 相关的项，如：

<system.codedom>
	<compilers>
		<compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" compilerOptions="/langversion:default /nowarn:1659;1699;1701;612;618" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.CSharpCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
		<compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" compilerOptions="/langversion:default /nowarn:41008,40000,40008 /define:_MYTYPE=\&quot;Web\&quot; /optionInfer+" type="Microsoft.CodeDom.Providers.DotNetCompilerPlatform.VBCodeProvider, Microsoft.CodeDom.Providers.DotNetCompilerPlatform, Version=4.1.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
	</compilers>
</system.codedom>

然后遇到错误：

功能 空传播运算符 在 C# 5 中不可用。请使用 6 或更高的语言版本

所以还是少不了 Microsoft.CodeDom.Providers.DotNetCompilerPlatform

又把这货装上了，竟然不报错了。

这期间我更改过在 Release 模式下调试，将 .NET Framework 4.8 升级到 .NET Framework 4.8.1 等，然后又退回到原来的状态和版本，竟然都正常了。

就这样吧！