我掌握了少數(shù)人才知道持續(xù)集成系統(tǒng)的日志密碼

作者：楠溪 2021-10-15 04:59:58

安全應(yīng)用安全

前段時(shí)間在使用 Travis CI 的時(shí)候發(fā)現(xiàn)它的部署日志包含了很多帶色彩的日志。

[[429062]]

前言

前段時(shí)間在使用 Travis CI 的時(shí)候發(fā)現(xiàn)它的部署日志包含了很多帶色彩的日志。

并且我們知道，在使用命令行終端的時(shí)候也會(huì)出現(xiàn)這些可愛的色彩。

當(dāng)然我不是為了吹它而吹它，它是有實(shí)際的作用的，能夠幫助我們快速定位問(wèn)題!

對(duì)此我就產(chǎn)生了好奇，Travis CI 是怎么把這些彩色日志搬到瀏覽器的?

我猜想肯定不是通過(guò)對(duì)關(guān)鍵字詞特征識(shí)別來(lái)做的，因?yàn)槟菢犹?low 了。

進(jìn)行了查詢后，查到了一個(gè)終于查到了關(guān)鍵詞，它就是 ANSI escape sequences。

ANSI轉(zhuǎn)義序列是帶內(nèi)信令的標(biāo)準(zhǔn)，用于控制終端和終端仿真器上的光標(biāo)位置，顏色和一些其他選項(xiàng)。--維基百科

通俗地講，就是那些在終端輸出彩色的文字中包含了一些轉(zhuǎn)義序列字符，只不過(guò)我們看不到，被終端進(jìn)行了解析。然后終端將這些字符解析成了我們現(xiàn)在看到的形形色色多彩的日志(包括一些顏色、下劃線、粗體等)。

例如，我們?cè)诮K端進(jìn)行npm 的安裝，git 分支的切換，包括運(yùn)行報(bào)錯(cuò)的時(shí)候都能看到。

正是有了這些色彩，讓我們的調(diào)試工作效率大大提高，一眼便能看到哪些命令出錯(cuò)了，以及如何解決的方案。

現(xiàn)在我們要做的就是如何將這些色彩日志輸出到瀏覽器端。而進(jìn)行這個(gè)步驟之前，我們得先知道，這些ANSI轉(zhuǎn)義序列的形態(tài)是什么樣子的?

根據(jù)wiki我們可以知道 ANSI 轉(zhuǎn)義序列可以操作很多功能，例如光標(biāo)位置、顏色、下劃線和其他選項(xiàng)。下面我們就顏色部分來(lái)進(jìn)行講解。

ANSI 轉(zhuǎn)義序列

ANSI 轉(zhuǎn)義序列也是跟隨著終端的發(fā)展而發(fā)展，顏色的規(guī)范也是隨著設(shè)備的不同有所區(qū)別。例如在早期的設(shè)備只支持 3 / 4 Bit ，支持的顏色分別為 8 / 16 種。

ANSI 轉(zhuǎn)義序列大多數(shù)以 ESC 和'['開頭嵌入到文本中，終端會(huì)查找并解釋為命令，而不是字符串。

ESC 的 ANSI 值為 27 ，8進(jìn)制表示為 \033 ，16進(jìn)制表示為 \u001B。

3/4 bit

原始規(guī)格只有 8/16 種顏色。

比如ESC[30;47m 它是以 ESC[ 開頭 m 結(jié)束，中間為code碼，以分號(hào)進(jìn)行分割。

color 取值為30-37，background 取值為 40-47。例如 :

echo -e "\u001B[31m hello"

(如果想要清除顏色就需要使用 ESC [39;49m(某些終端不支持) 或者ESC[0m )

后來(lái)的終端增加了直接指定 90-97 和 100-107 的“明亮”顏色的能力。

效果如下：

以下是其色彩對(duì)照表：

8-bit

后來(lái)由于256色在顯卡上很常見，因此添加了轉(zhuǎn)義序列以從預(yù)定義的256種顏色中進(jìn)行選擇，也就是說(shuō)在原來(lái)的書寫方式上增加了新的一位來(lái)代表更多的顏色。

ESC[ 38;5;<n> m // 設(shè)置字體顏色 
ESC[ 48;5;<n> m // 設(shè)置背景顏色 
    0-7:  standard colors (as in ESC [ 30–37 m) 
    8-15:  high intensity colors (as in ESC [ 90–97 m) 
    16-231:  6 × 6 × 6 cube (216 colors): 16 + 36 × r + 6 × g + b (0 ≤ r, g, b ≤ 5) 
   232-255:  grayscale from black to white in 24 steps

在支持更多色彩的終端中，例如:

echo -e "\u001B[38;5;11m hello"

代表輸出黃色字體。

echo -e "\u001B[48;5;14;38;5;13m hello"

代表輸出藍(lán)色背景，粉紅色字體。

以下是其色彩對(duì)照表：

24-bit

再往后發(fā)展就是支持 24 位真彩的顯卡，Xterm， KDE 的Konsole，以及所有基于 libvte 的終端(包括GNOME終端)支持24位前景和背景顏色設(shè)置。

ESC[ 38;2;<r>;<g>;<b>m // 前景色 
ESC[ 48;2;<r>;<g>;<b>m // 背景色

例如：

echo -e "\u001B[38;2;100;228;75m hello"

輸出綠色的字體代表 rgb(100,228,75)。

解析工具

我們知道了轉(zhuǎn)義的規(guī)范后，那么我們需要將 ANSI 字符進(jìn)行解析。

由于規(guī)范比較多，因此我們先調(diào)研一下在 js 中常用的色彩庫(kù)，來(lái)進(jìn)行一個(gè)小小的探索。

由于 3 / 4bit 的兼容性更好，大多數(shù)工具(如chalk)會(huì)采用這 8 / 16 色來(lái)做高亮，因此我們先實(shí)現(xiàn)一個(gè) 8 / 16 色的解析。

這里參考了 ansiparse 這個(gè)解析庫(kù)：

核心思路為：

const ansiparse = require('ansiparse') 
 
const ansiStr = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m" 
 
const json = ansiparse(ansiStr) 
console.log(json) 
 
// json輸出如下： 
[ 
  { foreground: 'blue', text: 'Hello ' }, 
  { text: ' World ' }, 
  { foreground: 'red', text: '! ' } 
]

然后我們可以寫一個(gè)函數(shù)來(lái)遍歷上面解析得到的 JSON數(shù)組，輸出 HTML。

function createHtml(ansiList, wrap = '') { 
    let html = ''; 
    for (let i = 0; i < ansiList.length; i++) { 
        const htmlFrame = ansiList[i]; 
 
        const {background = '', text, foreground = ''} = htmlFrame; 
        if(background && foreground) { 
            if(text.includes('\n')) { 
                html += wrap; 
                continue; 
            } 
            html += fontBgCode(text, foreground, background); 
            continue; 
        } 
        if (background || foreground) { 
            const color = background ? `bg-${background}` : foreground; 
            let textColor = bgCode(text, color); 
 
            textColor = textColor.replace(/\n/g, wrap); 
             
            html += textColor; 
            continue; 
        } 
        if (text.includes('\n')) { 
            const textColor = text.replace(/\n/g, wrap); 
            html += textColor; 
            continue; 
        } 
        html += singleCode(text); 
    } 
    html += '' 
    return html; 
} 
 
function fontBgCode(value, color, bgColor) { 
    return `<span class="${color} bg-${bgColor}">${value}</span>` 
} 
 
function bgCode(value, color) { 
    return `<span class="${color}">${value}</span>` 
} 
 
function singleCode(value) { 
    return `<span>${value}</span>` 
}

使用示例如下：

const str = "\u001B[34mHello \u001B[39m World \u001B[31m! \u001B[39m"; 
 
console.log(createHtml(parseAnsi(str))); 
 
// <span class="blue">Hello</span><span> World</span><span class="red">!</span>

部署實(shí)戰(zhàn)

有了上面的部分我們就來(lái)用一個(gè)簡(jiǎn)單的demo實(shí)際演示一下部署日志吧!

// 項(xiàng)目目錄結(jié)構(gòu) 
demo 
 |- package.json 
 |- index.html 
 |- webpack.config.js 
 |- /src 
   |- index.js 
index.js 
build.sh

我們?cè)?index.js 中啟動(dòng)一個(gè) build 腳本，來(lái)模擬一下我們真實(shí)的部署場(chǎng)景。

const { spawn } = require('child_process'); 
const cmd = spawn('sh', ['build.sh']); 
 
cmd.stdout.on('data', (data) => { 
  console.log(`stdout: ${data}`); 
}); 
 
cmd.stderr.on('data', (data) => { 
  console.log(`stderr: ${data}`); 
}); 
 
cmd.on('close', (code) => { 
  console.log(`child process exited with code ${code}`); 
}); 
// build.sh 
 
cd demo 
 
npx webpack

我們?cè)诮K端嘗試一下，控制臺(tái)輸入 node index.js

發(fā)現(xiàn)在輸出的日志中，并沒有看到對(duì)應(yīng)的色彩。

為什么從 child_process 為什么無(wú)法輸出色彩，而我們?nèi)绻诮K端中直接打包項(xiàng)目卻能夠輸出色彩呢?

Why?

第一反應(yīng)就是去查找根源，也就是使用頻率最高的幾個(gè)色彩輸出的庫(kù)。

以簡(jiǎn)單的方式給控制臺(tái)的輸出標(biāo)記顏色。

https://github.com/Marak/colors.js

https://github.com/chalk/chalk

在看了webpack-cli的源碼后，查到它是用了colorette作為色彩輸出庫(kù)的。

那么我們就來(lái)查看一下colorette的源碼一探究竟。

在入口文件的開頭就看到一個(gè)變量isColorSupported來(lái)判斷是否支持色彩輸出。

https://github.com/jorgebucaran/colorette/blob/main/index.js#L17

// colorette/index.js 
import * as tty from "tty" 
 
const env = process.env || {} 
const argv = process.argv || [] 
 
const isDisabled = "NO_COLOR" in env || argv.includes("--no-color") 
 
const isForced = "FORCE_COLOR" in env || argv.includes("--color") 
const isWindows = process.platform === "win32" 
const isCompatibleTerminal = tty && tty.isatty && tty.isatty(1) && env.TERM && env.TERM !== "dumb" 
const isCI = "CI" in env && ("GITHUB_ACTIONS" in env || "GITLAB_CI" in env || "CIRCLECI" in env) 
 
export const isColorSupported = !isDisabled && (isForced || isWindows || isCompatibleTerminal || isCI)

可以看到這種工具判斷了很多條件，來(lái)對(duì)我們的輸出流進(jìn)行處理。

在以上條件成立下，才會(huì)輸出 ANSI 日志。在不滿足以上情況的條件下，就會(huì)切換輸出更容易解析的方式。

const isWindows = process.platform === "win32"

參考：https://stackoverflow.com/questions/8683895/how-do-i-determine-the-current-operating-system-with-node-js

dumb: "啞終端"

啞終端指不能執(zhí)行諸如“刪行”、“清屏”或“控制光標(biāo)位置”的一些特殊ANSI轉(zhuǎn)義序列的計(jì)算機(jī)終端

參考：https://zh.wikipedia.org/wiki/%E5%93%91%E7%BB%88%E7%AB%AF

也就是說(shuō)我們的 child_process 的輸出流關(guān)閉了終端模式(TTY)，上面的四種情況都不滿足。所以我們得不到帶有 ANSI 的色彩日志。

How?

我們可以顯示傳入環(huán)境變量 FORCE_COLOR=1 或者命令帶上參數(shù) --color 強(qiáng)制啟動(dòng)顏色來(lái)解決這個(gè)問(wèn)題。

這樣我們就拿到了帶有 ANSI 顏色信息的輸出文本，最終解析得到 HTML。

<div>asset <span class="green">main.js</span><span> 132 bytes </span><span class="yellow">[compared for emit]</span><span> </span><span class="green">[minimized]</span> (name: main)</div><div><span>./src/index.js</span><span> 289 bytes </span><span class="yellow">[built]</span><span> </span><span class="yellow">[code generated]</span></div><div></div><div><span class="yellow">WARNING</span><span> in </span>configuration</div><div>The <span class="red">'mode' option has not been set</span>, webpack will fallback to 'production' for this value.</div><div><span class="green">Set 'mode' option to 'development' or 'production'</span> to enable defaults for each environment.</div><div>You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/</div><div></div><div>webpack 5.53.0 compiled with <span class="yellow">1 warning</span> in 201 ms</div><div></div>