# 2021-10 问题记录

2021/10/11 周一

# 1.汉字显示不全

问题： 在 iOS 上，有的汉字显示不出来是空白，而 windows 上模拟显示正常。

原因： 给 body 设置了特殊的字体，这种字体对汉字支持不好或者不支持中文，所以就显示的空白。

解决：

1.不使用这个字体（如果不是必须使用这个字体的话）
2.判断出现汉字的时候修改标签的字体设置（如：font-family: 'Hiragino Sans'）

# 2.移动端调试

使用 vConsole，直接 CDN 引入。

  <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
  <script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
  </script>

1
2
3
4
5

# 3.jQuery xss 漏洞

在大于或等于 1.2 且在 3.5.0 之前的 jQuery 版本中，即使执行了消毒（sanitize）处理，也仍会执行将来自不受信任来源的 HTML 传递给jQuery 的 DOM 操作方法（即html()、.append()等），从而导致 xss 漏洞。

模拟代码：

function test(n,jq){
  // CVE-2020-11022 '<img alt="<x" title="/><img src=x onerror=alert(1)>">'
  // CVE-2020-11023 '<option><style></option></select><img src=x onerror=alert(1)></style>'
  const sanitizedHTML = '<style><style /><img src=x onerror=alert(1)>';
  if(jq){
    $('#div').html(sanitizedHTML);
  }else{
    div.innerHTML=sanitizedHTML;
  }
}

1
2
3
4
5
6
7
8
9
10

虽然使用了包含 onerror 事件的 img 标签，但其实它们是放在属性或 style 元素内部，因此会绕过HTML清理器。而对比 jQuery 输出的 html 字符串，会发现还比原来多了一个闭合标签 </style>，</style> 闭合了<style> 标签，就会渲染后面的 <img> ，导致 xss。

栗子 (opens new window) 参考 (opens new window)

# 4.webpack 升级报错 webpack.NamedModulesPlugin is not a constructor

使用 webpack@5.58.1 的时候报错：TypeError: webpack.NamedModulesPlugin is not a constructor

配置文件如下，webpack.config.js：

const webpack = require('webpack');
const { merge } = require('webpack-merge');

const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: process.env.NODE_ENV,
  entry: {
    index: './app/index.ts',
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

问题原因：5.0 的时候，NamedModulesPlugin已经移除了

参考升级废弃的配置项 (opens new window)

NamedModulesPlugin → optimization.moduleIds: 'named'

optimization: {
 moduleIds: 'named'
}

1
2
3

修改配置：

const webpack = require('webpack');
const { merge } = require('webpack-merge');

const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: process.env.NODE_ENV,
  entry: {
    index: './app/index.ts',
  },
  optimization: {
    moduleIds: 'named'
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ],
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

PS. moduleIds 好像默认值就是 named？直接去掉 NamedModulesPlugin 就可以了。

# 5.Electron Preload 预加载

preload 可以指定在页面中其他脚本运行之前被加载的脚本。可以用来处理错误，添加启动页，暴露 Node API。

electron < 12，可以直接修改 window 对象：

// preload.js
const { ipcRenderer } = require('electron');

async function getAppInfo() {
  return await ipcRenderer.invoke('app/get_basic_info');
}

const JSBridge = {
  getAppInfo,
};

window.JSBridge = JSBridge;

1
2
3
4
5
6
7
8
9
10
11
12

electron >= 12，通过 contextBridge 安全的暴露，参考 (opens new window)：

// preload.js
const { ipcRenderer, contextBridge } = require('electron');

async function getAppInfo() {
  return await ipcRenderer.invoke('app/get_basic_info');
}

const JSBridge = {
  getAppInfo,
};

contextBridge.exposeInMainWorld('JSBridge', JSBridge);

1
2
3
4
5
6
7
8
9
10
11
12

# 6.CentOS6 下载 nvm fail

问题： 执行 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

报错信息如下：

=> Downloading nvm from git to '/root/.nvm'
=> Unknown option: -c
usage: git [--version] [--exec-path[=GIT_EXEC_PATH]] [--html-path]
           [-p|--paginate|--no-pager] [--no-replace-objects]
           [--bare] [--git-dir=GIT_DIR] [--work-tree=GIT_WORK_TREE]
           [--help] COMMAND [ARGS]
Failed to clone nvm repo. Please report this!

1
2
3
4
5
6
7

原因： CentOS6 用 yum 装的 git 版本太低，需要 v1.7.10 以上

git --version
# git version 1.7.1

1
2

← 2021-09 问题记录 2021-11 问题记录 →