jquery :防止代码注入输入

Question

上下文

我正在创建一个很小的jQuery脚本:通过点击一个单词，用户可以删除它并重写他想要的东西。

最初的世界是在一个<span>中。单击后，<span>将被<input>替换。没有<form>，没有提交按钮，只有这个<input>。

我的问题

当按下enter键来验证<input>时，除了javascript注入之外，我的其余代码运行良好：

<input type="text" value="<script>alert('Evil Script')</script>">

我的问题

在按下<input>键时，防止我的enter执行这个邪恶脚本的最佳方法是什么？

请原谅我的问题，谢谢你的建议。

我的错误代码

​

jQuery(document).ready(function($) {

    initNom();

    function initNom() {
        var nomPerso = $('#nomPerso');
        var cheminNom = localStorage.getItem('userName');

        montrerNom();

        nomPerso.on('click', function() {
            $(this).replaceWith(
                    $('<input id="nomPerso" type="text" value="" placeholder="' + nomPerso.text() + '">')
            );
            $("#nomPerso")
                    .focus()
                    .on('keypress', function (e) {
                        if(e.which === 13) {

                            e.preventDefault();
                            //Disable textbox to prevent multiple submit
                            $(this).attr("disabled", "disabled");

                            sauverNom();
                            montrerNom();

                            $(this).replaceWith($('<span id="nomPerso">' + localStorage.getItem('userName') + '</span>'));

                            $(this).removeAttr("disabled");

                            initNom();

                        }
                    });
        });

        function sauverNom() {
            var nom = $('#nomPerso').val();

            if (typeof(Storage) !== "undefined" && nom) {
                localStorage.setItem('userName', nom);
            }
        }

        function montrerNom() {
            if (!cheminNom) {
                nomPerso.text('{Inserer_nom}');
            } else {
                nomPerso.text(cheminNom);
            }
        }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nomPerso"><script>alert('Evil Script')</script></div>

​

也是在CodePen：https://codepen.io/LaBriqueHurlante/pen/mwxjRL上

Answer 1

只需将内容替换为.text()而不是.html()，这样它就可以转义所有的html标记，并将它们显示为HTML。

第一个示例将将脚本标记转换为html实体，因此它将添加到DOM中，如

<script>alert('Evil Script')</script>

好/安全示例：

​

$(function() {
  $('span').on('click', function() {
    $(this).text( $('#replace').val() ); // GOOD
    
    //$(this).html( $('#replace').val() ); // BAD
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click on a word:</h3>
<hr>
<p>
  <span>Hello</span> <span>World</span>
</p>

<input type="text" id="replace" value="<script>alert('Evil Script')</script>" />

​

坏/危险示例

​

$(function() {
  $('span').on('click', function() {
    // $(this).text( $('#replace').val() ); // GOOD
    
    $(this).html( $('#replace').val() ); // BAD
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Click on a word:</h3>
<hr>
<p>
  <span>Hello</span> <span>World</span>
</p>

<input type="text" id="replace" value="<script>alert('Evil Script')</script>" />

​

现在，使用您在上次编辑中添加的代码，更改：

$(this).replaceWith(
    $('<input id="nomPerso" type="text" value="" placeholder="' + nomPerso.text() + '">')
);

通过以下方式：

$(this).replaceWith(
    $('<input id="nomPerso" type="text" value="" placeholder="">').attr('placeholder', nomPerso.text())
);

也改变了：

$(this).replaceWith($('<span id="nomPerso">' + localStorage.getItem('userName') + '</span>'));

通过以下方式：

$(this).replaceWith(
    $('<span id="nomPerso"></span>').text( localStorage.getItem('userName') )
);

这些更改将确保添加元素，并使用转义的html实体设置它们的属性，而不是将它们不安全地转储到DOM：https://codepen.io/anon/pen/JJLBLy中。

请注意，当您第一次运行<script>alert('Evil Script')</script>时，它将显示警报，因为它嵌入了HTML代码本身，但是当您将文本更改为HTML时，它将显示为实际文本。