🎙️我们在 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，那么你无法完全了解其中的内容。攻击者可以利用这一点。或者，假设你有一个textarea可以输入 HTML 的 API，没错，你控制着这个 API，但事实上，如果 API 处理不当，用户就可以输入恶意脚本。

现在，我们来看看HMPL是如何解决这个问题的：

不受控制的外部 API

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

res.type("text/html");

res.send(htmlResponse);

main.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的配置处理。

另外，如果你能点个星支持这个项目就更好了！谢谢❤️！

💎 明星 HMPL ★

🗑️ 手动删除标签

但是，如果完整的 HTML 清理不适合该任务，那么您可以指定要删除的特定标签。

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

使用新disallowedTags属性，只需指定一个带有标签的数组，我们就能获得适合我们的有限结果。例如，当我们拥有一个受控的 API，但我们知道它通过实现了广告时，这很有必要，因为iframe一个网站需要它，而我们的网站则不需要。

🔧 经过全面测试

整个模块的测试覆盖率为 100%，因此此功能将以最少的错误数量运行。

您可以在Codecov上查看包含测试的报告，测试本身位于测试文件夹中。

👀 准备好使用模块的新功能了吗？

Node 包管理器：您可以使用以下命令通过 npm 下载它npm i hmpl-js
内容分发网络：您可以使用以下代码通过 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>

本地：或者，有一个与第二个类似的选项，只需将文件下载到本地机器即可。
启动项目：还有一个启动项目，可以通过命令进行部署npx degit hmpl-language/hello-hmpl-starter my-project

💬 反馈

您可以在评论区写下您对新功能的想法，阅读起来一定很有趣！或者，您也可以在Discord 主题频道提问和提出建议，我或其他人会尽力解答！

✅ 该项目是开源的

所以你也可以参与！这也意味着你可以将其用于商业用途：

仓库：https://github.com/hmpl-language/hmpl
网站：https://hmpl-lang.dev

感谢您的阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/hmpljs/weve-implemented-new-features-in-hmpl-to-help-developers-make-web-apps-more-secure-3bpi