JSON 序列化具有函數參數的對象

Question

我有這個 C# 對象：

var obj = new {
    username = "andrey",
    callback = "function(self) { return function() {self.doSomething()} (this) }"
}

我需要 JSON 序列化它以在 ajax 調用中傳遞給瀏覽器。 我使用 JavascriptSerializer，但它序列化為以下 JSON：

{"username":"andrey", "callback": "function(self) { return function() {self.doSomething()} (this) }"}

但我需要的是：

{"username":"andrey", "callback": function(self) { return function() {self.doSomething()} (this) }}

• 函數定義周圍沒有引號。

現在，當 JSON 對象到達瀏覽器並被創建時，'callback' 參數不是一個函數而是一個字符串。 知道如何修復它，最好是在服務器端？

Answer 1

我試圖完成類似的事情。 在我的例子中，我使用 MVC Razor 語法試圖生成一個 json 對象，其中包含一個使用 @<text> 語法傳入的函數。

我能夠使用 Json.net 庫（使用 JsonConvert 和 JRaw）獲得所需的輸出。

例子：

// set the property value using JRaw
var obj = new {
    username = "andrey",
    callback = new JRaw("function(self) { return function() {self.doSomething()} (this) }")
}
// and then serialize using the JsonConvert class
var jsonObj = JsonConvert.SerializeObject(obj);

這應該為您提供帶有函數的 json 對象（而不是字符串中的函數）。

帖子： 如何將函數序列化為 json（使用 razor @<text>）

Answer 2

這種行為是故意的。 JSON 不應該包含任何不是數據的東西——在你的情況下是一個可執行函數。 如果數據可以以 JSON 格式從服務器返回，瀏覽器將面臨巨大的安全風險，該服務器在執行時將運行任意功能（可以竊取信息，將用戶重定向到惡意站點等）

JSON 的早期實現依賴於這樣一個事實，即返回的數據可以通過 eval() 簡單地執行以獲取一個對象。 然而，人們幾乎立即意識到這會帶來巨大的安全風險，並一直在努力應對。 這就是為什么在標准化 JSON 對象出現之前，人們不再將原始 JSON 數據放入 eval() 中，而是使用 JSON 解析庫。

JSON 對象將始終僅將對象序列化為數據。 這是設計使然。 標准化的 JSON 格式無法表示可執行函數。

現在，您可以通過將它傳遞給 eval() 來輕松地將瀏覽器上的回調轉換為函數。 但是，不要這樣做。 你只是在為黑客敞開心扉。

在服務器端，現代瀏覽器旨在防止這種情況發生——即從包含可執行功能的瀏覽器發送數據。

Answer 3

您可以使用 Function 對象的構造函數。 請參閱https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Function 。

在您的 json 中，您將回調屬性設置為描述函數構造函數參數的字符串數組。 然后當 json 數據到達客戶端時，您必須將 Array 轉換為 Function 對象的實例。

通過這種方式，您可以在后台數據庫中獲得函數實現細節，而不是在源代碼中進行硬編碼。

const json = '{"username":"andrey","callback":["self","return self.doSomething()"]}';

//Parse the json to an object
const object = JSON.parse(json);

//Convert the callback property from Array to Function
object["callback"] = new Function(...object["callback"]);

//Create a parameter for calling the Function
var self = {
    doSomething() {
        console.log("Do something called");
    }
}

//Call the function
object["callback"](self);