javascript - js-jquery : prevent input from code injection

Question

上下文

我正在创建一个微型 jQuery 脚本:通过单击一个词，用户可以将其删除并重写他想要的内容。

原始世界在<span> .单击时，<span>被 <input> 取代.没有<form> , 没有提交按钮，只有这个 <input> .

我的问题

当按下 enter 时验证 <input> 的 key ，我的其余代码运行良好，除了 javascript 注入(inject):

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

我的问题

防止我的 <input> 的最佳方法是什么？按 enter 时执行此邪恶脚本 key ？

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

我的错误代码

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> 时它将显示为实际文本。