阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 03月11日

🎙️我們在 HMPL 中實現了新功能，以幫助開發人員使 Web 應用程式更加安全🔥

今天，我很高興介紹新的功能，它將使模板語言比以往更加安全。多種有用的功能和新的整合相結合，創造了出色的效果，降低了應用程式中出現不必要操作的風險。

新版本2.2.5的開發工作非常艱苦，但現在它將在提高模組的品質和可靠性方面取得成果！

🧼 與 DOMPurify 集成

使用伺服器時存在的主要問題之一當然是 XSS 攻擊，即不需要的script可以在客戶端上執行，在最好的情況下，竊取您的資料，在最壞的情況下，完全關閉整個 Web 應用程式。

顯然，這些都是很大的風險，因此，為了提高安全性，整合了 DOMPurify，它可以刪除不必要的腳本、iframe 等，並提供您可以使用的安全 HTML。

// Simulate fetching HTML from the server
const simulatedServerResponse = '<div><h2>Hello, World!</h2><script>alert("This is unsafe!")</script></div>';

// Sanitize the server response using DOMPurify
const cleanHTML = DOMPurify.sanitize(simulatedServerResponse);

// Insert the sanitized HTML into the div
document.getElementById('output').innerHTML = cleanHTML;

假設您使用不受控制的 API，那麼您就無法完全了解其中的內容。攻擊者可以利用這一點。或者，假設您有一個可以在其中輸入 HTML 的textarea ，是的，您可以控制 API，但事實是，如果處理不正確，使用者就可以輸入惡意腳本。

現在，讓我們來看看HMPL是如何解決這個問題的：

不受控制的外部 API

const htmlResponse = "<span>HTML from server</span><script>alert("XSS vulnerability here")</script>";

res.type("text/html");

res.send(htmlResponse);

主.js

import { compile } from "hmpl-js";

const templateFn = compile(
  `<div>
    <button class="getHTML">Get HTML!</button>
    { 
      {
        src: "/uncontrolled-external-api",
        after: "click:.getHTML",
        sanitize: true,
        indicators: [
           {
             trigger: "pending",
             content: "<div>Loading...</div>"
           }
        ]
      } 
    }
  </div>`
);

const wrapper = document.getElementById("wrapper");

const elementObj = templateFn();

wrapper.appendChild(elementObj.response);

在這裡，我們將sanitize屬性設為true以啟用安全模式。現在，我們可以說該 Web 應用程式是安全的！在未來的版本中，將會加入DOMPurify的組態處理。

{% 嵌入 https://x.com/aanthonymax/status/1898789842408079605 %}

此外，如果您能用自己的明星來支持該專案那就太好了！謝謝❤️！

{% cta https://github.com/hmpl-language/hmpl %} 💎 星級 HMPL ★{% endcta %}

🗑️ 手動刪除標籤

但是，如果完整的 HTML 清理不適合該任務，那麼您可以指定要刪除的特定標籤。

{ 
  {
    src: "/controlled-external-api",
    after: "click:.getHTML",
    disallowedTags: ["iframe"]
  } 
}

使用新的disallowedTags屬性，透過僅指定帶有標籤的陣列，我們將獲得適合我們的有限結果。這是必要的，例如，當我們有一個受控的 API，但我們知道它透過iframe實現了廣告，這在一個網站中是必要的，但對於我們的網站來說不是。

🔧 經過全面測試

整個模組的測試覆蓋率為 100%，因此此功能將以最少的錯誤數量執行。

經過全面測試

您可以在Codecov上查看包含測試的報告，測試本身位於測試資料夾中。

👀 準備好使用模組的新功能了嗎？

Node 套件管理器：你可以使用指令npm i hmpl-js透過 npm 下載它
內容傳遞網路：您可以使用以下程式碼透過 CDN 包含具有依賴關係的檔案：

<script src="https://unpkg.com/json5/dist/index.min.js"></script>
<script src="https://unpkg.com/dompurify/dist/purify.min.js"></script>
<script src="https://unpkg.com/hmpl-js/dist/hmpl.min.js"></script>