JSON'u bir HTML özniteliğinde saklamanın en iyi yolu?

Bir HTML öğesindeki bir özniteliğe bir JSON nesnesi koymam gerekiyor.

1. HTML'nin doğrulanması gerekmez.

   Quentin tarafından cevaplandı: JSON'yi geçerli HTML5 olan bir data-*öznitelikte saklayın.

2. JSON nesnesi herhangi bir boyutta olabilir - yani çok büyük

   Maiku Mori tarafından cevaplandı: Bir HTML niteliği için sınır potansiyel olarak 65536 karakterdir .

3. Ya JSON özel karakterler içeriyorsa? Örneğin {foo: '<"bar/>'}

   Quentin tarafından yanıtlandı: JSON dizesini olağan kurallara göre özniteliğe koymadan önce kodlayın. PHP için işlevi kullanın . htmlentities()

EDIT - PHP ve jQuery kullanan örnek çözüm

JSON'yi HTML özelliğine yazma:

<?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>

JSON'u jQuery kullanarak alma:

$('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);

});

HTML'nin doğrulanması gerekmez.

Neden olmasın? Doğrulama, birçok hatayı yakalayan gerçekten kolay bir QA'dır. Bir HTML 5 data-*özelliği kullanın .

JSON nesnesi herhangi bir boyutta olabilir (yani çok büyük).

Boyutları ilişkilendirmek için tarayıcı sınırlarıyla ilgili herhangi bir belge görmedim.

Bunlarla karşılaşırsanız, verileri bir <script>. Bir nesne tanımlayın ve öğeleri idbu nesnedeki özellik adlarıyla eşleyin.

Ya JSON özel karakterler içeriyorsa? (örneğin {test: '<"myString />'})

Öznitelik değerlerine güvenilmeyen verileri dahil etmek için normal kuralları izleyin. Kullanım &ve "(eğer çift tırnak öznitelik değeri sarma eğer) ya da '(eğer sen sarma tek tırnak içinde öznitelik değeri).

Bununla birlikte, bunun JSON olmadığını unutmayın (bu, özellik adlarının dizeler olmasını ve dizelerin yalnızca çift tırnaklarla sınırlandırılmasını gerektirir).

Nereye koyduğunuza bağlı olarak,

• Bir de <div>istediğin gibi, JSON bir etiket, HTML açıklama, gömülü Doctype'ı başlayabileceğini HTML özel içermediğinden emin olmalısınız vb En azından kaçmak gerekir <ve &özgün karakteri yok öyle bir şekilde kaçan sırayla görünür.
• Gelen <script>elemanları JSON bir uç etiketi içermiyorsa sağlamak gerekir </script>: ya kaçan metin sınırını <!--ya -->.
• Olay işleyicilerinde, HTML varlıkları gibi görünen ve öznitelik sınırlarını ( "veya ') bozmayan şeyler olsa bile JSON'un anlamını koruduğundan emin olmanız gerekir .

İlk iki durum için (ve eski JSON ayrıştırıcıları için) U + 2028 ve U + 2029'u kodlamalısınız çünkü bunlar JSON'da kodlanmamış dizelerde izin verilse bile JavaScript'teki yeni satır karakterleri.

Doğruluk için, \JSON karakterlerinden alıntı yapmanız gerekir ve her zaman NUL'u kodlamak asla kötü bir fikir değildir.

HTML, içerik kodlaması olmadan sunulabilirse, UTF-7 saldırılarını+ önlemek için kodlamalısınız .

Her durumda, aşağıdaki çıkış tablosu çalışacaktır:

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

Dolayısıyla, Hello, <World>!sonunda bir satırsonu olan metnin JSON dize değeri olur "Hello, \u003cWorld\u003e!\r\n".

Bunu yapmanın başka bir yolu da json verilerini <script>etiketin içine koymaktır , ancak javascript yürütülmesini önlemek için type="text/javascript"ile değil, type="text/bootstrap"veya type="text/json"yazın.

Ardından, programınızın herhangi bir yerinde şu şekilde sorabilirsiniz:

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

Sunucu tarafında şöyle bir şey yapabilirsiniz (bu örnek php ve twig ile ):

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

Başka bir seçenek de JSON dizesini base64 kodlamaktır ve bunu javascript'inizde kullanmanız gerekiyorsa, atob()işlevle kodunu çözün .

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

Nakavtları kullanabilirsiniz,

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

Çıktı

Adı: Jayson Soyadı: Monterroso

Şunu kontrol edin: http://learn.knockoutjs.com/

Burada hiçbir şey fantezi değil. PHP'den, htmlspecialcharshiçbir özel karakterin HTML olarak yorumlanamayacağından emin olmak için JSON dizesini çalıştırın . Javascript'ten kaçmaya gerek yok; sadece özelliği ayarlayın ve gitmeniz iyi olur.

Basit JSON nesneleri için aşağıdaki kod çalışacaktır.

kodlama:

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

Kod Çözme:

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

Yapabileceğiniz şey, bu şekilde elemanlarınızın etrafında cdata kullanmaktır

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

mydata, ham bir json dizesidir. Umarım bu size ve başkalarına yardımcı olur.

Kullanılabilecek başka bir düşünce, JSON verilerini öznitelikte bir base64 dizesi olarak depolamak ve ardından onu kullanılabilir JSON verilerine geri yüklemek window.atobveya kullanmaktır window.btoa.

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