一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Spark1e的个人博客

> idc.wiki [link](https://idc.wiki/aff.php?aff=2878)

> Spartan Host [link](https://billing.spartanhost.net/aff.php?aff=2164)

> Bandwagong Host [link](https://bandwagonhost.com/aff.php?aff=70960)

> Oracle Cloud

### idc.wiki

### Spartan Host (斯巴达)

> 斯巴达由于目前没有抗DDoS的需求，已经drop.

### Bandwagong (搬瓦工)

### Oracle (甲骨文)

> 我的是位于韩国首尔的机房

一些我自己使用效果比较好的VPS推荐

### 简单介绍Serv00

Serv00.com 的主要特点：

完全免费： 不需要支付任何费用，就能享受到一定程度的服务器资源。
配置适中： 免费套餐提供了 3GB 存储空间、512MB 内存、不限流量，对于个人博客、小型网站来说足够使用。
功能丰富： 支持 PHP、MySQL 等常见的网站开发语言和数据库，提供免费二级域名、可自定义开放端口、支持 SSH 访问等。
易于使用： 提供用户友好的控制面板，方便用户管理自己的网站。
免费域名邮箱： 可以申请免费的域名邮箱，方便收发邮件。
Serv00.com 的适用人群：

个人博客爱好者： 搭建自己的个人博客，分享生活、技术等。
小型网站开发者： 测试和部署小型网站或应用程序。
学习编程的人： 用于练习和实验。
需要注意的事项：

资源有限： 毕竟是免费的，资源有限，不适合运行大型网站或高负载的应用程序。
需要保持活跃： Serv00 会要求用户定期登录后台或 SSH，以保持账号的活跃状态。
可能存在不稳定性： 免费服务可能存在不稳定性，影响网站的访问速度和稳定性。

### 在Serv00上运行一个Nodejs程序 —— 以UptimeKuma为例

#### 0. 先在后台允许运行自己的应用

首先根据你注册成功后收到的邮件登录到后台 panelX.serv00.com，

左边栏依次找到 “Additional services” -> "Run your own applications" -> "Enable"

如果当前正在SSH，需要重新连接。

#### 1. SSH到虚拟主机并配置PM2

> PM2 是一个功能强大、易于使用的 Node.js 进程管理器。它可以帮助开发者更轻松地管理和监控 Node.js 应用程序，提高应用程序的稳定性和性能。

这里主要是使用PM2管理Nodejs应用。由于虚拟主机并不给到Root权限，因此需要配置一下npm。

```bash
# 在当前目录创建npm全局包的安装位置
mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'

# 配置环境变量以全局使用pm2命令
echo "export PATH=~/.npm-global/bin:$PATH" >> ~/.profile

# 安装PM2
npm install -g pm2

# 安装完成后使环境变量生效
source ~/.profile
```

当上述步骤完成后，可以运行 `pm2 status` 验证是否安装成功。

> 如果返回 bin/pm2 Permission denied，说明第0步没有设置成功，请检查。

#### 2. Serv00配置一个公开端口

一般的Nodejs构建的Web应用需要暴露一个端口供客户端访问，因此需要在Serv00上配置一个端口。

在panelX.serv00.com的后台左边栏找到："Port reservation" -> "Add port" ，根据需要添加暴露的端口，下文的UptimeKuma只需要一个暴露端口，这里我以22010举例。

![serv00_port](/img/uploads/serv00_port.png)

#### 3. PM2方式运行UptimeKuma

> https://github.com/louislam/uptime-kuma

首先把项目clone到domain目录下

```bash
cd ~/domains
# 克隆指定Tag的Release
git clone -b 1.23.16 https://github.com/louislam/uptime-kuma.git
```

克隆完成后，根目录下有一个 `ecosystem.config.js` ，可以作为PM2的配置文件。

编辑它，增加端口配置以及关闭Playwright特性：

```js
module.exports = {
    apps: [{
        name: "uptime-kuma",
        script: "./server/server.js",
        args: "--port=22010",
        env: {
            "PLAYWRIGHT_BROWSERS_PATH": "/nonexistent"
        }
    }]
};
```

保存，然后执行 `pm2 start ./ecosystem.config.js` 测试是否运行正常。

> 运行成功后记得立即访问 `<your-account>.serv00.net:22010` 配置管理员账户！

#### 4. 配置服务保活

由于Serv00的环境经常不定时重启，会导致PM2相关服务被关闭，因此我们需要配置一个保活脚本来让PM2的相关任务被kill时自动重新拉起。

```sh
#!/bin/bash

USERNAME='<your-account>'
WEBSITE='http://<your-account>.serv00.net:22010/'

check_health() {
    local CODE=$(curl -o /dev/null -s -w "%{http_code}\n" --connect-timeout 10 --max-time 30 ${WEBSITE})
    if [ "$CODE" = "000" ]; then
        return 1
    fi
    return 0
}
check_health
EXIT_CODE=$?
if [ ${EXIT_CODE} -eq 1 ]; then
    echo 'Trying to restart pm2...'
    /home/${USERNAME}/.npm-global/bin/pm2 resurrect
    /home/${USERNAME}/.npm-global/bin/pm2 restart all

elif [ ${EXIT_CODE} -eq 0 ]; then
    echo 'Server is up!'
fi
```

这个脚本通过检测UptimeKuma的Web页面是否还能够正常返回状态码从而判断主机的PM2是否正常，因此Website可以换成你的配置，其中Code为000是指服务器无响应（即对应端口并没有服务处理请求）。

保存为restart-pm2.sh，放在我们的用户目录。用主机的Crontab也是有可能被还原的，因此我们需要在Serv00的后台配置一个定时任务。

依然是panelX.serv00.com，左边栏依次："Cron jobs" -> "Add cron job"

如下配置：

![serv00_cron](/img/uploads/serv00_cron.png)

> 如果你有其他的可以用来检测服务状态的Web服务也可以换成对应的

#### 5. 配置Cloudflare定时访问后台账号保活

我是用的是这个帖子的旧版本脚本，可以参考更新的。由于我不需要TG通知，相关的函数都进行了注释。

> 参考：@Xiang https://linux.do/t/topic/181957

```js
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

addEventListener('scheduled', event => {
  event.waitUntil(handleScheduled(event.scheduledTime))
})

// @ts-ignore
async function handleRequest(request) {
  return new Response('Worker is running')
}

// @ts-ignore
async function handleScheduled(scheduledTime) {
  // @ts-ignore
  const accounts = JSON.parse(ACCOUNTS_JSON)
  const results = await loginAccounts(accounts)
  await sendSummary(results)
}

async function loginAccounts(accounts) {
  const results = []
  for (const account of accounts) {
    const result = await loginAccount(account)
    results.push({ ...account, ...result })
    await delay(Math.floor(Math.random() * 8000) + 1000)
  }
  return results
}

function generateRandomUserAgent() {
  const browsers = ['Chrome', 'Firefox', 'Safari', 'Edge', 'Opera'];
  const browser = browsers[Math.floor(Math.random() * browsers.length)];
  const version = Math.floor(Math.random() * 100) + 1;
  const os = ['Windows NT 10.0', 'Macintosh', 'X11'];
  const selectedOS = os[Math.floor(Math.random() * os.length)];
  const osVersion = selectedOS === 'X11' ? 'Linux x86_64' : selectedOS === 'Macintosh' ? 'Intel Mac OS X 10_15_7' : 'Win64; x64';

  return `Mozilla/5.0 (${selectedOS}; ${osVersion}) AppleWebKit/537.36 (KHTML, like Gecko) ${browser}/${version}.0.0.0 Safari/537.36`;
}

async function loginAccount(account) {
  const { username, password, panelnum, type } = account
  let url = type === 'ct8' 
    ? 'https://panel.ct8.pl/login/?next=/' 
    : `https://panel${panelnum}.serv00.com/login/?next=/`

  const userAgent = generateRandomUserAgent();

  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'User-Agent': userAgent,
      },
    })

    const pageContent = await response.text()
    const csrfMatch = pageContent.match(/name="csrfmiddlewaretoken" value="([^"]*)"/)
    const csrfToken = csrfMatch ? csrfMatch[1] : null

    if (!csrfToken) {
      throw new Error('CSRF token not found')
    }

    const initialCookies = response.headers.get('set-cookie') || ''

    const formData = new URLSearchParams({
      'username': username,
      'password': password,
      'csrfmiddlewaretoken': csrfToken,
      'next': '/'
    })

    const loginResponse = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Referer': url,
        'User-Agent': userAgent,
        'Cookie': initialCookies,
      },
      body: formData.toString(),
      redirect: 'manual'
    })

    console.log(`Login response status: ${loginResponse.status}`)
    console.log(`Login response headers: ${JSON.stringify(Object.fromEntries(loginResponse.headers))}`)

    const loginResponseBody = await loginResponse.text()
    console.log(`Login response body: ${loginResponseBody.substring(0, 200)}...`)

    if (loginResponse.status === 302 && loginResponse.headers.get('location') === '/') {
      const loginCookies = loginResponse.headers.get('set-cookie') || ''
      const allCookies = combineCookies(initialCookies, loginCookies)

      const dashboardResponse = await fetch(url.replace('/login/', '/'), {
        headers: {
          'Cookie': allCookies,
          'User-Agent': userAgent,
        }
      })
      const dashboardContent = await dashboardResponse.text()
      console.log(`Dashboard content: ${dashboardContent.substring(0, 200)}...`)

      if (dashboardContent.includes('href="/logout/"') || dashboardContent.includes('href="/wyloguj/"')) {
        const nowUtc = formatToISO(new Date())
        const nowBeijing = formatToISO(new Date(Date.now() + 8 * 60 * 60 * 1000))
        const message = `账号 ${username} (${type}) 于北京时间 ${nowBeijing}（UTC时间 ${nowUtc}）登录成功！`
        console.log(message)
        // await sendTelegramMessage(message)
        return { success: true, message }
      } else {
        const message = `账号 ${username} (${type}) 登录后未找到登出链接，可能登录失败。`
        console.error(message)
        // await sendTelegramMessage(message)
        return { success: false, message }
      }
    } else if (loginResponseBody.includes('Nieprawidłowy login lub hasło')) {
      const message = `账号 ${username} (${type}) 登录失败：用户名或密码错误。`
      console.error(message)
      // await sendTelegramMessage(message)
      return { success: false, message }
    } else {
      const message = `账号 ${username} (${type}) 登录失败，未知原因。请检查账号和密码是否正确。`
      console.error(message)
      // await sendTelegramMessage(message)
      return { success: false, message }
    }
  } catch (error) {
    const message = `账号 ${username} (${type}) 登录时出现错误: ${error.message}`
    console.error(message)
    // await sendTelegramMessage(message)
    return { success: false, message }
  }
}

function combineCookies(cookies1, cookies2) {
  const cookieMap = new Map()
  
  const parseCookies = (cookieString) => {
    cookieString.split(',').forEach(cookie => {
      const [fullCookie] = cookie.trim().split(';')
      const [name, value] = fullCookie.split('=')
      if (name && value) {
        cookieMap.set(name.trim(), value.trim())
      }
    })
  }

  parseCookies(cookies1)
  parseCookies(cookies2)

  return Array.from(cookieMap.entries()).map(([name, value]) => `${name}=${value}`).join('; ')
}

async function sendSummary(results) {
  const successfulLogins = results.filter(r => r.success)
  const failedLogins = results.filter(r => !r.success)

  let summaryMessage = '登录结果统计：\n'
  summaryMessage += `成功登录的账号：${successfulLogins.length}\n`
  summaryMessage += `登录失败的账号：${failedLogins.length}\n`

  if (failedLogins.length > 0) {
    summaryMessage += '\n登录失败的账号列表：\n'
    failedLogins.forEach(({ username, type, message }) => {
      summaryMessage += `- ${username} (${type}): ${message}\n`
    })
  }

  console.log(summaryMessage)
  // try {
  //   // @ts-ignore
  // 	let data = JSON.parse(TELEGRAM_JSON);
  // 	if(!data.telegramBotToken || !data.telegramBotUserId) return;
  // 	await sendTelegramMessage(summaryMessage)
  // } catch(e) {
  //   console.log("Skip telegram notify... ("+e.message+")")
  // }
}

// async function sendTelegramMessage(message) {
//   // @ts-ignore
//   const telegramConfig = JSON.parse(TELEGRAM_JSON)
//   const { telegramBotToken, telegramBotUserId } = telegramConfig
//   const url = `https://api.telegram.org/bot${telegramBotToken}/sendMessage`
  
//   try {
//     await fetch(url, {
//       method: 'POST',
//       headers: { 'Content-Type': 'application/json' },
//       body: JSON.stringify({
//         chat_id: telegramBotUserId,
//         text: message
//       })
//     })
//   } catch (error) {
//     console.error('Error sending Telegram message:', error)
//   }
// }

function formatToISO(date) {
  return date.toISOString().replace('T', ' ').replace('Z', '').replace(/\.\d{3}Z/, '')
}

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}
```

其中ACCOUNTS_JSON的是存储在Worker的机密里，文本或者机密格式：

```json
[
  {
    "username": "user1",
    "password": "pass1",
    "panelnum": "1",
    "type": "ct8"
  },
  {
    "username": "user2",
    "password": "pass2",
    "panelnum": "13",
    "type": "serv00"
  }
]
```


Serv00上部署自己的Nodejs应用

### 问题

使用Vite构建ffmpeg-wasm项目的时候，vite报错：

```
The file does not exist at "/example-project/node_modules/.vite/deps/worker.js?worker_file&type=module" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.
```

同时由于该报错，页面热重载后ffmpeg的loaded标识符为false，无法进行后续调试

### 解决

vite.config.js修改：

```js
optimizeDeps: {
    exclude: ["@ffmpeg/ffmpeg"]
}
```

> 经测试，单独exclude目录下的worker.js仍然报错

如果你使用了其他有web worker的包，可以尝试类似的处理。


Vite构建含有Web Worker的项目时解决optimizeDeps报错

### 实现

一段最简单的clickoutside方案。其中contains兼容到IE9

```javascript
function clickOutsideListener(targetDom, clickOutsideFn) {
        this.handler = function(e){   
            if (!targetDom.contains(e.target)){
              // Clicked outside the box
              clickOutsideFn && clickOutsideFn()
            }
        }
    }
    clickOutsideListener.prototype.add = function() {
        document.addEventListener('click', this.handler)
    };
    clickOutsideListener.prototype.remove = function (){
        document.removeEventListener('click', this.handler)
    }
```

那么我们在绑定的时候，就会通过类似的代码：

```javascript
var $ = document.querySelector;
if ($('#menu')) $('#menu').addEventListener('mouseleave', mouseLeaveHandler);
```

这里要注意，如果你的鼠标移开事件元素内部有如select这一类的元素那可能在部分浏览器（如火狐）会有兼容性问题，解决方案：

```javascript
function mouseLeaveHandler(e) {
	if (e.relatedTarget === null) return;
	// handler logic..
}
```

### 原因

`relatedTarget`是鼠标次要事件，因此和鼠标的一些行为（mouse*）密切相关，MDN给出的对应关系请见：

[MDN - relatedTarget](https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/relatedTarget)

在本次排查中，正是select点开菜单后，在Firefox下，移动到菜单内是一个丢失了relatedTarget的mouse事件，因此可以直接return掉来避免后续执行。

除此以外，mouseover和mouseout著名的bug，即进入mouseover元素的节点，会触发一次mouseout事件和一次mouseover事件，这时就会出现mouseout到里层节点（e.relatedTarget = 里层节点），紧接着mouseover到当前节点（e.relatedTarget = 当前节点），即出现了从自己mouseover到自己的bug。

### 其他实现

[VueUse库](https://github.com/vueuse/vueuse/blob/main/packages/core/onClickOutside/index.ts) 

使用的`composedPath`，兼容到IE11，如果需要更好的兼容性请见：https://gist.github.com/sibbng/13e83b1dd1b733317ce0130ef07d4efd


有关relatedTarget的二三事

clickoutside的几种实现

```js
// 如果是iframe，把document换成iframe对应的document即可
document.body.style.userSelect = 'none'; // 禁止选中
          document.body.oncontextmenu = "return false"; // 禁止邮件
          document.oncopy = function() { // 禁止复制
            return false;
          }
          document.body.onselectstart = "return false;" // 禁止选择
          document.onkeydown = function(event) { // 屏蔽ctrl，alt，shift
            if(event.ctrlKey) return false;
            if(event.altKey) return false;
            if(event.shiftKey) return false;
          }
```


前端阻止复制

### 实现代码

```javascript
// 部分基于HTML form元素的表单提交方法，将form节点克隆出来然后进行数据修改调整后重发
// 注意：cloneNode不会复制select的值，因此需要手工遍历源form节点然后复制一个带有value的select/input (https://github.com/whatwg/dom/issues/644)
function formDataModifier(formNode, modifyFn) {
	var clonedForm = formNode.cloneNode(true);
	var attachedNode = document.body.appendChild(clonedForm);

	// clone all select fields
	var allOldSelects = formNode.querySelectorAll("select");
	for (var i = 0; i < allOldSelects.length; i++) {
		if (allOldSelects[i].name) {
			var node = attachedNode.querySelector('select[name=' + allOldSelects[i].name + ']');
			if (node) node.value = allOldSelects[i].value;
		}
	}

	modifyFn && modifyFn(attachedNode);
	attachedNode.addEventListener('submit', function(e) {
		// console.log(e);
		setTimeout(function() {
			if (attachedNode) document.body.removeChild(attachedNode);
			clonedForm = null; // destroy
		}, 100);
	})

	return attachedNode;
}
```

而对于已经插入的节点元素，不能使用`form.submit()`触发，需要手工改为：

```javascript
if(document.createEvent) {
  form.dispatchEvent(new Event('submit'));
} else {
  // IE
  var event = document.createEventObject();
  form.fireEvent("onsubmit", event);
}
```


克隆Form元素后对数据进行修改

### `autocomplete="off"`

对于一般的表单来说，这个属性即可关闭。

### 密码输入框，`autocomplete="new-password"`

这个一般是你的浏览器检测到当前表单里存在`type="password"`的时候，会触发密码管理器的菜单，通过new-password属性，浏览器认为此处不应使用旧的密码，一般会弹出密码建议。

### 去除掉表单的name属性

如一般的email、phone之类的会触发历史自动填充，去除掉可以解决一部分。

### 顽固派，`autocomplete="new"`

这个没有找到规律，且是在一个输入邮箱的位置，已经移除了name后还会出密码管理器，加上这个属性后自测Chrome（含Edge）、Safari显示完美，Firefox会出现密码管理器但是不会展示已保存的密码。


逐步根除inut表单聚焦时弹出自动填充

__大佬提供了正确修复链，请见[他的博客文章](https://blog.iks.moe/archives/AlphaSSL-2023-GlobalSign-R6-fullchain.html)__

> GlobalSign证书的兼容性表格：[https://support.globalsign.com/ca-certificates/root-certificates/globalsign-root-ubiquity](https://support.globalsign.com/ca-certificates/root-certificates/globalsign-root-ubiquity)

从GlobalSign官网可知，2024年1月29日起，使用了R6的根证书，兼容性在安卓上的最低版本为Android 10，因此如果 __希望兼容更旧的安卓或者Windows设备__ 暂时不要使用新申请AlphaSSL的方式。

> 更换了使用ZeroSSL的免费证书后，问题解决。

如果您不清楚该根证书能否在设备上兼容，可以访问如下地址在您的设备上，如果能够正常打开表明该根证书被浏览器信任，反正（或白屏）则不能：

https://valid.r6.roots.globalsign.com/

> 同理，如果您的根证书是r5，则把中间位改为r5


AlphaSSL的不同兼容性

有关于使用AlphaSSL证书在老Android设备上证书无法信任的问题

### 0. Docker安装Loki插件

```bash
# 安装插件
docker plugin install grafana/loki-docker-driver:latest --alias loki --grant-all-permissions
 
# 查看插件
docker plugin ls
 
# 更新插件
docker plugin disable loki --force
docker plugin upgrade loki grafana/loki-docker-driver:latest --grant-all-permissions
docker plugin enable loki
systemctl restart docker
 
# 卸载插件
docker plugin disable loki --force
docker plugin rm loki
```

### 1. Compose文件里增加日志指定

```yml
x-logging:
  &loki-logging
  driver: loki
  options:
    loki-url: "http://127.0.0.1:3100/loki/api/v1/push"
    max-size: "300m"
    max-file: "10"

# 需要的位置添加一行
# logging: *loki-logging
```


Compose情况

Docker容器接入Loki日志系统

1. 通过whistle的后台界面，下载rootca.crt文件
2. 在系统设置的搜索框里输入“证书”或“Certificates”，或者在开始的搜索里输入certmgr，打开证书管理器
3. 找到左侧边栏里的“Trusted Root Certification Authorities” （即受信任的根证书颁发者），右键，选择导入，找到刚刚下载的rootca.crt
4. 重启Chrome浏览器

然后再配置proxymanager之后，即可正常抓包Chrome浏览器的https请求。