Thoát chuỗi HTML bằng jQuery

Có ai biết một cách dễ dàng để thoát HTML khỏi các chuỗi trong jQuery không? Tôi cần có khả năng vượt qua một chuỗi tùy ý và thoát nó đúng cách để hiển thị trong trang HTML (ngăn chặn các cuộc tấn công tiêm JavaScript / HTML). Tôi chắc chắn có thể mở rộng jQuery để làm điều này, nhưng tôi không biết đủ về khung công tác tại thời điểm này để thực hiện điều này.

Vì bạn đang sử dụng jQuery , bạn chỉ có thể đặt thuộc tính của thành phần 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;

Ngoài ra còn có giải pháp từ 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"

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

Nếu bạn đang thoát khỏi HTML, chỉ có ba điều mà tôi có thể nghĩ rằng điều đó thực sự cần thiết:

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

Tùy thuộc vào trường hợp sử dụng của bạn, bạn cũng có thể cần phải làm những việc như "để ". Nếu danh sách đủ lớn, tôi chỉ cần sử dụng một mảng:

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() sẽ chỉ thoát nó cho URL, không phải cho HTML.

Đủ dễ dàng để sử dụng gạch dưới:

_.escape(string) 

Underscore là một thư viện tiện ích cung cấp rất nhiều tính năng mà js bản địa không cung cấp. Ngoài ra còn có lodash là API giống như gạch dưới nhưng được viết lại để có hiệu suất cao hơn.

Tôi đã viết một chức năng nhỏ bé mà làm điều này. Nó chỉ thoát ", &, <và >(nhưng thường đó là tất cả bạn cần anyway). Nó thanh lịch hơn một chút sau đó các giải pháp được đề xuất trước đó ở chỗ nó chỉ sử dụng một .replace() để thực hiện tất cả các chuyển đổi. ( EDIT 2: Giảm độ phức tạp của mã làm cho hàm nhỏ hơn và gọn gàng hơn, nếu bạn tò mò về mã gốc, hãy xem phần cuối của câu trả lời này.)

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

Đây là Javascript đơn giản, không sử dụng jQuery.

Chạy trốn /và 'quá

Chỉnh sửa để đáp lại bình luận của mkuity .

Các chức năng trên có thể dễ dàng được mở rộng để bao gồm bất kỳ nhân vật. Để chỉ định thêm ký tự để thoát, chỉ cần chèn cả hai trong lớp ký tự trong biểu thức chính quy (tức là bên trong /[...]/g) và dưới dạng một mục trong chrđối tượng. ( EDIT 2: Rút ngắn chức năng này theo cách tương tự.)

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

Lưu ý cách sử dụng 'dấu nháy đơn ở trên (thực thể tượng trưng 'có thể đã được sử dụng thay thế - nó được định nghĩa bằng XML, nhưng ban đầu không được bao gồm trong đặc tả HTML và do đó có thể không được hỗ trợ bởi tất cả các trình duyệt. Xem: Bài viết Wikipedia về mã hóa ký tự HTML. ). Tôi cũng nhớ lại việc đọc ở đâu đó rằng sử dụng các thực thể thập phân được hỗ trợ rộng rãi hơn so với sử dụng thập lục phân, nhưng dường như tôi không thể tìm thấy nguồn cho điều đó ngay bây giờ. (Và không thể có nhiều trình duyệt ngoài đó không hỗ trợ các thực thể thập lục phân.)

Lưu ý: Việc thêm /và 'vào danh sách các ký tự thoát không hoàn toàn hữu ích, vì chúng không có bất kỳ ý nghĩa đặc biệt nào trong HTML và không cần phải thoát.

escapeHtmlChức năng gốc

EDIT 2: Hàm ban đầu đã sử dụng một biến ( chr) để lưu trữ đối tượng cần thiết cho cuộc .replace()gọi lại. Biến này cũng cần một hàm ẩn danh bổ sung để phạm vi nó, làm cho hàm (không cần thiết) lớn hơn một chút và phức tạp hơn.

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

Tôi chưa thử nghiệm phiên bản nào trong hai phiên bản nhanh hơn. Nếu bạn làm như vậy, hãy thêm thông tin và liên kết về nó ở đây.

Tôi nhận ra rằng tôi đến bữa tiệc này muộn thế nào, nhưng tôi có một giải pháp rất dễ dàng mà không cần jQuery.

escaped = new Option(unescaped).innerHTML;

Chỉnh sửa: Điều này không thoát khỏi dấu ngoặc kép. Trường hợp duy nhất mà dấu ngoặc kép cần được thoát là nếu nội dung sẽ được dán nội tuyến vào một thuộc tính trong chuỗi HTML. Thật khó cho tôi để tưởng tượng một trường hợp làm điều này sẽ được thiết kế tốt.

Chỉnh sửa 3: Để có giải pháp nhanh nhất, hãy kiểm tra câu trả lời ở trên từ Saram. Cái này là ngắn nhất

Đây là một hàm JavaScript rõ ràng. Nó sẽ thoát văn bản như "một vài <nhiều" thành "một vài & lt; nhiều".

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

Sau các thử nghiệm cuối cùng, tôi có thể đề xuất giải pháp javaScript (DOM) tương thích trình duyệt nhanh nhất và hoàn toàn chéo :

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

Nếu bạn lặp lại nhiều lần, bạn có thể làm điều đó với các biến đã được chuẩn bị một lần:

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

Nhìn vào so sánh hiệu suất cuối cùng của tôi ( câu hỏi ngăn xếp ).

Hãy thử lib Underscore.opes , nó hoạt động với jQuery.

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

đầu ra:

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

Tôi đã nâng cao ví dụ mustache.js thêm escapeHTML()phương thức vào đối tượng chuỗi.

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

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

Cách đó khá dễ sử dụng. "Some <text>, more Text&Text".escapeHTML()

escape()và unescape()được dự định để mã hóa / giải mã chuỗi cho URL, không phải HTML.

Trên thực tế, tôi sử dụng đoạn mã sau để thực hiện thủ thuật không yêu cầu bất kỳ khuôn khổ nào:

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

Nếu bạn có underscore.js, hãy sử dụng _.escape(hiệu quả hơn phương thức jQuery được đăng ở trên):

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

Nếu bạn đang đi theo lộ trình regex, có một lỗi trong ví dụ của tghw ở trên.

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

Đây là một ví dụ an toàn tốt đẹp ...

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

Bạn có thể dễ dàng làm điều đó với vanilla js.

Đơn giản chỉ cần thêm một nút văn bản tài liệu. Nó sẽ được thoát khỏi trình duyệt.

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

Không có biến toàn cục, một số tối ưu hóa bộ nhớ. Sử dụng:

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

kết quả là:

"some<tag>and&symbol©"

2 phương pháp đơn giản không yêu cầu ...

Bạn có thể mã hóa tất cả các ký tự trong chuỗi của mình như thế này:

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

Hoặc chỉ cần nhắm mục tiêu các nhân vật chính phải lo lắng về &, ngắt dòng, <, >, "và 'như:

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>

Ví dụ thoát JavaScript đơn giản:

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

hoạt động như một lá bùa

Câu trả lời này cung cấp các phương thức jQuery và JS bình thường, nhưng đây là cách ngắn nhất mà không cần sử dụng DOM:

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

Chuỗi thoát: It%27s%20%3E%2020%25%20less%20complicated%20this%20way.

Nếu không gian thoát làm phiền bạn, hãy thử:

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

Chuỗi thoát: It%27s %3E 20%25 less complicated this way.

Thật không may, escape()chức năng này không được dùng trong phiên bản JavaScript 1.5 . encodeURI()hoặc encodeURIComponent()là các lựa chọn thay thế, nhưng chúng bỏ qua ', vì vậy dòng mã cuối cùng sẽ biến thành thế này:

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

Tất cả các trình duyệt chính vẫn hỗ trợ mã ngắn và với số lượng trang web cũ, tôi nghi ngờ điều đó sẽ sớm thay đổi.

ES6 một lớp lót cho giải pháp từ mustache.js

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

Nếu bạn đang lưu thông tin này trong cơ sở dữ liệu , việc thoát HTML bằng cách sử dụng tập lệnh phía máy khách là sai , điều này nên được thực hiện trong máy chủ . Nếu không, nó dễ dàng bỏ qua bảo vệ XSS của bạn.

Để làm rõ quan điểm của tôi, đây là một ví dụ sử dụng một trong những câu trả lời:

Hãy nói rằng bạn đang sử dụng hàm escHtml để thoát Html khỏi một bình luận trong blog của bạn và sau đó đăng nó lên máy chủ của bạn.

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

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

Người dùng có thể:

• Chỉnh sửa các tham số yêu cầu POST và thay thế nhận xét bằng mã javascript.
• Ghi đè chức năng escHtml bằng bảng điều khiển trình duyệt.

Nếu người dùng dán đoạn mã này vào bảng điều khiển, nó sẽ bỏ qua xác thực XSS:

function escapeHtml(string){
   return string
}

Tất cả các giải pháp đều vô dụng nếu bạn không ngăn chặn tái thoát, ví dụ như hầu hết các giải pháp sẽ tiếp tục thoát &đến &.

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