将html显示为文本[重复]答案

【问题标题】：display html as text [duplicate]将html显示为文本[重复]
【发布时间】：2022-01-21 05:30:15
【问题描述】：

在我的游戏中，我将玩家列表从canvas更改为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);
}

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

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

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

如果显示在 html 中，此编码字符串与字符相同，但不会评估为 javascript

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我需要显示，而不是替换:)

【解决方案3】：

这方面已经有很好的答案，例如this one;

我偷了答案以节省您的点击次数；-)

此主题中还有其他您可能会感兴趣的答案。


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

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

【讨论】：