WordPress安全规范要求转义HTML，Elementor自定义Widget渲染场景下如何正确处理？

这个问题很典型——WordPress的安全规范要求所有动态输出必须转义，但直接转义整个HTML块会破坏页面结构。核心思路是只转义动态内容，保留静态HTML的可渲染性，具体可以这么处理：

1. 先转义动态翻译文本 #

你代码里的__()函数只负责翻译，不会转义内容。换成esc_html__()，它会同时完成翻译和HTML转义，确保翻译后的文本是安全的，不会注入恶意代码：

/**
 * Render widget output on the frontend
 */
protected function render() {
    // 用esc_html__()替代__()，自动转义翻译后的文本
    $i_am = esc_html__( 'I am', 'hello-elementor-child' );
    $and_i_am_looking_for = esc_html__( 'and I am looking for', 'hello-elementor-child' );
    
    $output = <<<HTML
<form>
    <div>
        <label>$i_am</label>
        <input type="text" name="i_am" value="" />
    </div>
    <div>
        <label>$and_i_am_looking_for</label>
        <input type="text" name="and_i_am_looking_for" value="" />
    </div>
</form>
HTML;
    echo $output;
}

2. 为什么这样符合规范？ #

PHPCS的WordPress.Security.EscapeOutput.OutputNotEscaped错误，本质是担心未转义的动态内容被输出。你的HTML结构是完全可控的静态代码，没有用户输入或不可信来源的内容，所以直接输出是安全的。而动态的翻译文本已经通过esc_html__()完成了转义，满足了安全要求，PHPCS就不会再报错了。

额外说明：如果有复杂动态HTML的情况 #

如果你的widget后续需要输出包含用户输入的HTML内容（比如允许用户自定义部分HTML），可以用wp_kses()函数来过滤允许的HTML标签和属性，比如：

// 定义允许的HTML标签和属性
$allowed_html = [
    'div' => [],
    'label' => [],
    'input' => [
        'type' => [],
        'name' => [],
        'value' => [],
    ],
];
echo wp_kses( $output, $allowed_html );

不过在你当前的场景下，这种方式没必要，用第一种方法就足够简洁安全。

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