Question

上下文

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

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

我的问题

按enter键验证<input>时，我的其余代码效果很好，但javascript注入除外：

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

我的问题

在按<input>键时阻止enter执行此恶意脚本的最佳方法是什么？

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

我的错误代码

＆＃13;

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);
            }
        }
    }
});

＆＃13;

<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>

＆＃13;

同样在CodePen：https://codepen.io/LaBriqueHurlante/pen/mwxjRL

Answer 1

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

第一个示例将脚本标记转换为html实体，因此它将作为

添加到DOM中

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

GOOD / SAFE 示例：

$(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>" />

BAD / DANGEROUS 示例

$(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

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

js - jquery：阻止代码注入的输入

上下文

我的问题

我的问题

我的错误代码

1 个答案: