입력 필드에서 속성을 읽을 때 HTML 인코딩이 손실 됨

숨겨진 필드에서 값을 가져 와서 텍스트 상자에 표시하기 위해 JavaScript를 사용하고 있습니다. 숨겨진 필드의 값이 인코딩됩니다.

예를 들어

<input id='hiddenId' type='hidden' value='chalk &amp; cheese' />

에 끌려

<input type='text' value='chalk &amp; cheese' />

숨겨진 필드에서 값을 얻으려면 일부 jQuery를 통해 (이 시점에서 인코딩을 잃어 버립니다).

$('#hiddenId').attr('value')

문제는 chalk & cheese숨겨진 필드에서 읽을 때 JavaScript가 인코딩을 잃어버린 것 같습니다. 나는 값이되고 싶지 않다 chalk & cheese. 리터럴 amp;을 유지 하고 싶습니다 .

문자열을 HTML로 인코딩하는 JavaScript 라이브러리 또는 jQuery 메소드가 있습니까?

편집 : 이 답변은 오래 전에 게시 htmlDecode되었으며이 기능은 XSS 취약점을 도입했습니다. 그것은에서 임시 요소를 변경 수정 된 divA가에 textareaXSS에서의 기회를 감소시킨다. 그러나 요즘에는 다른 답변 에서 제안한대로 DOMParser API를 사용하는 것이 좋습니다 .

나는이 기능들을 사용한다 :

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

기본적으로 textarea 요소는 메모리에 작성되지만 문서에는 추가되지 않습니다.

온 htmlEncode함수 I가 설정 innerText요소, 그리고 상기 인코딩 된 검색 innerHTML; 온 htmlDecode기능이 설정 I innerHTML요소의 값과이 innerText검색된다.

여기서 실행중인 예를 확인 하십시오 .

jQuery 트릭은 따옴표를 인코딩하지 않으며 IE에서는 공백을 제거합니다.

Django 의 이스케이프 템플릿 태그를 기반으로 이미 많이 사용 / 테스트 된 것으로 생각되는이 기능을 만들었습니다.

공백 제거 문제에 대한 해결 방법보다 훨씬 간단하고 빠를 수 있습니다. 예를 들어 속성 ​​값 안에 결과를 사용하려는 경우 따옴표를 인코딩합니다.

function htmlEscape(str) {
    return str
        .replace(/&/g, '&')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

// I needed the opposite function today, so adding here too:
function htmlUnescape(str){
    return str
        .replace(/&quot;/g, '"')
        .replace(/&#39;/g, "'")
        .replace(/&lt;/g, '<')
        .replace(/&gt;/g, '>')
        .replace(/&amp;/g, '&');
}

2013-06-17 업데이트 :
가장 빠른 탈출을 검색 하면서이replaceAll 메소드 구현을 찾았습니다 :
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(또한 여기에서 참조 : 가장 빠름) 문자열에서 문자의 모든 인스턴스를 바꾸는 방법 )
일부 성능 결과는 다음과 같습니다.
http://jsperf.com/htmlencoderegex/25

replace위 의 내장 체인에 동일한 결과 문자열을 제공합니다 . 누군가 왜 그것이 더 빠른지 설명 할 수 있다면 매우 기쁠 것입니다!?

2015-03-04 업데이트 :
방금 AngularJS가 위의 방법을 정확하게 사용하고 있음을 알았습니다 :
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

그들은 두 가지 세분화를 추가합니다- 모호하지 않은 모든 문자를 엔티티로 변환 할뿐만 아니라 모호한 유니 코드 문제 를 처리하는 것으로 보입니다 . 문서에 UTF8 문자 세트가 지정된 한 후자가 필요하지 않다는 인상을 받았습니다.

(4 년 후) Django는 여전히이 두 가지 중 어느 것도 수행하지 않기 때문에 이들이 얼마나 중요한지 잘 모르겠습니다.
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

2016-04-06 업데이트 :
슬래시를 피할 수도 있습니다 /. 올바른 HTML 인코딩에는 필요하지 않지만 OWASP 에서는 XSS 안전 방지 수단으로 권장합니다 . (의견에 이것을 제안 해 주신 @JNF에게 감사드립니다)

        .replace(/\//g, '/');

다음은 jQuery .html()버전과 버전 보다 상당히 빠른 비 jQuery 버전입니다 .replace(). 이것은 모든 공백을 유지하지만 jQuery 버전과 마찬가지로 따옴표를 처리하지 않습니다.

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

속도 : http://jsperf.com/htmlencoderegex/17

데모:

산출:

스크립트:

function htmlEncode( html ) {
    return document.createElement( 'a' ).appendChild( 
        document.createTextNode( html ) ).parentNode.innerHTML;
};

function htmlDecode( html ) {
    var a = document.createElement( 'a' ); a.innerHTML = html;
    return a.textContent;
};

document.getElementById( 'text' ).value = htmlEncode( document.getElementById( 'hidden' ).value );

//sanity check
var html = '<div>   &amp; hello</div>';
document.getElementById( 'same' ).textContent = 
      'html === htmlDecode( htmlEncode( html ) ): ' 
    + ( html === htmlDecode( htmlEncode( html ) ) );

HTML :

<input id="hidden" type="hidden" value="chalk    &amp; cheese" />
<input id="text" value="" />
<div id="same"></div>

나는 이것이 오래된 것임을 알고 있지만 줄을 제거하지 않고 IE에서 작동 하는 허용되는 답변 의 변형을 게시하고 싶었습니다 .

function multiLineHtmlEncode(value) {
    var lines = value.split(/\r\n|\r|\n/);
    for (var i = 0; i < lines.length; i++) {
        lines[i] = htmlEncode(lines[i]);
    }
    return lines.join('\r\n');
}

function htmlEncode(value) {
    return $('<div/>').text(value).html();
} 

밑줄 은 이를 수행하는 방법 _.escape()과 _.unescape()방법을 제공합니다 .

> _.unescape( "chalk & cheese" );
  "chalk & cheese"

> _.escape( "chalk & cheese" );
  "chalk & cheese"

좋은 대답입니다. 참고 인코딩에 값이있는 경우 undefined또는 nulljQuery를 1.4.2 당신이 오류를 같은 얻을 수 있습니다 :

jQuery("<div/>").text(value).html is not a function

또는

Uncaught TypeError: Object has no method 'html'

해결책은 실제 값을 확인하기 위해 함수를 수정하는 것입니다.

function htmlEncode(value){ 
    if (value) {
        return jQuery('<div/>').text(value).html(); 
    } else {
        return '';
    }
}

평범한 자바 스크립트를 선호하는 사람들을 위해, 내가 성공적으로 사용한 방법은 다음과 같습니다.

function escapeHTML (str)
{
    var div = document.createElement('div');
    var text = document.createTextNode(str);
    div.appendChild(text);
    return div.innerHTML;
}

그러나 인코딩이 손실되지 않습니다. 인코딩은 페이지로드 중 마크 업 파서 (브라우저)에서 사용됩니다. 소스를 읽고 파싱하고 브라우저에 DOM이 메모리에로드되면 인코딩은 소스가 나타내는 것으로 파싱됩니다. 따라서 JS가 메모리에서 아무것도 읽도록 실행 될 때마다 문자가 인코딩이 나타내는 것입니다.

나는 여기서 의미론을 엄격하게 운영하고 있지만 인코딩의 목적을 이해하기를 원했다. "잃어버린"이라는 단어는 무언가 제대로 작동하지 않는 것처럼 들립니다.

Jquery없이 더 빠릅니다. 문자열의 모든 문자를 인코딩 할 수 있습니다.

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

또는 다음과 같이 (&, inebreaks, <,>, "및 ') 걱정할 주요 문자를 타겟팅하십시오.

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

test.value=encode('Encode HTML entities!\n\n"Safe" escape <script id=\'\'> & useful in <pre> tags!');

testing.innerHTML=test.value;

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

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

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

프로토 타입 에는 String 클래스가 내장되어 있습니다. 따라서 프로토 타입을 사용 / 계획하려는 경우 다음과 같은 작업을 수행합니다.

'<div class="article">This is an article</div>'.escapeHTML();
// -> "&lt;div class="article"&gt;This is an article&lt;/div&gt;"

다음은 간단한 자바 스크립트 솔루션입니다. 매개 변수없이 또는 매개 변수를 사용하여 개체에서 사용할 수있는 "HTMLEncode"메서드를 사용하여 String 개체를 확장합니다.

String.prototype.HTMLEncode = function(str) {
  var result = "";
  var str = (arguments.length===1) ? str : this;
  for(var i=0; i<str.length; i++) {
     var chrcode = str.charCodeAt(i);
     result+=(chrcode>128) ? "&#"+chrcode+";" : str.substr(i,1)
   }
   return result;
}
// TEST
console.log("stetaewteaw æø".HTMLEncode());
console.log("stetaewteaw æø".HTMLEncode("æåøåæå"))

나는 "자바 스크립트를위한 HTMLEncode 메소드"를 만들었다 .

angular의 위생 처리 기반 ... (es6 모듈 구문)

// ref: https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js
const SURROGATE_PAIR_REGEXP = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
const NON_ALPHANUMERIC_REGEXP = /([^\#-~| |!])/g;

const decodeElem = document.createElement('pre');


/**
 * Decodes html encoded text, so that the actual string may
 * be used.
 * @param value
 * @returns {string} decoded text
 */
export function decode(value) {
  if (!value) return '';
  decodeElem.innerHTML = value.replace(/</g, '&lt;');
  return decodeElem.textContent;
}


/**
 * Encodes all potentially dangerous characters, so that the
 * resulting string can be safely inserted into attribute or
 * element text.
 * @param value
 * @returns {string} encoded text
 */
export function encode(value) {
  if (value === null || value === undefined) return '';
  return String(value).
    replace(/&/g, '&amp;').
    replace(SURROGATE_PAIR_REGEXP, value => {
      var hi = value.charCodeAt(0);
      var low = value.charCodeAt(1);
      return '&#' + (((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000) + ';';
    }).
    replace(NON_ALPHANUMERIC_REGEXP, value => {
      return '&#' + value.charCodeAt(0) + ';';
    }).
    replace(/</g, '&lt;').
    replace(/>/g, '&gt;');
}

export default {encode,decode};

내가 아는 한 자바 스크립트에는 HTML Encode / Decode 메소드가 없습니다.

그러나 할 수있는 일은 JS를 사용하여 임의의 요소를 만들고 내부 텍스트를 설정 한 다음 innerHTML을 사용하여 읽는 것입니다.

jQuery를 사용하면 다음과 같이 작동합니다.

var helper = $('chalk & cheese').hide().appendTo('body');
var htmled = helper.html();
helper.remove();

아니면이 라인을 따라 뭔가.

한 입력 필드에서 다른 입력 필드로 값을 이동시키기 위해 값을 이스케이프 / 인코딩하지 않아도됩니다.

<form>
 <input id="button" type="button" value="Click me">
 <input type="hidden" id="hiddenId" name="hiddenId" value="I like cheese">
 <input type="text" id="output" name="output">
</form>
<script>
    $(document).ready(function(e) {
        $('#button').click(function(e) {
            $('#output').val($('#hiddenId').val());
        });
    });
</script>

JS는 원시 HTML이나 다른 것을 삽입하지 않습니다. 단지 DOM에게 value속성 (또는 속성; 확실하지 않음) 을 설정하도록 지시합니다 . 어느 쪽이든, DOM은 모든 인코딩 문제를 처리합니다. 당신이 사용하는 것과 같이 이상한 일을하지 않는 한 document.write또는eval 효과적으로 투명하게됩니다 HTML 인코딩.

결과를 유지하기 위해 새 텍스트 상자를 생성하는 것에 대해 이야기하는 경우 여전히 쉽습니다. HTML의 정적 부분을 jQuery에 전달한 다음 반환되는 객체의 나머지 속성 / 속성을 설정하십시오.

$box = $('<input type="text" name="whatever">').val($('#hiddenId').val());

비슷한 문제가 있었고 encodeURIComponentJavaScript 의 함수 를 사용하여 해결했습니다 ( documentation )

예를 들어, 귀하의 경우 다음을 사용하는 경우 :

<input id='hiddenId' type='hidden' value='chalk & cheese' />

과

encodeURIComponent($('#hiddenId').attr('value'))

당신은 얻을 것이다 chalk%20%26%20cheese . 공백도 유지됩니다.

내 경우에는 하나의 백 슬래시를 인코딩해야 했고이 코드는 완벽하게 작동합니다.

encodeURIComponent('name/surname')

그리고 나는 얻었다 name%2Fsurname

Server.HTMLEncode순수한 JavaScript로 작성된 Microsoft의 ASP에서 기능 을 에뮬레이트하는 약간의 내용이 있습니다 .

function htmlEncode(s) {
  var ntable = {
    "&": "amp",
    "<": "lt",
    ">": "gt",
    "\"": "quot"
  };
  s = s.replace(/[&<>"]/g, function(ch) {
    return "&" + ntable[ch] + ";";
  })
  s = s.replace(/[^ -\x7e]/g, function(ch) {
    return "&#" + ch.charCodeAt(0).toString() + ";";
  });
  return s;
}

결과 는 아포스트로피를 인코딩 하지 않지만 다른 HTML 스페셜 및 0x20-0x7e 범위를 벗어난 문자는 인코딩합니다.

내 순수 JS 기능 :

/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

JavaScript HTML 엔티티 인코딩 및 디코딩

jQuery를 사용하려는 경우 나는 이것을 찾았다:

http://www.jquerysdk.com/api/jQuery.htmlspecialchars

(jQuery SDK에서 제공하는 jquery.string 플러그인의 일부)

내가 생각하는 프로토 타입의 문제점은 자바 스크립트에서 기본 개체를 확장하고 사용한 jQuery와 호환되지 않는다는 것입니다. 물론 이미 jQuery가 아닌 프로토 타입을 사용하고 있다면 문제가되지 않습니다.

편집 : 또한 jQuery 용 프로토 타입의 문자열 유틸리티 포트 인이 있습니다.

http://stilldesigning.com/dotstring/

var htmlEnDeCode = (function() {
    var charToEntityRegex,
        entityToCharRegex,
        charToEntity,
        entityToChar;

    function resetCharacterEntities() {
        charToEntity = {};
        entityToChar = {};
        // add the default set
        addCharacterEntities({
            '&'     :   '&',
            '>'      :   '>',
            '&lt;'      :   '<',
            '&quot;'    :   '"',
            '&#39;'     :   "'"
        });
    }

    function addCharacterEntities(newEntities) {
        var charKeys = [],
            entityKeys = [],
            key, echar;
        for (key in newEntities) {
            echar = newEntities[key];
            entityToChar[key] = echar;
            charToEntity[echar] = key;
            charKeys.push(echar);
            entityKeys.push(key);
        }
        charToEntityRegex = new RegExp('(' + charKeys.join('|') + ')', 'g');
        entityToCharRegex = new RegExp('(' + entityKeys.join('|') + '|&#[0-9]{1,5};' + ')', 'g');
    }

    function htmlEncode(value){
        var htmlEncodeReplaceFn = function(match, capture) {
            return charToEntity[capture];
        };

        return (!value) ? value : String(value).replace(charToEntityRegex, htmlEncodeReplaceFn);
    }

    function htmlDecode(value) {
        var htmlDecodeReplaceFn = function(match, capture) {
            return (capture in entityToChar) ? entityToChar[capture] : String.fromCharCode(parseInt(capture.substr(2), 10));
        };

        return (!value) ? value : String(value).replace(entityToCharRegex, htmlDecodeReplaceFn);
    }

    resetCharacterEntities();

    return {
        htmlEncode: htmlEncode,
        htmlDecode: htmlDecode
    };
})();

이것은 ExtJS 소스 코드에서 가져온 것입니다.

<script>
String.prototype.htmlEncode = function () {
    return String(this)
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');

}

var aString = '<script>alert("I hack your site")</script>';
console.log(aString.htmlEncode());
</script>

출력합니다 : <script>alert("I hack your site")</script>

.htmlEncode ()는 일단 정의 된 모든 문자열에서 액세스 할 수 있습니다.

주어진 값을 인코딩합니다

  var htmlEncodeContainer = $('<div />');
  function htmlEncode(value) {
    if (value) {
      return htmlEncodeContainer.text(value).html();
    } else {
      return '';
    }
  }

내 Domain \ User 문자열에서 백 슬래시와 관련된 문제가 발생했습니다.

Anentropic의 답변에서 다른 탈출에 이것을 추가했습니다.

.replace(/\\/g, '\')

내가 찾은 것 : JavaScript에서 백 슬래시를 피하는 방법?

무엇을 따기 escapeHTML()prototype.js에에하고있다

이 스크립트를 추가하면 HTML을 이스케이프하는 데 도움이됩니다.

String.prototype.escapeHTML = function() { 
    return this.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
}

이제 다음과 같이 스크립트의 문자열에서 escapeHTML 메서드를 호출 할 수 있습니다.

var escapedString = "<h1>this is HTML</h1>".escapeHTML();
// gives: "&lt;h1&gt;this is HTML&lt;/h1&gt;"

전체 프로토 타입을 포함하지 않고도 간단한 솔루션을 찾는 사람에게 도움이되기를 바랍니다.

여기에 다른 답변 중 일부를 사용하여 구별 된 인코딩 된 문자 수에 관계없이 한 번의 모든 관련 문자를 대체하는 버전을 만들었 replace()으므로 (한 번만 호출 ) 더 큰 문자열의 경우 더 빠릅니다.

존재하거나 다른 라이브러리에 DOM API를 사용하지 않습니다.

window.encodeHTML = (function() {
    function escapeRegex(s) {
        return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }
    var encodings = {
        '&'  : '&',
        '"'  : '"',
        '\'' : ''',
        '<'  : '&lt;',
        '>'  : '&gt;',
        '\\' : '&#x2F;'
    };
    function encode(what) { return encodings[what]; };
    var specialChars = new RegExp('[' +
        escapeRegex(Object.keys(encodings).join('')) +
    ']', 'g');

    return function(text) { return text.replace(specialChars, encode); };
})();

한 번 실행하면 이제 전화 할 수 있습니다

encodeHTML('<>&"\'')

얻기 위해 <>&"'