Razor页面Html.Raw移除iframe的data-src等属性：原因及解决

我在Razor页面中调用Html.Raw方法渲染包含iframe的字符串，该iframe带有data-src、data-cookieconsent和allowfullscreen属性，用于在用户未接受营销Cookie时阻止元素加载。输入的iframe代码如下：

<iframe allowfullscreen="" data-cookieconsent="marketing" data-src="https://www.youtube.com/embed/0EdLhHFBAEA" frameborder="0" height="360" width="640"></iframe>

但调用Html.Raw渲染后，页面输出的iframe丢失了data-src、data-cookieconsent和allowfullscreen属性，仅保留frameborder、height、width属性。当iframe仅使用src属性时可正常显示，请问这些属性被移除的原因是什么？如何避免该问题？

原因分析 #

• ASP.NET内置HTML净化机制：Razor页面默认会对输出内容做安全净化，即使使用Html.Raw绕过常规编码，ASP.NET的AntiXSS或内置HtmlSanitizer等安全组件，可能会将自定义属性（如data-cookieconsent）、非标准加载属性（如data-src）甚至部分标准属性（如allowfullscreen）判定为“不安全”或不在白名单内，从而过滤移除。
• Razor属性白名单限制：Razor视图引擎维护了允许渲染的属性白名单，默认仅包含常见的标准属性，自定义data属性和部分特殊标准属性不在默认名单中，因此被自动过滤。

解决办法 #

方法1：扩展HTML净化规则，允许目标属性 #

如果项目使用了HtmlSanitizer等净化库，可修改配置将需要的属性加入允许列表：

// 在Startup/Program.cs中配置HtmlSanitizer
var sanitizer = new HtmlSanitizer();
sanitizer.AllowedAttributes.Add("data-src");
sanitizer.AllowedAttributes.Add("data-cookieconsent");
sanitizer.AllowedAttributes.Add("allowfullscreen");
// 将配置后的sanitizer注入服务
services.AddSingleton(sanitizer);

之后先用配置好的净化器处理HTML字符串，再通过Html.Raw输出。

方法2：直接写入响应流绕过Razor过滤 #

绕过Razor的内置解析，直接将HTML字符串写入响应流：

@{
    var iframeHtml = "<iframe allowfullscreen=\"\" data-cookieconsent=\"marketing\" data-src=\"https://www.youtube.com/embed/0EdLhHFBAEA\" frameborder=\"0\" height=\"360\" width=\"640\"></iframe>";
    await Response.WriteAsync(iframeHtml);
}

这种方式会直接输出原始HTML，不受Razor属性过滤限制。

方法3：用TagHelper手动构建iframe #

通过Razor TagHelper直接编写iframe标签，手动指定所有属性，Razor会认可这些属性并正确渲染：

<iframe allowfullscreen="" data-cookieconsent="marketing" data-src="https://www.youtube.com/embed/0EdLhHFBAEA" frameborder="0" height="360" width="640"></iframe>

如果属性是动态生成的，可通过绑定方式设置：

@{
    var videoSrc = "https://www.youtube.com/embed/0EdLhHFBAEA";
}
<iframe allowfullscreen="" data-cookieconsent="marketing" data-src="@videoSrc" frameborder="0" height="360" width="640"></iframe>

内容的提问来源于stack exchange，提问作者Leth