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屬性顯示的內容為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處理後的內容。