1.0.0 Summary
Tittle:【EatBook】-NO.1.EatBook.1.JavaData.1.001-《JSON 必知必会-Introduction to JavaScript Object Notation》-
Style:Java-Json
Series:O'Reilly Turing
Publishing House:人民邮电
Page Number:129
Since:2017-04-06
End:2017-04-06
Total Hours:4
Degree Of Diffculty:low-2
Degree Of Mastery:frequently-1
Practical Level:A-1
Desired Goal:All relation to JSON
Archieve Goal:foundation usge, secure concept
Gerneral Evaluation:snack book
Read From:EBook
Reader:kingdelee
Source Code:https://github.com/lindsaybassett/json
Related Links:
http://shop.oreilly.com/product/0636920041597.do
https://jsonformatter.curiousconcept.com/
http://jsonlint.com/
http://www.cnblogs.com/kingdelee/
Cover:
1.1.0
Json is a data interchange format
1.2.0 K-V Form
Json is base on JavaScript Object Notation literal(字面量).
{ "brand": "Crocs", "color": "pink", "size": 9, "hasLaces": false }
1.2.1 Illegal
None of ""
{ title: "This is my title.", body: "This is the body." }
Error of ''
{ 'title': 'This is my title.', 'body': 'This is the body.' }
1.2.2 Contain Numbers
Value can be string, number, boolean, null, obj, array.
{ "brand": "Crocs", "size": 9, "hasLaces": false, "color": null }
1.2.3 MIME
application/json
1.3.1 Emun Form
[ "witty", "charming", "brave", "bold" ]
1.3.2 Object Form
{ "person": { "name": "Lindsay Bassett", "heightInInches": 66, "head": { "hair": { "color": "light blond", "length": "short", "style": "A-line" }, "eyes": "green" } } }
1.3.3 Nest ""
Illegal
{ "promo": "Say "Bob's the best!" at checkout for free 8oz bag of kibble." }
Legal
{ "promo": "Say "Bob's the best!" at checkout for free 8oz bag of kibble." }
1.3.4 BackLash
Illegal
{ "location": "C:Program Files" }
Legal
{ "location": "C:\Program Files" }
Escape character:
/ slash(正斜线)
backward channel(退格符)
f form feed character(换页符)
tab character(制表符)
newline(换行符)
carriage return(回车符)
u 后面跟十六进制字符
1.3.5 array
mixture in array:
{ "eggCarton": [ "egg", null, "egg", "egg", "egg", 5, "egg" ] }
string in array:
{ "students": [ "Jane Thomas", "Bob Roberts", "Robert Bobert", "Thomas Janerson" ] }
number in array:
{ "scores": [ 93.5, 66.7, 87.6, 92 ] }
array nest object:
{ "test": [ { "question": "The sky is blue.", "answer": true }, { "question": "The earth is flat.", "answer": false }, { "question": "A cat is a dog.", "answer": false } ] }
array nest array:
{ "tests": [ [ true, false, false, false ], [ true, true, true, true, false ], [ true, false, true ] ] }
legal empty json object:
{}
Json array:
[ { "user": "bobbarker" }, { "phone": "555-555-5555" } ]
legal empty json array:
[]
Point:
1.json array is a executable javascript, explorer will parse and executed:
[{"Id":3,"Name":hyddd,"Money":10000}]
2.json object is not a executable javascript, explorer won't parse and executed:
{"Id":3,"Name":hyddd,"Money":10000}
1.4.0 Schema
http://json-schema.org/
1.5.0 Secure
CSRF
XSS
1.5.1
Don't use JSON.eval():
<!DOCTYPE html> <html> <head> <title>Introduction to JavaScript Object Notation</title> <script> var jsonString = '{"animal":"cat"}'; var myObject = eval("(" + jsonString + ")"); alert(myObject.animal); </script> </head> <body> <h1>Introduction to JavaScript Object Notation</h1> </body> </html>
<!DOCTYPE html> <html> <head> <title>Introduction to JavaScript Object Notation</title> <script> var jsonString = "alert('this is bad')"; var myObject = eval("(" + jsonString + ")"); alert(myObject.animal); </script> </head> <body> <h1>Introduction to JavaScript Object Notation</h1> </body> </html>
use JSON.parse() in instead of JSON.eval():
<!DOCTYPE html> <html> <head> <title>Introduction to JavaScript Object Notation</title> <script> var jsonString = '{"animal":"cat"}'; var myObject = JSON.parse(jsonString); alert(myObject.animal); </script> </head> <body> <h1>Introduction to JavaScript Object Notation</h1> </body> </html>
1.5.2 Use escape character instead of html code
no secure:
{ "message": "<div onmouseover="alert('gotcha!')">hover here.</div>" }
secure perhaps:
<div>
1.6.0
serialized and deserialized:
<!DOCTYPE html> <html> <head> <title>Introduction to JavaScript Object Notation</title> <script> var myXMLHttpRequest = new XMLHttpRequest(); var url = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139"; myXMLHttpRequest.onreadystatechange = function() { if (myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status === 200) { // the JSON response deserialized var myObject = JSON.parse(myXMLHttpRequest.responseText); // let's display the weather on the page var description = "It's " + myObject.weather[0].description + " and " + myObject.main.temp + " degrees in " + myObject.name + "."; document.getElementById("weather").innerHTML = description; // The object serialized var myJSON = JSON.stringify(myObject); // let's display this in the div with the id "json" document.getElementById("json").innerHTML = myJSON; } else if (myXMLHttpRequest.readyState === 4 && myXMLHttpRequest.status !== 200) { // fail. document.getElementById("weather").innerHTML = "failed."; document.getElementById("json").innerHTML = "failed."; document.getElementById("error").innerHTML = "Unable to connect to the open weather map API. Are you connected to the internet? Is <a href='http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139'>this page</a> responsing? If it's not, try again later." } } myXMLHttpRequest.open("GET", url, true); myXMLHttpRequest.send(); </script> </head> <body> <h1>Introduction to JavaScript Object Notation</h1> <h2>The Weather</h2> <div id="weather"> loading... </div> <h2>The JSON as a String</h2> <div id="json"> loading... </div> <div id="error"> </div> </body> </html>
1.6.1 CORS Secure
Insecure:
Access-Control-Allow-Credentials:true Access-Control-Allow-Methods:GET, POST Access-Control-Allow-Origin:*
Secure:
Access-Control-Allow-Methods:POST Access-Control-Allow-Origin:http://www.somebank.com
1.6.2 JSON-P
example10.json:
getTheAnimal({ "animal": "cat" });
<!DOCTYPE html> <html> <head> <title>Introduction to JavaScript Object Notation</title> <script> // example 6-11, modified to alert the variable "myAnimal" function getTheAnimal(data) { var myAnimal = data.animal; // will be "cat" alert(myAnimal); } // example 6-12, modified for the src file to load from example10.json var script = document.createElement("script"); script.type = "text/javascript"; script.src = "example10.json"; document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> <h1>Introduction to JavaScript Object Notation</h1> </body> </html>
1.7.0 some example
{ "total_rows": 2, "offset": 0, "rows": [ { "id": "ddc14efcf71396463f53c0f880001538", "key": "Barker", "value": null }, { "id": "3636fa3c716f9dd4f7407bd6f700076c", "key": "Jackson", "value": null } ] }