Najlepszy sposób na przechowywanie JSON w atrybucie HTML?

Muszę umieścić obiekt JSON w atrybucie elementu HTML.

1. Kod HTML nie musi sprawdzać poprawności.

   Odpowiedział Quentin: Przechowuj JSON w data-*atrybucie , który jest prawidłowym HTML5.

2. Obiekt JSON może mieć dowolny rozmiar - tj. Ogromny

   Odpowiedział Maiku Mori: Limit dla atrybutu HTML to potencjalnie 65536 znaków .

3. Co się stanie, jeśli JSON zawiera znaki specjalne? na przykład {foo: '<"bar/>'}

   Odpowiedział Quentin: Zakoduj ciąg JSON przed umieszczeniem go w atrybucie, zgodnie ze zwykłymi konwencjami. W przypadku PHP użyj funkcji . htmlentities()

EDYCJA - Przykładowe rozwiązanie wykorzystujące PHP i jQuery

Zapisywanie JSON w atrybucie HTML:

<?php
    $data = array(
        '1' => 'test',
        'foo' => '<"bar/>'
    );
    $json = json_encode($data);
?>

<a href="#" data-json="<?php echo htmlentities($json, ENT_QUOTES, 'UTF-8'); ?>">CLICK ME</a>

Pobieranie JSON za pomocą jQuery:

$('a').click(function() {

    // Read the contents of the attribute (returns a string)
    var data = $(this).data('json');

    // Parse the string back into a proper JSON object
    var json = $.parseJSON($(this).data('json'));

    // Object now available
    console.log(json.foo);

});

Kod HTML nie musi sprawdzać poprawności.

Dlaczego nie? Walidacja to naprawdę łatwa kontrola jakości, która wyłapuje wiele błędów. Użyj data-*atrybutu HTML 5 .

Obiekt JSON może mieć dowolny rozmiar (tj. Ogromny).

Nie widziałem żadnej dokumentacji dotyczącej ograniczeń przeglądarek dotyczących rozmiarów atrybutów.

Jeśli napotkasz je, zapisz dane w pliku <script>. Zdefiniuj obiekt i przypisz element ids do nazw właściwości w tym obiekcie.

Co się stanie, jeśli JSON zawiera znaki specjalne? (np. {test: '<"myString />'})

Po prostu postępuj zgodnie ze zwykłymi regułami włączania niezaufanych danych do wartości atrybutów. Użyj &i "(jeśli zawijasz wartość atrybutu w podwójne cudzysłowy) lub '(jeśli zawijasz wartość atrybutu w pojedyncze cudzysłowy).

Należy jednak pamiętać, że nie jest to format JSON (który wymaga, aby nazwy właściwości były ciągami, a ciągi były rozdzielane tylko podwójnymi cudzysłowami).

W zależności od tego, gdzie go umieścisz,

• W sposób <div>jak pytasz, trzeba upewnić się, że JSON nie zawiera specjalne HTML, który mógłby rozpocząć komentarz, tag HTML, wbudowany doctype, itd. Musisz uciec przynajmniej <, i &w taki sposób, że oryginalna postać nie pojawiają się w sekwencji ucieczki.
• W <script>elementach musisz upewnić się, że JSON nie zawiera tagu końcowego </script>ani granicy ucieczki tekstu: <!--lub -->.
• W przypadku obsługi zdarzeń musisz upewnić się, że JSON zachowuje swoje znaczenie, nawet jeśli zawiera elementy wyglądające jak encje HTML i nie narusza granic atrybutów ( "lub ').

W pierwszych dwóch przypadkach (i dla starych parserów JSON) należy zakodować U + 2028 i U + 2029, ponieważ są to znaki nowej linii w JavaScript, mimo że są dozwolone w ciągach niezakodowanych w JSON.

Aby uzyskać poprawność, musisz uciekać \i cytować znaki JSON i nigdy nie jest złym pomysłem zawsze kodować NUL.

Jeśli kod HTML może być obsługiwany bez kodowania treści, należy kodować, +aby zapobiec atakom UTF-7 .

W każdym razie poniższa tabela zmiany znaczenia będzie działać:

• NUL -> \u0000
• CR -> \nlub\u000a
• LF -> \rlub\u000d
• " -> \u0022
• & -> \u0026
• ' -> \u0027
• + -> \u002b
• /-> \/lub\u002f
• < -> \u003c
• > -> \u003e
• \-> \\lub\u005c
• U + 2028 ->\u2028
• U + 2029 -> \u2029

Zatem wartość ciągu JSON dla tekstu Hello, <World>!z nową linią na końcu będzie "Hello, \u003cWorld\u003e!\r\n".

Innym sposobem, w jaki możesz to zrobić, jest umieszczenie danych json w <script>tagu, ale nie za pomocą type="text/javascript", ale z type="text/bootstrap"lub type="text/json"typem, aby uniknąć wykonywania javascript.

Następnie w jakimś miejscu swojego programu możesz poprosić o to w ten sposób:

function getData(key) {
  try {
    return JSON.parse($('script[type="text/json"]#' + key).text());
  } catch (err) { // if we have not valid json or dont have it
    return null;
  } 
}

Po stronie serwera możesz zrobić coś takiego (ten przykład z php i twig ):

<script id="my_model" type="text/json">
  {{ my_model|json_encode()|raw }}
</script>

Inną opcją jest kodowanie ciągu JSON przy użyciu base64 i jeśli chcesz go użyć w swoim javascript, zdekoduj go za pomocą atob()funkcji.

var data = JSON.parse(atob(base64EncodedJSON));

Możesz użyć knockoutjs,

<p>First name: <strong data-bind="text: firstName" >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

knockout.js

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
    this.firstName = "Jayson";
    this.lastName = "Monterroso";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

Wynik

Imię: Jayson Nazwisko: Monterroso

Sprawdź to: http://learn.knockoutjs.com/

Nie ma tu nic nadzwyczajnego. W PHP przeprowadź ciąg JSON, htmlspecialcharsaby upewnić się, że żadne znaki specjalne nie mogą być interpretowane jako HTML. Z Javascript nie trzeba uciekać; po prostu ustaw atrybut i gotowe.

Poniższy kod zadziała w przypadku prostych obiektów JSON.

Kodować:

var jsonObject = { numCells: 5, cellWidth: 1242 };
var attributeString = escape(JSON.stringify(jsonObject));

Rozszyfrować:

var jsonString = unescape(attributeString);
var jsonObject = JSON.parse(jsonString);

To, co możesz zrobić, to użyć cdata wokół swojego elementu / elementów w ten sposób

<![CDATA[  <div class='log' mydata='${aL.logData}'>${aL.logMessage}</div>     ]]>  

gdzie mydata to nieprzetworzony ciąg json. Mam nadzieję, że to pomoże tobie i innym.

Inną myślą, której można by użyć, jest zapisanie danych JSON jako ciągu base64 w atrybucie, a następnie użycie window.atoblub w window.btoacelu przywrócenia ich do użytecznych danych JSON.

<?php
$json = array("data"=>"Some json data thing");
echo "<div data-json=\"".base64_encode(json_encode($json))."\"></div>";
?>