node與socket聊天室

node.js socket.io html javascript

tryit 2018-11-08 10:45:04 ‧ 2181 瀏覽

分享至

我自製了一個運用node、socket、html的聊天室。
然後我遇到一個麻煩
當客戶端在接收與傳輸訊息時，我是用append將文字貼上，也因此如果有人在裡面輸入程式碼的話，也會被執行，請問該如何清除這個效果呢？

看更多先前的討論...收起先前的討論...

weiclin iT邦高手 4 級 ‧ 2018-11-08 12:35:03 檢舉

先用這個處理過:
https://www.npmjs.com/package/js-htmlencode

tryit iT邦研究生 4 級 ‧ 2018-11-08 15:13:15 檢舉

多謝，真的可以

淺水員 iT邦大師 6 級 ‧ 2018-11-08 15:29:46 檢舉

其實瀏覽器用 textContent 寫入時
就可以避免掉標籤的問題
https://www.w3schools.com/jsref/prop_node_textcontent.asp

如果是 jQuery 可以參考下面的例子
=====================================

<div id="client"></div>
<script>
//寫入訊息時，以文字方式寫入即可
$("#client").append("<div></div>") //產生新的 div 作為容器
.find("div:last") //取得剛剛產生的 div
.text("<script>alert('hi')</script>"); //以文字方式寫入
</script>

weiclin iT邦高手 4 級 ‧ 2018-11-08 16:45:02 檢舉

樓上的方法不錯

tryit iT邦研究生 4 級 ‧ 2018-11-09 10:49:49 檢舉

好，那我在試驗一下，多謝了

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2018-11-10 02:13:54

最佳解答

下面是利用 textContent 與 innerHTML 的特性做成 html 特殊字元的轉換
至於函數名稱就沿用 https://www.npmjs.com/package/js-htmlencode 了

function htmlEncode(str)
{
    var tmp=document.createElement("div");
    tmp.textContent=str;
    return tmp.innerHTML;
}

function htmlDecode(str)
{
    var tmp=document.createElement("div");
    tmp.innerHTML=str;
    return tmp.textContent;
}

使用範例

var test_str="<script>alert('hi')</script>";

console.log(htmlEncode(test_str));
//輸出：&lt;script&gt;alert('hi')&lt;/script&gt;

console.log(htmlDecode(htmlEncode(test_str)));
//輸出：<script>alert('hi')</script>;