JavaScript에서 HTML 특수 문자를 피할 수 있습니까?

JavaScript에서 HTML 특수 문자를 피할 수 있습니까?

JavaScript 함수로 HTML로 텍스트를 표시하고 싶습니다.JavaScript에서 HTML 특수문자를 이스케이프하려면 어떻게 해야 하나요?API가 있나요?

다음은 거의 모든 웹 브라우저에서 사용할 수 있는 솔루션입니다.

function escapeHtml(unsafe)
{
    return unsafe
         .replace(/&/g, "&")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }

최신 웹 브라우저(2020+)만 지원하는 경우 새로운 replaceAll 기능을 사용할 수 있습니다.

const escapeHtml = (unsafe) => {
    return unsafe.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
}

function escapeHtml(html){
  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}

// Escape while typing & print result
document.querySelector('input').addEventListener('input', e => {
  console.clear();
  console.log( escapeHtml(e.target.value) );
});

<input style='width:90%; padding:6px;' placeholder='&lt;b&gt;cool&lt;/b&gt;'>

jQuery의 함수를 사용할 수 있습니다.

예를 들어 다음과 같습니다.

http://jsfiddle.net/9H6Ch/

관련 jQuery 매뉴얼에서.text()기능:

이 메서드는 HTML에서 올바르게 렌더링하기 위해 필요에 따라 제공된 문자열을 이스케이프할 필요가 있습니다.그러기 위해 DOM 메서드를 호출하고 문자열을 HTML로 해석하지 않습니다.

이전 버전의 jQuery Documentation은 다음과 같이 표현했습니다(강조 추가).

이 메서드는 HTML에서 올바르게 렌더링하기 위해 필요에 따라 제공된 문자열을 이스케이프하는 것에 주의할 필요가 있습니다.이를 위해 DOM 메서드를 .createTextNode()라고 부릅니다.이것에 의해, 특수 문자는 HTML 엔티티에 상당하는 문자(<의 경우는 &amplt; 등)로 치환됩니다.

Lodash 사용:

_.escape('fred, barney, & pebbles');
// => 'fred, barney, & pebbles'

소스 코드

제대로 된 방법을 찾은 것 같아

// Create a DOM Text node:
var text_node = document.createTextNode(unescaped_text);

// Get the HTML element where you want to insert the text into:
var elem = document.getElementById('msg_span');

// Optional: clear its old contents
//elem.innerHTML = '';

// Append the text node into it:
elem.appendChild(text_node);

이것은 지금까지 내가 본 것 중 가장 빠른 방법이다.또한 페이지의 요소를 추가, 삭제 또는 변경하지 않고도 모든 작업을 수행할 수 있습니다.

function escapeHTML(unsafeText) {
    let div = document.createElement('div');
    div.innerText = unsafeText;
    return div.innerHTML;
}

더 나은 해결책을 찾는 것은 흥미로웠습니다.

var escapeHTML = function(unsafe) {
  return unsafe.replace(/[&<"']/g, function(m) {
    switch (m) {
      case '&':
        return '&amp;';
      case '<':
        return '&lt;';
      case '"':
        return '&quot;';
      default:
        return '&#039;';
    }
  });
};

해석하지 않다>결과에서 XML/HTML 코드가 끊어지지 않기 때문입니다.

벤치마크는 다음과 같습니다.http://jsperf.com/regexpairs 。또한 유니버설도 만들었습니다.escape기능 : http://jsperf.com/regexpairs2

부호화되지 않은 텍스트를 표시하는 가장 간결하고 성능 좋은 방법은textContent소유물.

사용하는 것보다 고속innerHTML오버헤드 탈출은 고려되지 않았습니다.

document.body.textContent = 'a <b> c </b>';

DOM Elements는 innerText에 할당함으로써 텍스트를 HTML로 변환할 수 있습니다.innerText는 함수는 아니지만 할당은 텍스트가 이스케이프된 것처럼 작동합니다.

document.querySelectorAll('#id')[0].innerText = 'unsafe " String >><>';

문자열 내의 모든 문자를 부호화할 수 있습니다.

function encode(e){return e.replace(/[^]/g,function(e){return"&#"+e.charCodeAt(0)+";"})}

또는 다음과 같이 (&, unebreaks, <, >, " 및 ') 걱정해야 할 주요 캐릭터만을 대상으로 합니다.

function encode(r){
return r.replace(/[\x26\x0A\<>'"]/g,function(r){return"&#"+r.charCodeAt(0)+";"})
}

test.value=encode('How to encode\nonly html tags &<>\'" nice & fast!');

/*************
* \x26 is &ampersand (it has to be first),
* \x0A is newline,
*************/

<textarea id=test rows="9" cols="55">&#119;&#119;&#119;&#46;&#87;&#72;&#65;&#75;&#46;&#99;&#111;&#109;</textarea>

규범대로

OWASP는 "영숫자의 경우 256 미만의 ASCII 값을 가진 모든 문자를 이스케이프할 것을 권장합니다.&#xHH;안(는) 안(서양속담, 안(속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담, 속담.

이를 위한 함수는 다음과 같습니다.사용 예시는 다음과 같습니다.

function escapeHTML(unsafe) {
  return unsafe.replace(
    /[\u0000-\u002F\u003A-\u0040\u005B-\u0060\u007B-\u00FF]/g,
    c => '&#' + ('000' + c.charCodeAt(0)).slice(-4) + ';'
  )
}

document.querySelector('div').innerHTML =
  '<span class=' +
  escapeHTML('"fakeclass" onclick="alert("test")') +
  '>' +
  escapeHTML('<script>alert("inspect the attributes")\u003C/script>') +
  '</span>'

<div></div>

내가 제공한 엔티티 범위를 확인하여 함수의 안전성을 확인해야 합니다.이 정규 표현식을 사용할 수도 있습니다.이 정규 표현은 읽기 쉽고 동일한 문자 코드를 커버해야 하지만 브라우저에서는 성능이 10% 정도 떨어집니다.

/(?![0-9A-Za-z])[\u0000-\u00FF]/g

이미 어플리케이션에서 모듈을 사용하고 있는 경우 escape-html 모듈을 사용할 수 있습니다.

import escapeHtml from 'escape-html';
const unsafeString = '<script>alert("XSS");</script>';
const safeString = escapeHtml(unsafeString);

저는 DOM 구조물을 만들 때 이 문제를 접하게 되었습니다.이 질문이 문제 해결에 도움이 되었다.경로 구분자로 이중 쉐브론을 사용하고 싶었지만 새 텍스트 노드를 추가하면 문자 자체보다는 이스케이프된 문자 코드가 직접 표시됩니다.

var _div = document.createElement('div');
var _separator = document.createTextNode('»');
//_div.appendChild(_separator); /* This resulted in '»' being displayed */
_div.innerHTML = _separator.textContent; /* This was key */

.<pre><code class="html-escape">....</code></pre>★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★.
<pre><code class="html-escape">....</code></pre>.

const escape = {
    '"': '"',
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
}
const codeWrappers = document.querySelectorAll('.html-escape')
if (codeWrappers.length > 0) {
    codeWrappers.forEach(code => {
        const htmlCode = code.innerHTML
        const escapeString = htmlCode.replace(/"|&|<|>/g, function (matched) {
            return escape[matched];
        });
        code.innerHTML = escapeString
    })
}

<pre>
    <code class="language-html html-escape">
        <div class="card">
            <div class="card-header-img" style="background-image: url('/assets/card-sample.png');"></div>
            <div class="card-body">
                <p class="card-title">Card Title</p>
                <p class="card-subtitle">Srcondary text</p>
                <p class="card-text">Greyhound divisively hello coldly wonderfully marginally far upon
                    excluding.</p>
                <button class="btn">Go to </button>
                <button class="btn btn-outline">Go to </button>
            </div>
        </div>
    </code>
</pre>

이를 통해 JavaScript 문자열에서 HTML 태그를 제거합니다.

const strippedString = htmlString.replace(/(<([^>]+)>)/gi, "");

console.log(strippedString);

.prototype.js★★★★★★★★★★★★★★★★★★:

string.escapeHTML();

데모를 시험해 보다

저는 이 해결책을 생각해 냈습니다.

사용자 또는 데이터베이스의 안전하지 않은 데이터가 포함된 HTML을 요소에 추가한다고 가정합니다.

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + unsafe + '</p>';
html += '</div>';

element.html(html);

XSS 공격에는 안전하지 않습니다.여기에 $(document.createElement('div').html(unsafe).text()를 추가합니다.

그렇구나

var unsafe = 'some unsafe data like <script>alert("oops");</script> here';

var html = '';
html += '<div>';
html += '<p>' + $(document.createElement('div')).html(unsafe).text(); + '</p>';
html += '</div>';

element.html(html);

쉬워요..replace()★★★★★★★★★★★★!!!HTML 을 사용합니다.

언급URL : https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript