js - 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 作为

&lt;script&gt;alert('Evil Script')&lt;/script&gt;

良好/安全示例：

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

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

js - jquery : prevent input from code injection

javascript

jquery

input

code-injection

上下文

我的问题

我的问题

我的密码错误