jQuery로 HTML 문자열 이스케이프

누구나 jQuery의 문자열에서 HTML을 이스케이프하는 쉬운 방법을 알고 있습니까? 임의의 문자열을 전달할 수 있어야하고 HTML 페이지에 표시하기 위해 올바르게 이스케이프해야합니다 (JavaScript / HTML 주입 공격 방지). 나는 이것을하기 위해 jQuery를 확장 할 수 있다고 확신하지만, 이것을 달성하기 위해 현재 프레임 워크에 대해 충분히 모른다.

jQuery를 사용 하고 있으므로 요소의 text속성을 설정할 수 있습니다 .

// before:
// <div class="someClass">text</div>
var someHtmlString = "<script>alert('hi!');</script>";

// set a DIV's text:
$("div.someClass").text(someHtmlString);
// after: 
// <div class="someClass">&lt;script&gt;alert('hi!');&lt;/script&gt;</div>

// get the text in a string:
var escaped = $("<div>").text(someHtmlString).html();
// value: 
// &lt;script&gt;alert('hi!');&lt;/script&gt;

mustache.js의 솔루션 도 있습니다

var entityMap = {
  '&': '&',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#x2F;',
  '`': '&#x60;',
  '=': '&#x3D;'
};

function escapeHtml (string) {
  return String(string).replace(/[&<>"'`=\/]/g, function (s) {
    return entityMap[s];
  });
}

$('<div/>').text('This is fun & stuff').html(); // "This is fun &amp; stuff"

출처 : http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb

HTML을 피하고 있다면 실제로 필요한 것은 세 가지뿐입니다.

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

사용 사례에 따라, 당신은 또한 같은 일을해야 할 수도 있습니다 "에 ". 목록이 충분히 커지면 배열을 사용합니다.

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]
for(var item in findReplace)
    escaped = escaped.replace(findReplace[item][0], findReplace[item][1]);

encodeURIComponent() HTML이 아닌 URL에 대해서만 이스케이프합니다.

밑줄을 쉽게 사용할 수 있습니다.

_.escape(string) 

Underscore 는 기본 js가 제공하지 않는 많은 기능을 제공하는 유틸리티 라이브러리입니다. 밑줄과 동일한 API이지만 더 성능이 좋도록 다시 작성된 lodash 도 있습니다.

나는 이것을하는 작은 기능을 썼습니다. 그것은 단지 탈출 ", &, <과 >(그러나 보통 그 모든 어쨌든 필요이다). 그것은 다음은 사용에 앞서 제안 된 솔루션을 약간 더 우아한 하나를 .replace() 모든 변환을 수행 할 수 있습니다. ( 편집 2 : 코드 복잡성이 감소하여 기능이 훨씬 작고 깔끔해졌습니다. 원래 코드에 대해 궁금한 경우이 답변의 끝 부분을 참조하십시오.)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&<>]/g, function (a) {
        return { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' }[a];
    });
}

이것은 일반 자바 스크립트이며 jQuery는 사용하지 않습니다.

이스케이프 /와 '너무

mklement 의 의견 에 따라 편집하십시오 .

위의 기능은 문자를 포함하도록 쉽게 확장 할 수 있습니다. 이스케이프 할 문자를 더 지정하려면 문자 클래스의 정규 표현식 (예 :) /[...]/g과 chr객체 의 항목에 모두 삽입하면 됩니다. ( 편집 2 : 같은 방식으로이 기능도 단축되었습니다.)

function escapeHtml(text) {
    'use strict';
    return text.replace(/[\"&'\/<>]/g, function (a) {
        return {
            '"': '&quot;', '&': '&amp;', "'": '&#39;',
            '/': '&#47;',  '<': '&lt;',  '>': '&gt;'
        }[a];
    });
}

위의 '아포스트로피 사용에 유의하십시오 (기호 엔티티 '는 대신 사용되었을 수 있습니다. XML로 정의되었지만 원래 HTML 스펙에 포함되지 않았으므로 모든 브라우저에서 지원되지 않을 수 있습니다) : HTML 문자 인코딩에 대한 위키피디아 기사 ). 또한 16 진수를 사용하는 것보다 10 진수 엔터티를 사용하는 것이 더 광범위하게 지원된다는 내용을 읽었지만 지금은 그 소스를 찾을 수 없습니다. 16 진수 엔터티를 지원하지 않는 브라우저는 많을 수 없습니다.

주 : 추가 /및 '그들이 HTML에서 특별한 의미를 가지고 있지 않으며하지 않기 때문에 탈출 문자 목록에 모든 것을 유용하지 않습니다 필요 이스케이프 할 수 있습니다.

원래 escapeHtml기능

편집 2 : 원래 함수는 변수 ( chr)를 사용하여 .replace()콜백에 필요한 객체를 저장했습니다 . 이 변수에는 범위를 지정하기 위해 추가 익명 함수가 필요했기 때문에 함수가 조금 더 크고 복잡해졌습니다.

var escapeHtml = (function () {
    'use strict';
    var chr = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
    return function (text) {
        return text.replace(/[\"&<>]/g, function (a) { return chr[a]; });
    };
}());

두 버전 중 어느 것이 더 빠른지 테스트하지 않았습니다. 그렇다면 여기에 정보와 링크를 추가하십시오.

나는이 파티에 얼마나 늦었는지 알고 있지만 jQuery가 필요없는 매우 쉬운 솔루션을 가지고 있습니다.

escaped = new Option(unescaped).innerHTML;

편집 : 따옴표를 이스케이프하지 않습니다. 따옴표를 이스케이프해야하는 유일한 경우는 내용을 HTML 문자열 내 속성에 인라인으로 붙여 넣는 경우입니다. 이 작업을 수행하는 것이 좋은 디자인 일 경우를 상상하기가 어렵습니다.

편집 3 : 가장 빠른 해결책은 Saram에서 위의 답변을 확인하십시오. 가장 짧습니다.

다음은 깨끗하고 명확한 JavaScript 함수입니다. "몇몇 <많은"과 같은 텍스트는 "몇몇 & lt; 많은"로 빠져 나갑니다.

function escapeHtmlEntities (str) {
  if (typeof jQuery !== 'undefined') {
    // Create an empty div to use as a container,
    // then put the raw text in and get the HTML
    // equivalent out.
    return jQuery('<div/>').text(str).html();
  }

  // No jQuery, so use string replace.
  return str
    .replace(/&/g, '&amp;')
    .replace(/>/g, '&gt;')
    .replace(/</g, '&lt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;');
}

마지막 테스트 후 브라우저 와 호환되는 기본 JavaScript (DOM) 솔루션을 가장 빠르고 완벽하게 추천 할 수 있습니다 .

function HTMLescape(html){
    return document.createElement('div')
        .appendChild(document.createTextNode(html))
        .parentNode
        .innerHTML
}

여러 번 반복하면 한 번 준비된 변수로 수행 할 수 있습니다.

//prepare variables
var DOMtext = document.createTextNode("test");
var DOMnative = document.createElement("span");
DOMnative.appendChild(DOMtext);

//main work for each case
function HTMLescape(html){
  DOMtext.nodeValue = html;
  return DOMnative.innerHTML
}

내 최종 성능 비교를보십시오 ( stack question ).

Underscore.string lib를 사용해보십시오 .jQuery와 작동합니다.

_.str.escapeHTML('<div>Blah blah blah</div>')

산출:

'<div>Blah blah blah</div>'

escapeHTML()문자열 객체에 메소드를 추가하는 mustache.js 예제를 향상 시켰습니다 .

var __entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
};

String.prototype.escapeHTML = function() {
    return String(this).replace(/[&<>"'\/]/g, function (s) {
        return __entityMap[s];
    });
}

그렇게하면 사용하기가 쉽습니다. "Some <text>, more Text&Text".escapeHTML()

escape()그리고 unescape(), URL에 대한 코드 / 디코드 문자열 아니며 HTML된다.

실제로 다음 스 니펫을 사용하여 프레임 워크가 필요없는 트릭을 수행합니다.

var escapedHtml = html.replace(/&/g, '&')
                      .replace(/>/g, '>')
                      .replace(/</g, '&lt;')
                      .replace(/"/g, '&quot;')
                      .replace(/'/g, '&apos;');

underscore.js가있는 경우 다음을 사용하십시오 _.escape(위에 게시 된 jQuery 메소드보다 더 효율적 임).

_.escape('Curly, Larry & Moe'); // returns: Curly, Larry & Moe

정규식 경로를 사용하는 경우 위의 tghw 예제에 오류가 있습니다.

<!-- WON'T WORK -  item[0] is an index, not an item -->

var escaped = html; 
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g,"&gt;"], [/"/g,
"&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(item[0], item[1]);   
}


<!-- WORKS - findReplace[item[]] correctly references contents -->

var escaped = html;
var findReplace = [[/&/g, "&amp;"], [/</g, "&lt;"], [/>/g, "&gt;"], [/"/g, "&quot;"]]

for(var item in findReplace) {
     escaped = escaped.replace(findReplace[item[0]], findReplace[item[1]]);
}

이것은 좋은 안전한 예입니다 ...

function escapeHtml(str) {
    if (typeof(str) == "string"){
        try{
            var newStr = "";
            var nextCode = 0;
            for (var i = 0;i < str.length;i++){
                nextCode = str.charCodeAt(i);
                if (nextCode > 0 && nextCode < 128){
                    newStr += "&#"+nextCode+";";
                }
                else{
                    newStr += "?";
                }
             }
             return newStr;
        }
        catch(err){
        }
    }
    else{
        return str;
    }
}

바닐라 js로 쉽게 할 수 있습니다.

문서에 텍스트 노드를 추가하기 만하면됩니다. 브라우저에서 이스케이프됩니다.

var escaped = document.createTextNode("<HTML TO/ESCAPE/>")
document.getElementById("[PARENT_NODE]").appendChild(escaped)

(function(undefined){
    var charsToReplace = {
        '&': '&',
        '<': '&lt;',
        '>': '&gt;'
    };

    var replaceReg = new RegExp("[" + Object.keys(charsToReplace).join("") + "]", "g");
    var replaceFn = function(tag){ return charsToReplace[tag] || tag; };

    var replaceRegF = function(replaceMap) {
        return (new RegExp("[" + Object.keys(charsToReplace).concat(Object.keys(replaceMap)).join("") + "]", "gi"));
    };
    var replaceFnF = function(replaceMap) {
        return function(tag){ return replaceMap[tag] || charsToReplace[tag] || tag; };
    };

    String.prototype.htmlEscape = function(replaceMap) {
        if (replaceMap === undefined) return this.replace(replaceReg, replaceFn);
        return this.replace(replaceRegF(replaceMap), replaceFnF(replaceMap));
    };
})();

전역 변수, 메모리 최적화가 없습니다. 용법:

"some<tag>and&symbol©".htmlEscape({'©': '&copy;'})

결과는 다음과 같습니다

"some<tag>and&symbol©"

JQUERY가 필요없는 2 가지 간단한 방법 ...

다음과 같이 문자열의 모든 문자 를 인코딩 할 수 있습니다 .

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

아니면 그냥 주인공을 대상으로 걱정에 대해 &, 줄 바꿈, <, >, "와 '같은 :

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

var myString='Encode HTML entities!\n"Safe" escape <script></'+'script> & other tags!';

test.value=encode(myString);

testing.innerHTML=encode(myString);

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

<p><b>What JavaScript Generated:</b></p>

<textarea id=test rows="3" cols="55"></textarea>

<p><b>What It Renders Too In HTML:</b></p>

<div id="testing">www.WHAK.com</div>

일반 JavaScript 이스케이프 예제 :

function escapeHtml(text) {
    var div = document.createElement('div');
    div.innerText = text;
    return div.innerHTML;
}

escapeHtml("<script>alert('hi!');</script>")
// "&lt;script&gt;alert('hi!');&lt;/script&gt;"

function htmlEscape(str) {
    var stringval="";
    $.each(str, function (i, element) {
        alert(element);
        stringval += element
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(' ', '-')
            .replace('?', '-')
            .replace(':', '-')
            .replace('|', '-')
            .replace('.', '-');
    });
    alert(stringval);
    return String(stringval);
}

function htmlDecode(t){
   if (t) return $('<div />').html(t).text();
}

매력처럼 작동합니다

이 답변 은 jQuery와 일반적인 JS 메소드를 제공하지만 DOM을 사용하지 않고 가장 짧습니다.

unescape(escape("It's > 20% less complicated this way."))

이스케이프 된 문자열 : It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

탈출 한 공간이 당신을 방해한다면, 다음을 시도하십시오 :

unescape(escape("It's > 20% less complicated this way.").replace(/%20/g, " "))

이스케이프 된 문자열 : It%27s %3E 20%25 less complicated this way.

불행히도이 escape()함수는 JavaScript 버전 1.5에서 더 이상 사용되지 않습니다 . encodeURI()또는 encodeURIComponent()대안이지만, 그들은 무시 '하므로 마지막 코드 줄은 다음과 같이 변합니다.

decodeURI(encodeURI("It's > 20% less complicated this way.").replace(/%20/g, " ").replace("'", '%27'))

모든 주요 브라우저는 여전히 짧은 코드를 지원하며 오래된 웹 사이트의 수를 감안할 때 곧 바뀔 것이라고 의심합니다.

mustache.js 의 솔루션을 위한 ES6 하나의 라이너

const escapeHTML = str => (str+'').replace(/[&<>"'`=\/]/g, s => ({'&': '&amp;','<': '&lt;','>': '&gt;','"': '&quot;',"'": '&#39;','/': '&#x2F;','`': '&#x60;','=': '&#x3D;'})[s]);

이 정보를 데이터베이스 에 저장 하는 경우 클라이언트 측 스크립트를 사용하여 HTML을 이스케이프하는 것은 서버 에서 수행해야 합니다 . 그렇지 않으면 XSS 보호를 우회하기 쉽습니다.

내 요점을 명확히하기 위해 다음 답변 중 하나를 사용하는 예가 있습니다.

escapeHtml 함수를 사용하여 블로그의 주석에서 HTML을 이스케이프 처리 한 다음 서버에 게시한다고 가정하겠습니다.

var entityMap = {
    "&": "&",
    "<": "&lt;",
    ">": "&gt;",
    '"': '&quot;',
    "'": '&#39;',
    "/": '&#x2F;'
  };

  function escapeHtml(string) {
    return String(string).replace(/[&<>"'\/]/g, function (s) {
      return entityMap[s];
    });
  }

사용자는 다음을 수행 할 수 있습니다.

• POST 요청 매개 변수를 편집하고 주석을 Javascript 코드로 바꾸십시오.
• 브라우저 콘솔을 사용하여 escapeHtml 함수를 덮어 씁니다.

사용자가이 스 니펫을 콘솔에 붙여 넣으면 XSS 유효성 검사를 무시합니다.

function escapeHtml(string){
   return string
}

다시 탈출을 막지 않으면 모든 솔루션이 쓸모가 없습니다. 예를 들어 대부분의 솔루션은 계속해서 이스케이프 &됩니다 &.

escapeHtml = function (s) {
    return s ? s.replace(
        /[&<>'"]/g,
        function (c, offset, str) {
            if (c === "&") {
                var substr = str.substring(offset, offset + 6);
                if (/&(amp|lt|gt|apos|quot);/.test(substr)) {
                    // already escaped, do not re-escape
                    return c;
                }
            }
            return "&" + {
                "&": "amp",
                "<": "lt",
                ">": "gt",
                "'": "apos",
                '"': "quot"
            }[c] + ";";
        }
    ) : "";
};