如何使用 EJS 將對象從 NodeJS 傳遞到 javascript 文件

Question

在下面你可以看到我有一個 nodeJS 服務器，它將數據 object 傳遞到索引頁面。 在我的 index.ejs 文件中，我可以使用 <%= data %> 接收這些數據，但這只會給出 [object Object]。 但是，我想要的是在我的 javascript 文件中接收這些數據作為實際的 object，這樣我就可以使用這些數據來做事。 我怎樣才能做到這一點？

節點JS：

router.get("/", getData, (req, res) => {
  res.render("index", { data: data }); // Where 'data' is a large object with lots of information 
});

索引.ejs：

<html>
  <head>
    ...
    <script defer src="myScript.js"></script> <!-- I want to pass the data object to this file -->
  </head>
  <body>
    <%= data %> <!-- This works, but is not what I want -->
  </body>
</html>

myScript.js：

const data = <%= data %> // this doesnt work, but is what I need

Answer 1

JSON是一種基於 JavaScript 的字面語法的數據交換語言。 只要您的數據完全由 JSON 支持的數據類型（例如普通對象和數字）組成，您就可以使用它來生成一個字符串，您可以將其插入數據屬性並使用`JSON.parse解析。

<script data-data="<%= JSON.stringify(data) %>">
    const data = JSON.parse(document.currentScript.dataset.data);
</script>

如果您的 object 包含 JSON 不支持的功能，例如函數、符號等，那么您需要對它們的傳輸方式進行特殊處理。

此答案的早期版本使用了類似的技術，將 JSON 視為 JavaScript 源代碼。 這或多或少有效，但容易受到 XSS 的攻擊，因為如果數據包含一個字符串"</script>" ，它將終止字符串中間的腳本元素。 字符串中的更多數據有可能構成更嚴重的 XSS 威脅。

您可以使用該技術，但您需要通過 escaping /字符來減輕該攻擊。

Answer 2

試試這樣：

<html>
  <head>
    ...
    <script>var data = <%= JSON.stringify(data) %>;</script>
    <script defer src="myScript.js"></script> <!-- I want to pass the data object to this file -->
  </head>
  <body>

  </body>
</html>

更新

安全問題：如果您的 object 包含用戶提供的數據，您的頁面可能會受到注入

如何使用 EJS 將對象從 NodeJS 傳遞到 javascript 文件

問題描述

2 個解決方案

解決方案1
0 已采納 2022-08-09 12:24:07

解決方案2
-2 2022-08-09 12:18:38

如何使用 EJS 將對象從 NodeJS 傳遞到 javascript 文件

問題描述

2 個解決方案

解決方案1 0 已采納 2022-08-09 12:24:07

解決方案2 -2 2022-08-09 12:18:38

解決方案1
0 已采納 2022-08-09 12:24:07

解決方案2
-2 2022-08-09 12:18:38