java - 将渲染器添加到 Vaadin 网格

Question

我将 Vaadin 8 项目迁移到 Vaadin 14，并尝试在网格列中显示 HTML。我想通了，我必须使用 TemplateRenderer , 但我该如何使用它呢？

这是来自 Vaadin 8 的代码:

grid.addColumn(e -> {
    return ((Data) e).getValues()[index];
}).setCaption(myCaption).setRenderer(new HtmlRenderer());

在 Vaadin 14 中我这样做了:

gird.addColumn(e -> {
    return TemplateRenderer.<Data>of((String) e.getValues()[index])
}).setHeader(myCaption);

e.getValues()[index]包括 HTML，例如:<FONT SIZE = 4 COLOR = BLACK> &#9899;</FONT>

在 Vaadin 14 中它总是返回 com.vaadin.flow.data.renderer .

Answer 1

在我们了解如何将 TemplateRenderer 与 Grid 一起使用之前，我首先需要指出您尝试执行的操作具有潜在的危险，因为它可能会导致 XSS 漏洞，如果您要显示的 HTML 字符串可能由应用程序用户提供。

使用 Html 组件确实是这个问题的一个潜在解决方案，但它会导致一些开销，因为对于网格中的每一行，内存中都会有一个组件实例。同样的问题也可能导致 XSS 漏洞。

使用TemplateRenderer 时首先要注意的是渲染器需要作为参数直接提供给addColumn。将其包装在 lambda 中将改为使用该 lambda 作为值提供程序，这意味着渲染器实例的 toString() 值将与默认的纯文本渲染器一起使用。

所有行都应该使用相同的渲染器实例，配置相同的模板字符串。诀窍是您可以传递数据以显示为模板将为您呈现的每行属性。最后一个难题是模板语法试图保护您免受意外的 XSS 漏洞的侵害，因此您需要使用稍微人为设计的语法才能真正将数据呈现为 HTML。

将所有内容放在一起，并使用 JSoup 从 HTML 字符串中删除任何危险内容，工作解决方案如下所示:

grid.addColumn(TemplateRenderer
        .<Data> of("<div inner-h-t-m-l='[[item.html]]'></div>")
        .withProperty("html", e -> {
            String unsafeHtml = e.getValues()[index];
            String safeHtml = Jsoup.clean(unsafeHtml, Whitelist.basic());
            return safeHtml;
        })).setHeader(myCaption);