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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: Frontend - Page 1 | Spark1e的个人博客

### `autocomplete="off"`

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

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

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

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

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

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

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


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

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

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

如何在windows上配置信任证书

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

> 过时的浏览器兼容URL对象：[https://github.com/JakeChampion/polyfill-library/blob/master/polyfills/URL/polyfill.js](https://github.com/JakeChampion/polyfill-library/blob/master/polyfills/URL/polyfill.js)

> 对本文反向，即无法正常显示IDN的情况转换成punycode：[https://github.com/mathiasbynens/punycode.js](https://github.com/mathiasbynens/punycode.js)

## 什么是IDN？

> 相关讨论：[https://www.xudongz.com/blog/2017/idn-phishing/](https://www.xudongz.com/blog/2017/idn-phishing/)

IDN全称：Internationalized Domain Names，本意是为了让URL更适配各个地方的本地语言，但是这也造成了IDN homograph attacks（IDN同形异义字攻击，下文称“同态攻击”）。

举例说明，这样一个域名：

```
// 为避免误点击，使用Code块
аpple.com
```

如果这样的URL展示在页面上，不仔细查看其前往的实际地址或者复制粘贴到地址栏，是无法发现其实际的URL为：`https://xn--pple-43d.com/`

这是因为这个URL中的`а`使用 Cyrillic（U + 0430）而不是ASCII“a”（U + 0041）。

## 如何防御这一类问题

### 浏览器自身防御机制

针对这种问题，浏览器自身有自己的策略，比如：

- Chrome：[link](https://chromium.googlesource.com/chromium/src/+/main/docs/idn.md)
- Firefox: [link](https://wiki.mozilla.org/IDN_Display_Algorithm)

在现代浏览器上，凡是赋予到link的dom上的href或者是URL对象的，都会被转换到实际的Punycode([wiki](https://en.wikipedia.org/wiki/Punycode))上，那么最简单的解决方案即：

```javascript
const suspiciousUrl = "аpple.com";
const c = new URL(suspiciousUrl);
if(c.href === suspiciousUrl) {
	console.log("secure url");
} else {
	console.log("suspicious detected ! original url is: " + c.href);
}
```

如何从前端角度防御恶意IDN攻击

### JavaScript - Array

IE全系列不兼容`Array.prototype.find`，部分可能的旧版本也可能确实Array下的其他方法，提供一些polyfill供参考。

```javascript
// Polyfill for Array.prototype
(function () {
    if (!Array.prototype.find) {
        console.log("Polyfill 'array.find'");
        Array.prototype.find = function(callback) {
            if (this === null) {
              throw new TypeError('Array.prototype.find called on null or undefined');
            } else if (typeof callback !== 'function') {
              throw new TypeError('callback must be a function');
            }
            var list = Object(this);
            // Makes sures is always has an positive integer as length.
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            for (var i = 0; i < length; i++) {
              var element = list[i];
              if ( callback.call(thisArg, element, i, list) ) {
                return element;
              }
            }
          };
    }
    if (!Array.prototype.filter) {
        console.log("Polyfill 'array.filter'");
        Array.prototype.filter = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                if (callbackFn.call(this, this[i], i, this)) {
                    arr.push(this[i]);
                }
            }
            return arr;
        }
    }
    if (!Array.prototype.map) {
        console.log("Polyfill 'array.map'");
        Array.prototype.map = function (callbackFn) {
            var arr = [];
            for (var i = 0; i < this.length; i++) {
                /* call the callback function for every value of this array and push the returned value into our resulting array */
                arr.push(callbackFn(this[i], i, this));
            }
            return arr;
        }
    }
}())
```

> 如果你的环境允许，可以使用[polyfill.io](https://polyfill.io/v3/) 的工具来生成一个根据不同浏览器自动加载的polyfill包，但是请小心[供应链攻击](https://www.cloudflare.com/zh-cn/learning/security/what-is-a-supply-chain-attack/)

### CSS - Flex bug

#### using flex

flexbox 需要IE10+

#### `justify-content: center;`

需要在出现问题的容器上加上：

```css
flex-direction: column;
```

尽管无论是哪个轴，双center原则上应该是整个容器中心，但是IE下必须声明。

#### background image using data uri (SVG)

部分SVG特性不支持，保险起见，用URL链接吧。

> 不过base64的png url还可以。

2023年了，您还在兼容IE呢？

“被迫”兼容IE11遇到的一些问题和解决方案

不多说，直接先上代码，

```javascript
function copy2Clipboard(content) {
if (window.navigator && window.navigator.clipboard) {
  navigator.clipboard.writeText(content).then(() => {
    console.log('success')
  }, () => {
    console.log('failed')
    console.log(arguments)
  }).catch(e => {
    console.log(e)
  })
} else {
  var i = document.createElement("input")
  i.setAttribute("style", "position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;")
  document.body.appendChild(i)
  i.value = content
  var t = i.contentEditable,
    n = i.readOnly,
    o = document.createRange();
  i.contentEditable = !0
  i.readOnly = !1
  o.selectNodeContents(i);
  var a = window.getSelection();
  a.removeAllRanges()
  a.addRange(o)
  i.setSelectionRange(0, 999999)
  i.contentEditable = t
  i.readOnly = n
  window.document.execCommand("Copy")
  i.blur()
  document.body.removeChild(i)
  i = null
}
}
```

### 坑

1. 部分浏览器对navigator.clipboard支持很差，建议用else的代码；
2. __Safari如果要访问剪贴板，需要在可信的HTTPS环境下执行，自签的证书是无法调用`execCommand`/`avigator.clipboard.writeText`的__


##### 附录：一个之前写的有注释的版本

```javascript
function copyToClipboard(text) {
    if (text === "") return;
    var ipt = document.createElement('input'); // maybe you need to change `input` to `textarea`
    ipt.setAttribute(
        'style',
        'position:absolute;z-index:-1;width:1px;height:1px;top:-1px;opacity:0;-webkit-user-select: text;'
    )
    document.body.appendChild(ipt)
    ipt.value = text
    // ipt.select()
    if (/iphone|ipad|ios/.test(navigator.userAgent.toLowerCase())) {
        var oldContentEditable = ipt.contentEditable
        var oldReadOnly = ipt.readOnly
        var range = document.createRange()

        ipt.contentEditable = true
        ipt.readOnly = false
        range.selectNodeContents(ipt)

        var s = window.getSelection()
        s.removeAllRanges()
        s.addRange(range)

        ipt.setSelectionRange(0, 999999) // A big number, to cover anything that could be inside the element.

        ipt.contentEditable = oldContentEditable
        ipt.readOnly = oldReadOnly
    } else {
        ipt.select()
    }
    window.document.execCommand('Copy')
    ipt.blur()
    document.body.removeChild(ipt)
    ipt = null
}
```

有些浏览器对新API的兼容实在是太差啦！

JS复制到剪贴板之意料之外的坑

### 0. 初始化一个node项目

在希望的文件夹下`npm init`，填写必要的信息。

### 1. 安装所需要的依赖

```bash
npm i express -S
npm i @types/express @types/node typescript -D
# 如果你需要热重载的话，再加上
# npm i nodemon ts-node -D
```

### 2. 修改`tsconfig.json`

```json
{
	"rootDir": "./src",
	"outDir": "./dist"
}
```

### 3. 配置nodemon（无需热重载跳过此节）

在根目录新建`nodemon.json`

```json
{
    "ignore": [
        "**/*.test.ts",
        "**/*.spec.ts",
        "node_modules"
    ],
    "watch": [
        "src"
    ],
    "exec": "npm run preview",
    "ext": "ts"
}
```

> watch、exec字段均与接下来的配置有关，watch的是tsconfig中的rootDir，exec是接下来配置的"npm script"

### 4. 配置npm script

打开package.json， 修改script内的项目：

```json
"scripts": {
    "dev": "nodemon",
    "preview": "ts-node ./src/app.ts",
    "prestart": "npx tsc",
    "start": "node ./dist/app.js"
}
```

> 如果不需要热重载，可以不配置dev和preview命令。

### 5. 初始化一个简单的app.ts

在src下新建一个app.ts作为入口，内容举例如下：

```js
import express, { Application, Request, Response } from 'express';

const app: Application = express();

const PORT: number = 3001;

app.use('/', (req: Request, res: Response): void => {
    res.send('Hello my customer!');
});

app.listen(PORT, (): void => {
    console.log('SERVER IS UP ON PORT:', PORT);
});
```

### 6. 结束

项目内执行`npm run dev`即带有热重载，如果发布，执行`npm start`即可。

最小化新建一个Express.js + Typescript的后端项目

请点击右侧的链接进行尝试，注意不要真的发送哦，

- [iOS Click Me](sms:1069070087457&body=这只是一条测试信息，请不要发送哦)
- [Android Click Me](sms:1069070087457?body=这只是一条测试信息，请不要发送哦)

### 原理

`sms:<send-sms-to>(&/?)body=<sms-body>`

从QQ邮箱学来的还算实用的小技巧

如何利用URL实现呼起短信应用发短信

### Loading

- https://codepen.io/nikhil8krishnan/pen/rVoXJa
- https://samherbert.net/svg-loaders/

收集一些还不错的SVG资源

### 如何正确适配？

> Reference: [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#middleware-mode)

即，如果插件希望在`configServer`中增加中间件，需要通过`viteDevServer`下的`transfromIndexHtml`对html进行转换操作，具体可以参考我的插件的[此commit](https://github.com/iamspark1e/vite-plugin-auto-mpa-html/commit/54b4691eff66864631339cab1152b75b3cb86a9d)

### 对于没有适配中间件模式的插件

在我的插件v0.0.9版本及以前时，如果在React项目中（即，使用了`@vitejs/plugin-react`)，不影响正常打包，但是在dev模式，无法热重载。

对于之前的版本，可以通过关闭fastRefresh特性临时解决，即：

```javascript
export default defineConfig({
  plugins: [react({
    fastRefresh: false
  }), autoMpaHtmlPlugin({
    configName: "config.json",
    entryName: "main.jsx",
    sharedData: {},
    sourceDir: "src",
    enableDirectoryPage: true,
  })],
})
```

原：vite打包react报错can't detect preamble

Vite插件开发适配中间件模式(middleware mode)

> 问题代码：[Github - vite-plugin-auto-mpa-html](https://github.com/iamspark1e/vite-plugin-auto-mpa-html/blob/b66aadacf15c251925b01900a7e37f6cf453ba9e/tests/entry.test.ts#L66)

通过排除法发现，[mock-fs](https://github.com/tschaub/mock-fs)与Vitest的覆盖率引擎（c8/istanbul 都有此问题）有冲突，报错：

```
Cannot find package '@vitest/coverage-c8' imported from /my/code/path/to/vite-plugin-auto-mpa-html/node_modules/local-pkg/index.mjs
```

一般来说，找不到包是因为没有安装到node_modules下，但是反复确认、重装后确认在目录内，那么问题就是出现在其他地方。检查coverage时的输出发现，没有引用mock-fs的测试可以顺利通过。

进一步排查，考虑到是模拟目录下没有node_modules目录，在模拟目录下增加，即，将外部完整的node_modules挂载到mock目录下：

```javascript
const mockedProject = {
  "node_modules": mock.load(
    path.resolve(__dirname, '..', "node_modules")
  ),
}
```

覆盖率测试可以通过。

所以目前锁定，如果使用mock-fs虚拟一个目录，那么vitest在生成覆盖率时会读取mock-fs的目录，进而产生了此问题。

### Dive In

To be continued...

Spark1e

Category: frontend