Usage of unescapeHTML

Posted Jun 16, 20202 min read

  1. Scenario:There are special characters in the back-end results

  2. Concept:unescapeHTML converts character entities into <> & "'

  3. Usage scenario:The backend displays the content that has been escaped to the page;

          For example &lt;script&gt;alert(2);&lt;/script&gt;

After receiving js:

  a. If unescapeHTML is used in the front end, you can directly dom operation and display the label to the page. A
  b. If there is no unescapeHTML in the front end, <script>alert(2);</script> is output as it is, but it is not executed at this time.
  1. Function
    unEscapeHtml = content => {

    let ct = content;
    if(!ct) return'';
    const reg = /\n/;
    if(reg.test(ct)) {
    ct = ct.replace(/\n/g,'');
    }
    const div = document.createElement('div');
    div.style.display ='none';
    div.innerHTML = ct;
    return div.innerText;

};
Call:this.unEscapeHtml('String to be escaped')

  1. Introduced from the util package
    import {util} from'@/util';
    util.unEscapeHtml('String to be escaped')
    Note:This method can also automatically format the string structure, sometimes does not take effect

  2. escapeHTML converts <> & "'into character entities
    scenes to be used:

    (1) The user enters in the page(such as the input box) , js submits the content to the backend for saving
    (2) When displaying, the back-end returns the string to the front-end; after receiving the js:

      a, Use escapeHTML to convert the string to &lt;script&gt;alert(2);&lt;/script&gt; At this time, the browser will be able to parse it correctly, because after the browser receives the entity character, it will be converted into the corresponding angle brackets, etc. . A
      b. Without using escapeHTML, as soon as the browser sees the <, it is considered to be the beginning of the html tag, and the previous string is directly executed as a script. This is the xss vulnerability.