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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

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

> 过时的浏览器兼容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...

一个意料之外的包冲突

使用Vitest生成覆盖率报告时报错的解决方案

### 0. 使用的webpack环境

由于基于webpack4，因此[这一步](https://www.netlifycms.org/docs/custom-widgets/#writing-custom-widgets-as-a-separate-package)npm安装的包应为：

```bash
npm install --save-dev babel-loader@7 babel-core babel-plugin-transform-class-properties babel-plugin-transform-export-extensions babel-plugin-transform-object-rest-spread babel-preset-env babel-preset-react cross-env css-loader@5.2.7 html-webpack-plugin@4 netlify-cms react source-map-loader@1 style-loader@2 webpack@4 webpack-cli@4 webpack-serve
```

Netlify CMS开发widget

## 什么是合字(ligatures)？

> 在西方字体排印学中一般表示将多于一个字母的合成一个字形。如印刷品中常常将拉丁字母两个字母fi的i上一点常与f的一钩合并，而德语字母ß原为ss等等。 —— [维基百科](https://zh.wikipedia.org/wiki/%E5%90%88%E5%AD%97)

合字首先是服务于西方字体的印刷的，一般是由于两个字母的间距不易调大，此时两个字母存在易重叠的部分。早期电脑软件无法进行合字替换，但现在由于OpenType技术流行，合字逐渐恢复了使用。例如苹果设备最常见的PingFang SC。

## 合字比较常见的情况

fish (PingFang SC)
fish (Microsoft YaHei)
fish (Roboto)
fish (Helvetica)
fish (Times)

> 有条件的同学可以在不同系统（如Mac和Win下对比看看）

## CSS强制不合字

```css
font-variant-ligatures: none;
```

> font-variant-ligatures 还有很多有趣的值，可以参见[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures)

当然，这个属性也需要参考其兼容性，[Caniuse](https://caniuse.com/?search=font-variant-ligatures)

还有一种另辟蹊径的办法，就是从成因来看，字符之间距离过近导致合字更适合打印，且美观，那么我拉长字符间距，也可以避免合字。

## Dive In

### 哪个部分使合字生效？

首先得是OpenType渲染，其次，这个合字有对应的Unicode字符，所以此处涉及了一对多的转换。

### 哪些语言有合字？

根据维基百科，常见的有：

- 拉丁文字
- 丹麦语和挪威语
- 法语
- 德语
- 冰岛语
- 瑞典语

非拉丁语言的文字，如汉字和日文，虽然存在合字，如“招财进宝合体字biang”

另外值得注意的是，有一些计量单位也存在合字的情况，如“㎉”。

Spark1e

Category: frontend