使用CMB2自定义字段添加iframe后前端无法显示的技术求助

我之前也碰到过一模一样的情况——后台能正常保存iframe代码，但前端就是只显示纯文本，根本不渲染成嵌入窗口。核心原因是CMB2默认会对字段内容做HTML转义处理，目的是防止恶意代码注入，但这也把合法的iframe标签转成了实体字符（比如<变成<），前端自然识别不了。

下面给你两种靠谱的解决方案，按需选择：

方案一：修改字段的安全验证回调（推荐） #

直接在定义CMB2字段的时候，指定一个自定义的sanitization回调函数，明确允许iframe标签和必要的属性。这样既能让iframe正常保存，又能保持基本的安全性。

代码示例： #

// 第一步：定义允许iframe的安全验证函数
function my_cmb2_allow_iframe_sanitize( $value ) {
    // 先获取WordPress默认允许的文章HTML标签
    $allowed_tags = wp_kses_allowed_html( 'post' );
    
    // 添加iframe标签及需要的属性（按需增减）
    $allowed_tags['iframe'] = array(
        'src' => true,
        'width' => true,
        'height' => true,
        'frameborder' => true,
        'allowfullscreen' => true,
        'loading' => true,
    );

    // 用wp_kses过滤内容，只保留允许的标签和属性
    return wp_kses( $value, $allowed_tags );
}

// 第二步：在你的CMB2字段定义中使用这个回调
$cmb->add_field( array(
    'name' => '嵌入外部内容',
    'id'   => 'custom_iframe_field', // 替换成你的字段ID
    'type' => 'textarea', // 如果你用的是text类型也可以
    'sanitization_cb' => 'my_cmb2_allow_iframe_sanitize', // 指定自定义回调
) );

进阶安全优化： #

如果想进一步限制iframe的来源（比如只允许YouTube、Vimeo这类可信平台），可以给src属性加一个域名验证的回调：

$allowed_tags['iframe'] = array(
    'src' => array(
        'callback' => function( $src ) {
            // 只允许这些域名的iframe
            $trusted_domains = array( 'youtube.com', 'youtu.be', 'vimeo.com', 'your-trusted-domain.com' );
            $parsed_src = parse_url( $src );
            // 验证域名是否在可信列表里
            if ( isset( $parsed_src['host'] ) && in_array( $parsed_src['host'], $trusted_domains ) ) {
                return $src;
            }
            // 不符合的话返回空，避免恶意内容
            return '';
        }
    ),
    // 其他属性...
);

方案二：前端输出时解除转义（不推荐，仅应急用） #

如果你不想修改字段定义，也可以在前端输出内容的时候，手动解除HTML转义。但这种方式安全性较低，因为如果字段被注入恶意代码，会直接在前端执行，所以只建议在你完全信任编辑该字段的用户时使用。

代码示例： #

// 获取字段值并安全输出（推荐用wp_kses_post，它会保留合法HTML）
echo wp_kses_post( get_post_meta( get_the_ID(), 'custom_iframe_field', true ) );

// 或者直接解码实体字符（安全性低，谨慎使用）
// echo html_entity_decode( get_post_meta( get_the_ID(), 'custom_iframe_field', true ) );

最后提醒 #

不管用哪种方案，都要确保只有可信的管理员/编辑者能修改这个字段，避免恶意用户插入危险的iframe代码。

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