Предотвращение инъекций HTML и скриптов в Javascript

Предположим, у меня есть страница с полем ввода. Пользователь вводит что-то в поле ввода и нажимает кнопку. Кнопка запускает функцию, которая по какой-либо причине выбирает значение, введенное в текстовое поле, и выводит его на страницу под текстовым полем.

теперь это было тревожно трудно найти окончательный ответ, или я бы не спрашивал, но как бы вы могли вывести эту строку:

<script>alert("hello")</script> <h1> Hello World </h1>

чтобы ни один скрипт не выполнялся ни элемент HTML не отображается?

то, что я действительно спрашиваю здесь, Если есть стандартный метод предотвращения инъекции HTML и скрипта в в JavaScript. Кажется, у всех есть другой способ сделать это (я использую jQuery, поэтому я знаю, что могу просто вывести строку в текст элемент, а не HTML-код элемент, например, это не имеет значения).

5 ответов


вы можете кодировать < и > к их HTML equivelant.

html = html.replace(/</g, "&lt;").replace(/>/g, "&gt;");

как отображать HTML-теги в виде обычного текста


вот небольшой скрипт, использующий jQuery, который удаляет весь html и сохраняет только текст:

function( html ) {
    return $( $.parseHTML(html) ).text();
}

Это можно сделать в чистом javascript (es6), если включение jQuery является проблемой:

function textFromHtmlString( arbitraryHtmlString ) {
    const temp = document.createElement('div');
    temp.innerHTML = arbitraryHtmlString;
    return temp.innerText;
}

один-лайнер:

var encodedMsg = $('<div />').text(message).html();

посмотреть, как это работает:

https://jsfiddle.net/TimothyKanski/wnt8o12j/


использовать это,

function restrict(elem){
  var tf = _(elem);
  var rx = new RegExp;
  if(elem == "email"){
       rx = /[ '"]/gi;
  }else if(elem == "search" || elem == "comment"){
    rx = /[^a-z 0-9.,?]/gi;
  }else{
      rx =  /[^a-z0-9]/gi;
  }
  tf.value = tf.value.replace(rx , "" );
}

на бэкэнде для java попробуйте использовать класс StringUtils или пользовательский скрипт.

public static String HTMLEncode(String aTagFragment) {
        final StringBuffer result = new StringBuffer();
        final StringCharacterIterator iterator = new
                StringCharacterIterator(aTagFragment);
        char character = iterator.current();
        while (character != StringCharacterIterator.DONE )
        {
            if (character == '<')
                result.append("&lt;");
            else if (character == '>')
                result.append("&gt;");
            else if (character == '\"')
                result.append("&quot;");
            else if (character == '\'')
                result.append("&#039;");
            else if (character == '\')
                result.append("&#092;");
            else if (character == '&')
                result.append("&amp;");
            else {
            //the char is not a special one
            //add it to the result as is
                result.append(character);
            }
            character = iterator.next();
        }
        return result.toString();
    }

попробуйте этот метод, чтобы преобразовать строку, которая потенциально может содержать HTML-код в текстовом формате':

$msg = "<div></div>";
$safe_msg = htmlspecialchars($msg, ENT_QUOTES);
echo $safe_msg;

надеюсь, что это помогает!