Mất mã hóa HTML khi đọc thuộc tính từ trường đầu vào

Tôi đang sử dụng JavaScript để lấy một giá trị từ một trường ẩn và hiển thị nó trong hộp văn bản. Giá trị trong trường ẩn được mã hóa.

Ví dụ,

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

bị kéo vào

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

thông qua một số jQuery để lấy giá trị từ trường ẩn (tại thời điểm này tôi mất mã hóa):

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

Vấn đề là khi tôi đọc chalk & cheesetừ trường ẩn, JavaScript dường như mất mã hóa. Tôi không muốn giá trị được chalk & cheese. Tôi muốn nghĩa đen amp;được giữ lại.

Có thư viện JavaScript hoặc phương thức jQuery sẽ mã hóa chuỗi HTML không?

EDIT: Câu trả lời này đã được đăng cách đây rất lâu và htmlDecodechức năng đã giới thiệu lỗ hổng XSS. Nó đã được sửa đổi thay đổi thành phần tạm thời từ a divsang textareagiảm cơ hội XSS. Nhưng hiện nay, tôi sẽ khuyến khích bạn sử dụng API DOMParser như được đề xuất trong các trang mạng khác .

Tôi sử dụng các chức năng này:

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

Về cơ bản, một yếu tố textarea được tạo ra trong bộ nhớ, nhưng nó không bao giờ được thêm vào tài liệu.

Trên htmlEncodehàm tôi đặt innerTextphần tử và lấy mã hóa innerHTML; trên htmlDecodehàm tôi đặt innerHTMLgiá trị của phần tử vàinnerText được lấy.

Kiểm tra một ví dụ đang chạy ở đây .

Thủ thuật jQuery không mã hóa dấu ngoặc kép và trong IE nó sẽ loại bỏ khoảng trắng của bạn.

Dựa trên templatetag thoát trong Django, mà tôi đoán là đã được sử dụng / kiểm tra rất nhiều rồi, tôi đã thực hiện chức năng này là những gì cần thiết.

Nó đơn giản hơn (và có thể nhanh hơn) so với bất kỳ cách giải quyết nào cho vấn đề tước khoảng trắng - và nó mã hóa các dấu ngoặc kép, điều này rất cần thiết nếu bạn sẽ sử dụng kết quả bên trong một giá trị thuộc tính chẳng hạn.

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

Cập nhật 2013-06-17:
Trong quá trình tìm kiếm lối thoát nhanh nhất, tôi đã tìm thấy cách triển khai replaceAllphương pháp này:
http://dumpsite.com/forum/index.php?topic=4.msg29#msg29
(cũng được tham khảo tại đây: Nhanh nhất phương pháp thay thế tất cả các phiên bản của một ký tự trong chuỗi )
Một số kết quả thực hiện tại đây:
http://jsperf.com/htmlencoderegex/25

Nó cung cấp chuỗi kết quả giống hệt nhau cho chuỗi dựng sẵn replaceở trên. Tôi sẽ rất vui nếu ai đó có thể giải thích tại sao nó nhanh hơn!?

Cập nhật 2015-03-04:
Tôi chỉ nhận thấy rằng AngularJS đang sử dụng chính xác phương pháp trên:
https://github.com/angular/angular.js/blob/v1.3.14/src/ngSanitize/sanitize.js#L435

Họ thêm một vài tinh chỉnh - dường như họ đang xử lý một vấn đề Unicode tối nghĩa cũng như chuyển đổi tất cả các ký tự không chữ và số thành các thực thể. Tôi không có ấn tượng gì về điều này là không cần thiết miễn là bạn có bộ ký tự UTF8 được chỉ định cho tài liệu của bạn.

Tôi sẽ lưu ý rằng (4 năm sau) Django vẫn không làm một trong những điều này, vì vậy tôi không chắc chúng quan trọng như thế nào:
https://github.com/django/django/blob/1.8b1/django/utils /html.py#L44

Cập nhật 2016-04-06:
Bạn cũng có thể muốn thoát dấu gạch chéo về phía trước /. Điều này là không bắt buộc đối với mã hóa HTML chính xác, tuy nhiên, OWASP khuyến nghị sử dụng như một biện pháp an toàn chống XSS. (cảm ơn @JNF đã gợi ý điều này trong các bình luận)

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

Đây là phiên bản không phải là jQuery nhanh hơn đáng kể so với cả .html()phiên bản jQuery và .replace()phiên bản. Điều này bảo tồn tất cả các khoảng trắng, nhưng giống như phiên bản jQuery, không xử lý các trích dẫn.

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

Tốc độ: http://jsperf.com/htmlencoderegex/17

Bản giới thiệu:

Đầu ra:

Kịch bản:

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>

Tôi biết đây là một câu hỏi cũ, nhưng tôi muốn đăng một biến thể của câu trả lời được chấp nhận sẽ hoạt động trong IE mà không xóa các dòng:

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

Underscore cung cấp _.escape()và _.unescape()phương pháp làm điều này.

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

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

Câu trả lời tốt. Lưu ý rằng nếu giá trị cần mã hóa là undefinedhoặc nullvới jQuery 1.4.2, bạn có thể gặp các lỗi như:

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

HOẶC LÀ

Uncaught TypeError: Object has no method 'html'

Giải pháp là sửa đổi chức năng để kiểm tra giá trị thực tế:

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

Đối với những người thích javascript đơn giản, đây là phương pháp tôi đã sử dụng thành công:

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

FWIW, mã hóa không bị mất. Mã hóa được sử dụng bởi trình phân tích cú pháp đánh dấu (trình duyệt) trong quá trình tải trang. Khi nguồn được đọc và phân tích cú pháp và trình duyệt đã tải DOM vào bộ nhớ, mã hóa đã được phân tích cú pháp thành những gì nó thể hiện. Vì vậy, tại thời điểm JS của bạn được thực thi để đọc bất cứ thứ gì trong bộ nhớ, char mà nó nhận được là những gì mã hóa được thể hiện.

Tôi có thể đang hoạt động nghiêm ngặt về ngữ nghĩa ở đây, nhưng tôi muốn bạn hiểu mục đích của mã hóa. Từ "mất" làm cho nó có vẻ như một cái gì đó không hoạt động như nó nên.

Nhanh hơn mà không cần Jquery. Bạn có thể mã hóa mọi ký tự trong chuỗi của mình:

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

Hoặc chỉ nhắm mục tiêu các nhân vật chính để lo lắng về (&, inebreaks, <,>, "và ') như:

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>

Nguyên mẫu có nó được tích hợp trong lớp String . Vì vậy, nếu bạn đang sử dụng / kế hoạch sử dụng Prototype, nó sẽ thực hiện một số thứ như:

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

Đây là một giải pháp javascript đơn giản. Nó mở rộng đối tượng String bằng một phương thức "HTMLEncode" có thể được sử dụng trên một đối tượng không có tham số hoặc với tham số.

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("æåøåæå"))

Tôi đã thực hiện một "phương pháp HTMLEncode cho javascript" .

Dựa trên vệ sinh góc cạnh ... (cú pháp mô-đun 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};

Theo như tôi biết thì không có bất kỳ phương pháp Mã hóa / Giải mã HTML chuyển tiếp nào trong javascript.

Tuy nhiên, những gì bạn có thể làm là sử dụng JS để tạo một phần tử tùy ý, đặt văn bản bên trong của nó, sau đó đọc nó bằng InternalHTML.

Giả sử, với jQuery, điều này sẽ hoạt động:

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

Hoặc một cái gì đó dọc theo những dòng này.

Bạn không cần phải thoát / mã hóa các giá trị để đưa chúng từ trường này sang trường khác.

<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 không chèn HTML thô hay bất cứ thứ gì; nó chỉ bảo DOM đặt thuộc valuetính (hoặc thuộc tính; không chắc chắn). Dù bằng cách nào, DOM xử lý bất kỳ vấn đề mã hóa nào cho bạn. Trừ khi bạn đang làm một cái gì đó kỳ lạ như sử dụng document.writehoặceval , mã hóa HTML sẽ có hiệu quả minh bạch.

Nếu bạn đang nói về việc tạo một hộp văn bản mới để giữ kết quả ... thì vẫn dễ dàng như vậy. Chỉ cần chuyển phần tĩnh của HTML cho jQuery và sau đó đặt phần còn lại của các thuộc tính / thuộc tính trên đối tượng mà nó trả về cho bạn.

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

Tôi đã có một vấn đề tương tự và giải quyết nó bằng cách sử dụng chức năng encodeURIComponenttừ JavaScript ( tài liệu )

Ví dụ: trong trường hợp của bạn nếu bạn sử dụng:

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

và

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

bạn sẽ nhận được chalk%20%26%20cheese. Ngay cả không gian được giữ.

Trong trường hợp của tôi, tôi đã phải mã hóa một dấu gạch chéo ngược và mã này hoạt động hoàn hảo

encodeURIComponent('name/surname')

và tôi đã nhận name%2Fsurname

Dưới đây là một chút mô phỏng Server.HTMLEncodechức năng từ ASP của Microsoft, được viết bằng JavaScript thuần túy:

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

Kết quả không mã hóa dấu nháy đơn, nhưng mã hóa các đặc biệt HTML khác và bất kỳ ký tự nào ngoài phạm vi 0x20-0x7e.

Hàm JS thuần túy của tôi:

/**
 * 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;
}

Mã hóa và giải mã thực thể HTML HTML

Nếu bạn muốn sử dụng jQuery. Tôi đã tìm thấy cái này:

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

(một phần của plugin jquery.opes được cung cấp bởi jQuery SDK)

Vấn đề với Prototype tôi tin là nó mở rộng các đối tượng cơ sở trong JavaScript và sẽ không tương thích với bất kỳ jQuery nào bạn có thể đã sử dụng. Tất nhiên, nếu bạn đã sử dụng Prototype và không phải jQuery, thì đó sẽ không phải là vấn đề.

EDIT: Ngoài ra còn có cái này, đây là một cổng của các tiện ích chuỗi của Prototype cho jQuery:

http://stilldesigning.com/dotopes/

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

Đây là từ mã nguồn 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>

Sẽ xuất: <script>alert("I hack your site")</script>

.htmlEncode () sẽ có thể truy cập được trên tất cả các chuỗi khi được xác định.

HtmlEncodes giá trị đã cho

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

Tôi gặp phải một số vấn đề với dấu gạch chéo ngược trong chuỗi Domain \ User của tôi.

Tôi đã thêm cái này vào những lối thoát khác từ câu trả lời của Anentropic

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

Mà tôi tìm thấy ở đây: Làm thế nào để thoát dấu gạch chéo ngược trong JavaScript?

Chọn những gì escapeHTML()đang làm trong nguyên mẫu.js

Thêm tập lệnh này giúp bạn thoátHTML:

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

bây giờ bạn có thể gọi phương thức escHTML trên các chuỗi trong tập lệnh của mình, như:

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

Hy vọng nó sẽ giúp bất cứ ai tìm kiếm một giải pháp đơn giản mà không cần phải bao gồm toàn bộ nguyên mẫu.js

Sử dụng một số câu trả lời khác ở đây, tôi đã tạo một phiên bản thay thế tất cả các ký tự thích hợp trong một lần, bất kể số lượng ký tự được mã hóa riêng biệt (chỉ một cuộc gọi đến replace()) vì vậy sẽ nhanh hơn cho các chuỗi lớn hơn.

Nó không dựa vào API DOM để tồn tại hoặc trên các thư viện khác.

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

Đã chạy nó một lần, bây giờ bạn có thể gọi

encodeHTML('<>&"\'')

Để có được <>&"'