javascript - jQuery로 HTML 문자열 이스케이프 처리하기

출처:https://code.i-harness.com/ko/q/60f0

누구든지 jQuery의 문자열에서 HTML을 쉽게 벗어날 수있는 방법을 알고 있습니까? 

임의의 문자열을 전달하고 HTML 페이지 (JavaScript / HTML 삽입 공격 방지)에 표시되도록 적절하게 

이스케이프 처리해야합니다. 이 작업을 수행하기 위해 jQuery를 확장 할 수 있다고 확신하지만

이 작업을 수행하는 데 필요한 프레임 워크에 대해 충분히 알지 못합니다.

 Answers

---

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

사용 사례에 따라 " to " 와 같은 작업을 수행해야 할 수도 있습니다. 목록이 충분히 크면 배열을 사용합니다.

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() 는 URL이 아닌 HTML 만 이스케이프 처리합니다.

나는 이것을하는 작은 기능을 썼다. 그것은 " , & , < 그리고 > 만 이스케이프합니다. (대개 필요한 것은 모두 필요합니다.

 .replace() 모든 변환 작업을 수행하기 위해 .replace() 를 사용한다는 점에서 이전 제안 된 솔루션보다 약간 더 우아합니다. 

( EDIT 2 : 코드 복잡성이 줄어들어 원래 코드에 대해 궁금한 점이 있다면 함수를 더 작고 깔끔하게 만듭니다.이 답변의 끝 부분을 참조하십시오.)

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

이것은 일반 Javascript이며 jQuery는 사용되지 않습니다.

탈출구 ' 와 ' 도

mklement 의 코멘트에 대한 응답으로 편집하십시오.

위의 기능은 모든 문자를 포함하도록 쉽게 확장 될 수 있습니다. 이스케이프 할 문자를 더 지정하려면 

정규 표현식의 문자 클래스 (예 : /[...]/g )와 chr 객체의 항목으로 모두 삽입하기 만하면됩니다. 

( EDIT 2 : 같은 방식으로이 기능을 짧게합니다.)

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

위의 ' 아포스트로피 (상징적 인 엔티티가 대신 사용될 수도 있음 - XML로 정의되었지만 원래 HTML 스펙에 포함되지 않았기 때문에

 모든 브라우저에서 지원되지 않을 수도 있음 참조 : HTML 문자 인코딩에 관한 Wikipedia 기사 ). 

또한 십진법 엔티티를 사용하는 것이 16 진수를 사용하는 것보다 더 광범위하게 지원된다는 것을 기억하지만, 지금은 소스를 찾을 수없는 것 같습니다.

 (그리고 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]; });
    };
}());

두 버전 중 어느 버전이 더 빠르는지는 테스트하지 않았습니다. 그럴 경우 여기에서 정보와 링크를 자유롭게 추가하십시오.

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

_.escape(string) 

Underscore 는 네이티브 j가 제공하지 않는 많은 기능을 제공하는 유틸리티 라이브러리입니다. 

밑줄과 같은 API이지만 성능이 좋도록 다시 작성된 lodash 도 있습니다.

내가이 파티에 얼마나 늦었는지 알지만, jQuery를 필요로하지 않는 아주 쉬운 해결책이있다.

escaped = new Option(unescaped).innerHTML;

편집 :이 따옴표를 이스케이프하지 않습니다. 따옴표를 이스케이프해야하는 유일한 경우는

 내용이 HTML 문자열 내의 속성에 인라인으로 붙여 넣기 될 경우입니다. 

이 일을하는 것이 좋은 디자인이라고 상상하는 것이 어렵습니다.

편집 2 : 성능이 중요한 경우 최고 성능 솔루션 (약 50 %까지)은 여전히 ​​일련의 정규식 대체품입니다. 

최신 브라우저는 정규 표현식에 연산자가없고 문자열 만 포함하고 모두를 단일 작업으로 축소한다는 사실을 감지합니다.

깨끗하고 명확한 JavaScript 함수가 여기에 있습니다. 그것은 "몇 개의 <많은"과 같은 텍스트를 "소수의 <많은>"문자로 이스케이프합니다.

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;');
}

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

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

산출:

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

마지막 테스트 후 가장 빠르고 완벽하게 크로스 브라우저 호환 원시 자바 스크립트 (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
}

내 최종 실적 비교 ( 스택 질문 )를보십시오.

나는 문자열 객체에 escapeHTML() 메소드를 추가하는 콧수염 escapeHTML() 예제를 개선했습니다.

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() 를 사용하는 것이 매우 쉽습니다. "Some <text>, more Text&Text".escapeHTML()

escape() 및 unescape() 는 HTML이 아닌 URL의 문자열을 인코딩 / 디코딩하기위한 것입니다.

사실, 나는 프레임 워크를 필요로하지 않는 트릭을하기 위해 다음 스 니펫을 사용한다.

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

underscore.js가 있으면 _.escape 사용 _.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;
    }
}

(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©"

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

단순히 텍스트 노드를 문서에 추가하십시오. 그것은 브라우저에 의해 이스케이프됩니다.

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

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

NO 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>

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.

유감스럽게도 JavaScript 버전 1.5 에서는 escape() 함수가 사용되지 않습니다 . 

encodeURI() 또는 encodeURIComponent() 는 대안이지만 무시하므로 ' , 마지막 코드 행은 다음과 같이 바뀝니다.

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

모든 주요 브라우저는 여전히 짧은 코드를 지원하며 이전 웹 사이트의 수를 감안할 때 곧 변경 될 것입니다.

일반 자바 스크립트 이스케이프 예 :

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;"

이 정보를 데이터베이스 에 저장하는 경우 클라이언트 측 스크립트를 사용하여

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] + ";";
        }
    ) : "";
};