今天，我很高兴地向大家介绍一个新的功能，这将使模板语言比以往任何时候都更加安全。这些实用功能和新集成结合在一起，带来了很好的效果，降低了应用程序执行意外操作的风险。

开发新版本2.2.5的工作真是费了很大劲，但现在这些努力将在提高模块质量和可靠性上见到成效。

在与服务器打交道的过程中，主要问题之一当然是 XSS 攻击，这种攻击会让一个恶意的 script 在客户端运行，在最理想的情况是，它会窃取你的数据，而在最糟糕的情况是，它会彻底瘫痪整个 web 应用。

显然，这些都是大风险，因此，为了增强安全性，集成了DOMPurify，它会去掉这些不必要的脚本、iframe等，并提供你可以放心使用的安全HTML。

    // 模拟从服务器获取的HTML
    const simulatedServerResponse = '<div><h2>Hello, World!</h2><script>alert("This is unsafe!"); // 提示：这里有一个不安全的脚本</script></div>';

    // 使用DOMPurify清理从服务器获取的HTML内容
    const cleanHTML = DOMPurify.sanitize(simulatedServerResponse);

    // 将清理后的HTML插入到div中
    document.getElementById('output').innerHTML = cleanHTML;

全屏模式 退出全屏

假设你使用的是一个没有完全控制的 API，你可能无法完全了解从那里得到的是什么。攻击者可以利用这一点来进行攻击。比如说你有一个 textarea，可以输入 HTML，即使你控制了 API，但如果处理不当，用户仍然可以输入恶意脚本。

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

未受控的外部API调用

    const htmlResponse = "<span>服务器返回的HTML内容</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">获取HTML内容!</button>
        { 
          {
            src: "/uncontrolled-external-api",
            after: "click:.getHTML",
            sanitize: true,
            indicators: [
               {
                 trigger: "pending",
                 content: "<div>正在加载...</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 实现了广告，而这个广告虽然在另一个网站上是有用的，但在我们的网站上则不需要时，这就会非常有用。

这种像这样烦人的广告：

正在促销的 GIF 图片

整个模块的测试覆盖率已经达到了100%，因此，该功能的运行将几乎不会有错误。

你可以通过Codecov查看包含测试的报告页面，测试文件则在test文件夹中。

• npm：你可以通过命令 npm i hmpl-js 来下载它。

• CDN: 通过以下代码，你可以利用CDN包含一个带有依赖关系的文件。

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/json5/dist/index.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/dompurify/dist/purify.min.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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

谢谢阅读！

谢谢啦！GIF