在Javascript中防止HTML和脚本注入

Assume I have a page with an input box. The user types something into the input box and hits a button. The button triggers a function that picks up the value typed into the text box and outputs it onto the page beneath the text box for whatever reason.

假设我有一个带输入框的页面。用户在输入框中键入内容并点击按钮。该按钮触发一个函数，该函数选取键入文本框的值，并将其输出到文本框下面的页面，无论出于何种原因。

Now this has been disturbingly difficult to find a definitive answer on or I wouldn't be asking but how would you go about outputting this string:

现在，令人不安的是难以找到明确的答案，或者我不会问，但你将如何输出这个字符串：

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

So that neither the script is executed nor the HTML element is displayed?

这样既不执行脚本也不显示HTML元素？

What I'm really asking here is if there is a standard method of avoiding both HTML and Script injection in Javascript. Everyone seems to have a different way of doing it (I'm using jQuery so I know I can simply output the string to the text element rather than the html element for instance, that's not the point though).

我在这里真正要问的是，是否存在一种在Javascript中避免HTML和脚本注入的标准方法。每个人似乎都有不同的方式（我使用jQuery所以我知道我可以简单地将字符串输出到文本元素而不是html元素，但这不是重点）。

5 个解决方案

#1

You can encode the < and > to their HTML equivelant.

您可以将 <和> 编码为其HTML equivelant。

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

How to display HTML tags as plain text

如何将HTML标记显示为纯文本

#2

Here is a little script, using jQuery, that strips out all html and keeps only the text:

这是一个使用jQuery的小脚本，它删除所有html并仅保留文本：

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

This can be done in pure javascript(es6) if the jQuery inclusion is a problem:

如果jQuery包含是一个问题，这可以在纯javascript（es6）中完成：

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

#3

A one-liner:

单行：

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

See it work:

看它工作：

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

#4

Try this method to convert a 'string that could potentially contain html code' to 'text format':

尝试使用此方法将“可能包含html代码的字符串”转换为“文本格式”：

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

Hope this helps!

希望这可以帮助！

#5

Use this,

用这个，

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

On the backend, for java , Try using StringUtils class or a custom script.

在后端，对于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();
    }

#1