一個奇怪的 Bug

非常感謝小趙同學給我反饋的這個 Bug ??

在開始講解前先考考你們 Javascript 基礎，單看程式碼你覺得它會輸出什麼內容？答案後面揭曉。

'Hello'.replace('ello', '#$&%')

話說某一天我突然收到一封郵件，一位同學跟我說我的站點炸程式碼了，嚇得我突然就從床上翻了個身——感覺充電線有點勒脖子我又翻了回去……

一波詳詢過後我瞭解到是我的自建部落格站點，也就是現在在寫文章的這個，它在某個頁面上會顯示一部分程式碼在頁面的下方。像這樣：

心情突然就不好了——死去的 Bug 突然又回來攻擊我了。。

這個問題其實之前出現過，但我後來給修好了，今天又出現了我第一時間就抓緊復現，但發現我自己訪問好像沒啥問題，定位到最後發現是我的服務端的渲染指令碼的問題。所以如果你是直接進入站點再瀏覽文章是不會遇到的，多半我之前就是這樣才以為它修復了吧。復現的方式也很簡單：你得直接由某個連結進入到某一篇博文才會觸發，這就很有意思啦！基本可以說明它是由於資料的原因才會觸發的。

因為我這個服務端渲染是自己用 Express 寫的，不是用的現成的框架，所以有的地方可能是會有問題的也正常。在一波探索之後定位到一處程式碼塊，除錯的結果非常奇怪。大致就是：

// 我的頁面模板
const template = fn();

// 渲染出來的頁面樣式
const css = fn();

// 當前訪問頁面所用到的 React state
const state = fn();

// 將所有內容由不同的錨點定位，替換到模板中去，每個錨點有且只有一個
const page = template
  .replace('css anchor', css)
  .replace('state anchor', state)

console.log(template.includes('state anchor'))
// true
console.log(page.includes('state anchor'))
// true
console.log(state.includes('state anchor'))
// false

見鬼了！頁面中的描點在替換後還是存在？然後我就在後面又給加了另外一條測試：

const page = template
  .replace('css anchor', css)
  .replace('state anchor', state)
  .replace('state anchor', 'f*** me')

console.log(template.includes('state anchor'))
// true
console.log(page.includes('state anchor'))
// false
console.log(state.includes('state anchor'))
// false

就挺奇怪的，我再替換了一次它就舒服了不見了。。接著我順著描點替換的位置找去，最終發現它在某段文字中的這個位置：

" Use <Space-E> to open explorer
" Using Coc-explorer
noremap <space>e :CocCommand explorer<CR>
" Close Coc-explorer if it is the only window
autocmd BufEnter * if (&ft == 'coc-explorer' && winnr("$") == 1) | q | endif

這段是我之前講 Vim 和 Coc 的文章。重點注意這個 winnr("$")，由於頁面在渲染中做了轉義處理，所以拿到的資料其實是 "$". 也就是兩個引號給替換成 " 了。而我上面用的是 replace 去替換的內容。而在 replace 方法的替換文字中你猜怎麼著？$& 代表的是匹配內容本身！所以我的實際替換結果會是：winnr("f*** mequot;)...

開始講解咯 ~

其實 Javascript 中字串的 replace 函式，在傳入引數為字串時是有特定的轉義字元（變數名）的。比如上面的，如果你寫 '$&' 那它就會把你的查詢符給替換進去。類似的還有其他一些：

$$
是插入一個 "$"。

$&
是插入匹配的子串。

$`
是插入當前匹配的子串左邊的內容。

$'
是插入當前匹配的子串右邊的內容。

$n
假如第一個引數是 RegExp 物件，並且 n 是個小於 100 的非負整數，
那麼插入第 n 個括號匹配的字串。提示：索引是從 1 開始。如果不存在第 n 個分組，
那麼將會把匹配到到內容替換為字面量。比如不存在第 3 個分組，就會用“$3”替換匹配到的內容。

$<Name>
這裡 Name 是一個分組名稱。如果在正規表示式中並不存在分組（或者沒有匹配），
這個變數將被處理為空字串。只有在支援命名分組捕獲的瀏覽器中才能使用。

當然你也可以不傳字串傳函式進去。這就不展開了，可以到這裡仔細瞭解：MDN - String.prototype.replace()

換到實際情況就是因為我插入狀態的錨點是個 script 標籤，所以 Html 的內容就給截斷了。跟跨站攻擊（XSS）的原理有點像吧，所以它才只是頁面下方出現了被斷開的程式碼塊而正文的顯示是正常的。

知道是什麼問題就好修了嘛！自己寫一個不會被任何字串轉義的替換函式就好了嘛。

具體怎麼寫你可以自己想想看 ?

然後就是開篇的問題，現在知道答案是什麼了嗎？

'Hello'.replace('ello', '#$&%')
// 'H#ello%'

好了今天就聊到這兒了~

一個奇怪的 Bug

一個奇怪的 Bug

相關文章