js - jquery : 防止输入代码注入

Question

上下文

我正在创建一个小型 jQuery 脚本：通过单击一个单词，用户可以擦除它并重写他想要的内容。

原始世界位于<span>。单击时，<span> 将替换为<input>。 没有<form>，没有提交按钮，只有这个<input>。

我的问题

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

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

我的问题

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

请原谅我天真的问题，并感谢您的建议。

我的代码错误

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

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