th:utext详解

th:utext是Thymeleaf模板引擎中的一个属性，用于显示未经转义的文本。在网页开发过程中，有时需要特殊字符显示在页面上，而不是被转义，可以使用th:utext属性解决这个问题。下面从几个不同角度阐述th:utext的使用方法。

一、th:utext的基础使用方法

在正常情况下，html文件中的内容会被浏览器转义，这意味着一些特殊字符，如<、>、&等被转换成其HTML实体名称或数字编码，而不是直接显示出来。而th:utext属性可以将文本以原来的形式展示在网页上，示例代码如下：

在此示例代码中，content是一个包含HTML代码的字符串，使用th:utext属性可以将其中的HTML代码正确地展示在网页上，而不是被转义处理。

二、th:utext与th:text的区别

th:text是Thymeleaf模板引擎中的另一个属性，用于显示经过转义后的文本。换句话说，th:text会对文本中的特殊字符进行转义处理，而th:utext则会保留特殊字符的原始形式，包括HTML代码标签等。在使用时，需要根据实际需求来选择使用哪个属性。

示例代码如下：

在此示例代码中，如果content的值为<p>hello</p>，那么使用th:text属性显示的内容为

hello

三、th:utext的安全性问题

虽然th:utext可以正确地展示包含HTML代码的字符串，但是也存在安全性问题。例如，如果在文本中包含了JavaScript代码，那么这些代码会在用户访问页面时被执行，可能导致安全问题。因此，在使用th:utext属性时，需要注意过滤用户输入内容，确保用户输入的内容不会包含恶意代码。

为了解决这个问题，可以将用户输入的内容经过过滤处理，例如使用Jsoup或其他过滤库，将用户输入的内容中的危险标签（如<script>等）和属性删除，只保留必要的标签和属性。

四、th:utext的高级用法——自定义转义器

除了Thymeleaf自带的转义器外，还可以通过扩展Thymeleaf来实现自定义的转义器。例如，可以使用Jsoup来实现一个自定义的转义器，将输入的HTML内容过滤后再输出到网页上。代码示例如下：

public class JsoupUtils {

    private static final Whitelist WHITE_LIST = Whitelist.basicWithImages().addTags("video", "source", "audio");

    public static String cleanAndParseHtml(String html) {
        return Jsoup.clean(html, WHITE_LIST);
    }
}

@Configuration
public class ThymeleafConfig implements ITemplateResolver {

    @Override
    public String getName() {
        return "ThymeleafConfig";
    }

    @Override
    public Integer getOrder() {
        return 1;
    }

    @Override
    public String resolveTemplate(TemplateContext ctx) {
        return ctx.getTemplateName();
    }

    @Override
    public TemplateResolution resolveTemplate(
            EngineConfiguration configuration,
            TemplateProcessingParameters templateProcessingParameters,
            Map map) {

        TemplateMode templateMode = templateProcessingParameters.getTemplateMode();
        String prefix = templateProcessingParameters.getPrefix();

        String resourceName = templateProcessingParameters.getResourceName();
        String templateName = resourceName.substring(prefix.length(), resourceName.length() - templateMode.getExtension().length());

        InputStream inputStream = this.getClass().getResourceAsStream("/" + resourceName);

        try (InputStreamReader reader = new InputStreamReader(inputStream, "UTF-8")) {
            char[] buffer = new char[4096];
            int readLen;
            StringBuilder stringBuilder = new StringBuilder();

            while ((readLen = reader.read(buffer)) != -1) {
                stringBuilder.append(buffer, 0, readLen);
            }

            String html = stringBuilder.toString();
            html = JsoupUtils.cleanAndParseHtml(html);

            return new TemplateResolution(html, getName(), templateMode, getResourceResolver());
        } catch (Exception e) {
            return null;
        }
    }

    @Override
    public IResourceResolver getResourceResolver() {
        return null;
    }

    @Override
    public String getPrefix() {
        return null;
    }

    @Override
    public boolean isCacheable() {
        return false;
    }
}

<span th:utext="${content}"></span>

  

在此示例代码中，ThymeleafConfig类实现了ITemplateResolver接口，可以实现自定义的Thymeleaf模板解析。在resolveTemplate方法中，使用Jsoup对模板中的HTML内容进行处理，并返回处理后的内容。在html页面中，可以使用th:utext属性来展示经过Jsoup处理后的内容。