使用 Vue.js 解析 Markdown 的小坑

前面我們有文章寫到在 Vue.js 使用 markdwon 來解析評論，但是今天在優化的時候其實又會遇到一個問題：因為評論的內容其實是用戶輸入的，哪怕是我們在服務端做了一些過濾，以此來防止 xss 攻擊。但是這樣是不夠的，因為如果我們將 markdown 內容交給 Vue.js 來處理的話，又有可能是因為這些評論內容本身包含一些奇怪的字元串而導致整個程序解析失敗，出現白屏。

復現一下問題

我們在綁定一個 comment 組件的時候通常會這樣：

<comment :comment={{ $comment }}></comment>

$comment 就是我們後端直接輸出的一個 comment 對象，包含了 comment 的各個屬性，比如 body ，user_id 等等。注意這樣直接這樣使用 {{}} 輸出的話， Laravel 會自動轉成 JSON 格式的。

然後在 Comment.vue 組件中，這樣：

export default { props: [comment],}

在 Vuejs 中通過 props 來接收。但是注意的是，一旦我們使用這種形式傳值，comment 的數據就是一個對象，Vuejs 會嘗試檢查這這個對象是否是正確的 JSON Object。所以問題就出來了，因為我們是直接在後端使用 json_encode() 輸出的，這跟 JS 的檢查有細微的區別，而且這個時候又因為包含了用戶的評論內容，有時候就會因為特殊字元問題引起檢查失敗從而報 invalidate expression 的錯誤！

解決方案

解決方案是什麼呢？很簡單，在傳 comment 對象的時候，只關注數值或者正規的英文字元，比如：

<comment :comment={id: {{$comment->id}},user_id:{{$comment->user_id}}}></comment>

其他的數據通過一個單獨的 props 傳遞

<comment body={{ $comment->body }}></comment>

這個時候，body 就是一個普通的字元串了，所以就可以避免那個 invalidate expression 的錯誤。

關注 codecasts 公眾號，每天分享技術小文，不定期送書。