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

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

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

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

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

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

Ответ 1

Вы можете закодировать < и > на свой HTML-эквивалент.

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

Как отображать теги HTML как обычный текст

Ответ 2

Вот немного script, используя 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;
}

Ответ 3

Однострочный:

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

Посмотрите, как работает:

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

Ответ 4

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

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

Надеюсь, это поможет!

Ответ 5

Используйте это,

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 или пользовательский script.

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

Ответ 6

Я использую эту функцию htmlentities ($ string):

$msg = "<script>alert("hello")</script> <h1> Hello World </h1>"
$msg = htmlentities($msg);
echo $msg;