将HTML作为文本显示

Question

在我的游戏中，我将玩家列表从画布更改为HTML格式，这导致出现了一个漏洞，任何玩家都可以为自己取一个名字，并且在名字中插入JS代码，例如：<script>alert(1);</script> 当玩家出现在玩家列表中时，这段代码会对所有的玩家起作用。问题是，如何使HTML不起作用，让玩家输入的所有内容都显示为文本？HTML中的pre标签没有帮助到我 :(

向玩家列表中添加玩家的代码：

const drawLeaderboard = function() {
    if (!settings.showLeaderboard || !leaderboard.items) return wjQuery('#leaderboard').css('display', 'none');
    else wjQuery('#leaderboard').css('display', 'block');
    
    
    let text, vip = false,
        isMe = false;
    
    const texts = {
        all: '',
        emoji: ''
    };
    
    for (let i = 0; i < leaderboard.items.length; i++) {
        if (leaderboard.type == 'text')
            text = leaderboard.items[i];
        else
            text = leaderboard.items[i].name,
            isMe = leaderboard.items[i].me,
            vip = leaderboard.items[i].vip;
        
        texts.all += `<div class="item"${isMe ? 'style="color: #faa;"' : ''}>${text.trim()}</div>`;
        texts.emoji += `<div class="item">${vip ? '' : ''}</div>`;
    }
    
    wjQuery('#leaderboard > .content > .items').html(texts.all);
    wjQuery('#leaderboard > .content > .emoji').html(texts.emoji);
}

- TopoR

Answer 1

这是跨站脚本攻击的一个示例。我们可以通过使用正则表达式对 HTML 实体进行编码来防止它。

var encodedStr = $('#inputText').replace(/[\u00A0-\u9999<>\&]/g, function(i) {
   return '&#'+i.charCodeAt(0)+';';
});

如果在HTML中显示这个编码字符串，它与字符相同，但不会被解释为JavaScript。

- Mohana Sundaram S

Answer 2

这方面已经有很好的答案了，比如这个；

我为了节省您的点击，偷了这个答案;-)

在这个帖子中还有其他答案，您可能也会感兴趣。

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

- MarcRo

Answer 3

你可以简单地用空字符串替换所有标签。看这个例子：

const regex = /<\/?[a-zA-Z]+>/g;
const input = document.querySelector('input');
const newValue = input.value.replaceAll(regex, '');
console.log(newValue);

<input type="text" value="My name is ... <script>alert('Trying to hack...');</script>">

- Reza Saadati

---

我需要展示，而不是替换 :) - TopoR