Phương pháp hay nhất để nhúng JSON tùy ý vào DOM?

Tôi đang nghĩ đến việc nhúng JSON tùy ý vào DOM như thế này:

<script type="application/json" id="stuff">
    {
        "unicorns": "awesome",
        "abc": [1, 2, 3]
    }
</script>

Điều này tương tự như cách người ta có thể lưu trữ một mẫu HTML tùy ý trong DOM để sử dụng sau này với công cụ mẫu JavaScript. Trong trường hợp này, sau đó chúng tôi có thể truy xuất JSON và phân tích cú pháp nó bằng:

var stuff = JSON.parse(document.getElementById('stuff').innerHTML);

Điều này hoạt động , nhưng nó có phải là cách tốt nhất? Điều này có vi phạm bất kỳ thông lệ hoặc tiêu chuẩn tốt nhất nào không?

Lưu ý: Tôi không tìm kiếm các giải pháp thay thế để lưu trữ JSON trong DOM, tôi đã quyết định đó là giải pháp tốt nhất cho vấn đề cụ thể mà tôi đang gặp phải. Tôi chỉ đang tìm cách tốt nhất để làm điều đó.

Tôi nghĩ rằng phương pháp ban đầu của bạn là tốt nhất. Thông số HTML5 thậm chí còn giải quyết việc sử dụng này:

"Khi được sử dụng để bao gồm các khối dữ liệu (trái ngược với tập lệnh), dữ liệu phải được nhúng nội dòng, định dạng của dữ liệu phải được cung cấp bằng thuộc tính type, thuộc tính src không được chỉ định và nội dung của phần tử tập lệnh phải tuân theo các yêu cầu được xác định cho định dạng được sử dụng. "

Đọc tại đây: http://dev.w3.org/html5/spec/Overview.html#the-script-element

Bạn đã làm chính xác điều đó. Những gì không được yêu? Không cần mã hóa ký tự với dữ liệu thuộc tính. Bạn có thể định dạng nó nếu bạn muốn. Nó diễn đạt và mục đích sử dụng rõ ràng. Nó không giống như một cuộc tấn công (ví dụ: sử dụng CSS để ẩn phần tử "tàu sân bay" của bạn). Nó hoàn toàn hợp lệ.

Theo hướng chung, tôi sẽ thử sử dụng các thuộc tính dữ liệu HTML5 để thay thế. Không có gì ngăn cản bạn nhập JSON hợp lệ. ví dụ:

<div id="mydiv" data-unicorns='{"unicorns":"awesome", "abc":[1,2,3]}' class="hidden"></div>

Nếu bạn đang sử dụng jQuery, thì việc truy xuất nó dễ dàng như sau:

var stuff = JSON.parse($('#mydiv').attr('data-unicorns'));

Phương pháp nhúng json vào thẻ script này tiềm ẩn một vấn đề bảo mật. Giả sử dữ liệu json có nguồn gốc từ đầu vào của người dùng, có thể tạo một thành viên dữ liệu sẽ thoát ra khỏi thẻ script và cho phép đưa trực tiếp vào dom. Xem tại đây:

http://jsfiddle.net/YmhZv/1/

Đây là mũi tiêm

<script type="application/json" id="stuff">
{
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ",
}
</script>

Không có cách nào xung quanh việc thoát / mã hóa.

Xem Quy tắc # 3.1 trong trang tính ngăn chặn XSS của OWASP.

Giả sử bạn muốn đưa JSON này vào HTML:

{
    "html": "<script>alert(\"XSS!\");</script>"
}

Tạo một ẩn <div>trong HTML. Tiếp theo, thoát khỏi JSON của bạn bằng cách mã hóa các thực thể không an toàn (ví dụ: &, <,>, ", 'và, /) và đặt nó bên trong phần tử.

<div id="init_data" style="display:none">
        {&#34;html&#34;:&#34;&lt;script&gt;alert(\&#34;XSS!\&#34;);&lt;/script&gt;&#34;}
</div>

Bây giờ bạn có thể truy cập nó bằng cách đọc textContentphần tử bằng JavaScript và phân tích cú pháp nó:

var text = document.querySelector('#init_data').textContent;
var json = JSON.parse(text);
console.log(json); // {html: "<script>alert("XSS!");</script>"}

Tôi khuyên bạn nên đặt JSON vào một tập lệnh nội tuyến với một hàm gọi lại (loại JSONP ):

<script>
someCallback({
    "unicorns": "awesome",
    "abc": [1, 2, 3]
});
</script>

Nếu tập lệnh đang thực thi được tải sau tài liệu, bạn có thể lưu trữ nó ở đâu đó, có thể với một đối số định danh bổ sung: someCallback("stuff", { ... });

Đề xuất của tôi là giữ dữ liệu JSON trong các .jsontệp bên ngoài và sau đó truy xuất các tệp đó qua Ajax. Bạn không đặt mã CSS và JavaScript vào trang web (nội dòng), vậy tại sao bạn lại làm điều đó với JSON?

HTML5 bao gồm một <data>phần tử để giữ cho máy có thể đọc được dữ liệu. Để thay thế — có lẽ an toàn hơn — <script type="application/json">bạn có thể bao gồm dữ liệu JSON của mình bên trong valuethuộc tính của phần tử đó.

const jsonData = document.querySelector('.json-data');
const data = JSON.parse(jsonData.value);

console.log(data)

<data class="json-data" value='
  {
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "careful": "to escape &#39; quotes"
  }
'></data>

Trong trường hợp này, bạn cần thay thế tất cả các dấu nháy đơn bằng 'hoặc bằng "nếu bạn chọn đặt giá trị bằng dấu nháy kép. Nếu không thì nguy cơ tấn công XSS của bạn như các câu trả lời khác đã đề xuất.