Blazor 清理 MarkupString

Sau*_*ron 3 struct html-sanitizing asp.net-core blazor

我正在尝试清理 MarkupString 的内容。实际上我创建了这个(基于https://github.com/dotnet/aspnetcore/blob/574be0d22c1678ed5f6db990aec78b4db587b267/src/Components/Components/src/MarkupString.cs

public struct MarkupStringSanitized
{
    public MarkupStringSanitized(string value)
    {
        Value = value.Sanitize();
    }

    public string Value { get; }

    public static explicit operator MarkupStringSanitized(string value) => new MarkupStringSanitized(value);

    public override string ToString() => Value ?? string.Empty;
}
Run Code Online (Sandbox Code Playgroud)

但是渲染输出不是原始 html。我应该如何实现 MarkupStringSanitized 来使用

@((MarkupStringSanitized)"Sanitize this content")
Run Code Online (Sandbox Code Playgroud)

Ada*_*ent 5

一些建议(不一定适用于 OP,但适用于其他希望解决问题的人):

  • 您没有提供进行实际清理的代码,所以我将说明(希望)明显的最佳实践,如果您遵循它,那就太好了。不要使用正则表达式 (Regex) 来解析 HTML
  • 此外,该Sanitize()方法应遵循immutability 在这种情况下的模式
  • 我建议使用以下库Gans.XSS.HtmlSanitizer,它是一个活跃的库并且会定期更新。

问题

Razor 视图引擎不知道如何渲染MarkupStringSanitized. 仅仅因为您输入了相同的清理版本struct并不意味着它可以呈现它。为了让这个渲染,你需要把它转换成它知道的东西,MarkupString

这是当我HtmlSanitizedMarkup直接使用你而不做任何修改时会发生什么。

@((MarkupStringSanitized)Content)
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

工作示例#1

这是一个使用我的 Markdown -> Html 游乐场的示例(经过全面测试和工作):

在此处输入图片说明

MarkupStringSanitized.cs
public struct MarkupStringSanitized
{
    public MarkupStringSanitized(string value)
    {
        Value = Sanitize(value);
    }

    public string Value { get; }

    public static explicit operator MarkupStringSanitized(string value) => new MarkupStringSanitized(value);

    public static explicit operator MarkupString(MarkupStringSanitized value) => new MarkupString(value.Value);

    public override string ToString() => Value ?? string.Empty;

    private static string Sanitize(string value)  {
        var sanitizer = new HtmlSanitizer();
        return sanitizer.Sanitize(value);
    }
}
Run Code Online (Sandbox Code Playgroud) MarkupStringSanitizedComponent.razor
@if (Content == null)
{
    <span>Loading...</span>
}
else
{
    @((MarkupString)(MarkupStringSanitized)Content)
}

@code {
    [Parameter] public string Content { get; set; }
}
Run Code Online (Sandbox Code Playgroud)

额外的转换虽然是丑陋的 IMO。(也许比我更聪明的人可以清理它?)

工作示例#2

在这里,我尝试MarkupString使用扩展方法扩展 。它看起来好一点,但只是一点点

MarkupStringExtensions.cs
public static class MarkupStringExtensions
{
    public static MarkupString Sanitize(this MarkupString markupString)
    {
        return new MarkupString(SanitizeInput(markupString.Value));
    }

    private static string SanitizeInput(string value)
    {
        var sanitizer = new HtmlSanitizer();
        return sanitizer.Sanitize(value);
    }
}
Run Code Online (Sandbox Code Playgroud) MarkupStringSanitizedComponent.razor
@if (Content == null)
{
    <span>Loading...</span>
}
else
{
    @(((MarkupString)Content).Sanitize())
}

@code {
    [Parameter] public string Content { get; set; }
}
Run Code Online (Sandbox Code Playgroud)