html 이스케이프 처리

예를 들어: test 이 코드를 텍스트로 페이지에 그대로 출력하려면 정상적인 방식대로 하면 분명히 의미가 바뀌고 페이지에서text만 볼 수 있다.그렇다면 예상한 효과를 내려면 어떻게 해야 할까?
html 라벨을 공부할 때 코드를 그대로 출력하려면 라벨pre+code로 처리할 수 있음을 알 수 있다.그러나 이런 방식은 처리할 수 없다:html 라벨.
1. vue 프레임워크를 통해 다음과 같은 이점을 얻을 수 있습니다.

    export default {
        data () {
            return {
                html: '<span>test</span>'
            }
        }
    }

2. react 프레임워크를 통해 다음과 같은 이점을 얻을 수 있습니다.

import React, { PureComponent } from 'react'

class Test extends PureComponent {
  constructor (props) {
      super(props)
      
      this.state = {
         html: 'test'
      }
  }
    
  render () {
   const { content } = this.state

    return (
      

        

      
    )
  }
}

3. html 태그 하나로 실현하려면 가능한가요?답은 가능하며 xmp 라벨을 사용할 수 있습니다.이 탭의 역할: 내용을 문자열로 출력합니다.

<span>test</span>

그러나 이 탭은 W3C에서 폐기되었지만, 대형 브라우저들은 여전히 이 탭을 지원합니다.왜 폐기되었을까?폐기된 데는 틀림없이 폐기된 이유가 있을 것이다.만약 이 라벨을 반드시 사용해야 한다면 주의해야 한다.

템플릿에 라벨이 포함되어 있으면 라벨 끝 문자가 혼란스러워지기 때문에 이 방식으로 템플릿을 저장할 때 끝 라벨을 포함할 수 없습니다.

xmp원소는 반드시 바디의 자손원소가 되어야 한다.

4. 라벨이나 프레임의 능력을 빌리지 않고 어떻게 스스로 실현할 수 있을까?

// html     
function htmlEncode (text) {
    var isHtml = /[\x00`>": ">",
            "\x00": "",
            "'": "'",
            '"': """,
            "`": "`"
        };
        return charEntities[ch] || (charEntities[ch] = "" + ch.charCodeAt(0) + ";");
    }
};

let htmlCon = 'test';
document.querySelector('#html_con').innerHTML = htmlEncode(htmlCon);

5. 특별히 xmp,vue 원본을 보러 갔는데 어떻게 이루어졌는지 보고 싶어요.그러나 react에서 어떻게 이루어졌는지만 찾았고 react 디렉터리가 너무 많아서 비교적 빙빙 돌려서 찾지 못했다.
node-modeles/react-dom/cjs/react-dom-server.browser.development.js에서 631줄입니다.

// code copied and modified from escape-html
/**
 * Module variables.
 * @private
 */

var matchHtmlRegExp = /["'&<>]/;

/**
 * Escapes special characters and HTML entities in a given html string.
 *
 * @param  {string} string HTML string to escape for later insertion
 * @return {string}
 * @public
 */

function escapeHtml(string) {  
  var str = '' + string;
  var match = matchHtmlRegExp.exec(str);

  if (!match) {
    return str;
  }

  var escape = void 0;
  var html = '';
  var index = 0;
  var lastIndex = 0;

  for (index = match.index; index < str.length; index++) {
    switch (str.charCodeAt(index)) {
      case 34:
        // "
        escape = '"';
        break;
      case 38:
        // &
        escape = '&';
        break;
      case 39:
        // '
        escape = '''; // modified from escape-html; used to be '''
        break;
      case 60:
        // <
        escape = '<';
        break;
      case 62:
        // >
        escape = '>';
        break;
      default:
        continue;
    }

    if (lastIndex !== index) {
      html += str.substring(lastIndex, index);
    }

    lastIndex = index + 1;
    html += escape;
  }

  return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
}
// end code copied and modified from escape-html

/**
 * Escapes text to prevent scripting attacks.
 *
 * @param {*} text Text value to escape.
 * @return {string} An escaped string.
 */
function escapeTextForBrowser(text) {
  if (typeof text === 'boolean' || typeof text === 'number') {
    // this shortcircuit helps perf for types that we know will never have
    // special characters, especially given that this function is used often
    // for numeric dom ids.
    return '' + text;
  }
  return escapeHtml(text);
}

/**
 * Escapes attribute value to prevent scripting attacks.
 *
 * @param {*} value Value to escape.
 * @return {string} An escaped string.
 */
function quoteAttributeValueForBrowser(value) {
  return '"' + escapeTextForBrowser(value) + '"';
}

이 부분의 원본 코드는 역시 예를 들면 쉽게 이해할 수 있다.
총괄: html의 의미는 주로 vue 이 몇 개의 특수 문자를 html 실체로 바꾸는 것이다.
연장:xss공격 예방:

사용자 입력 이스케이프

내용을 획득한 후 반전의와domParse, 안전하지 않은 라벨 및 속성을 필터하여 xss 차단

안전하지 않은 라벨: 스타일,link,script,iframe,frame,img

안전하지 않은 속성: onerror, onclick 등