iT邦幫忙

2

node與socket聊天室

  • 分享至 

  • xImage

我自製了一個運用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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

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>;

我要發表回答

立即登入回答