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

前端

技术

生活

关于我

进入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推荐

```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请求。

如何在windows上配置信任证书

在Windows上信任抓包软件Whistle的证书

在命令行内依次执行下面的命令：

```bash
cd /tmp
apt -y download libcrypt1
dpkg-deb -x libcrypt1_1%3a4.4.25-2_amd64.deb  . // 请注意下载的最新的版本号
cp -av lib/x86_64-linux-gnu/* /lib/x86_64-linux-gnu/
apt -y --fix-broken install
```

修复WSL通过apt安装包时报错"/usr/bin/perl: error while loading shared libraries: libcrypt.so.1:"

## 重写URL

#### 自定义筛选表达式：

条件：

主机名 等于 cdn二级域

且

URI路径 不包含 `/file/<BUCKET_NAME>`

=> 重写到 Dynamic `concat("/file/<BUCKET_NAME>", http.request.uri.path)`

=> 保留查询

## 修改响应头

所有传入请求（自定义筛选应该也可以）

则

删除 `X-Bz-Content-Sha1`, `X-Bz-File-Id`, `X-Bz-File-Name`, `-Bz-Upload-Timestamp`

Cloudflare CDN反代Backblaze

#### 手工添加rc.local

```bash
cat <<EOF >/etc/rc.local
#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will "exit 0" on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

exit 0
EOF
```

```bash
chmod +x /etc/rc.local
systemctl enable --now rc-local # 无视警告即可
```