WordPress短代码中$atts用户输入如何进行消毒与转义处理

短代码的$atts属于用户可控输入，未做处理直接拼接输出会存在XSS跨站脚本注入风险，需按「输入消毒、输出转义」两个环节处理：

1. 输入消毒（Sanitize） #

针对不同属性的业务规则，提前过滤非法内容：

• id属性：场景为YouTube视频ID，仅允许大小写字母、数字、半角减号、下划线，可先用sanitize_text_field做基础过滤，再用正则匹配保留合法字符
• thumb属性：属于图片URL，使用esc_url_raw校验URL格式，过滤非法协议和恶意字符

2. 输出转义（Escape） #

遵循WordPress「迟到转义」原则，所有输出到HTML标签属性的内容，最终输出前统一用esc_attr()转义，将引号、尖括号等特殊字符转换为HTML实体，避免属性逃逸触发注入。

改造后的安全代码 #

function wp_test_shortcode($atts){
    $atts = shortcode_atts(array(
        'id'    =>  'TESTTEST',
        'thumb' =>  ''
    ),$atts);

    // 消毒用户输入属性
    $atts['id'] = preg_replace('/[^a-zA-Z0-9_-]/', '', sanitize_text_field($atts['id']));
    $atts['thumb'] = $atts['thumb'] ? esc_url_raw($atts['thumb']) : '';

    $thumb = $atts['thumb'] ? $atts['thumb'] : 'https://i3.ytimg.com/vi/'.$atts['id'].'/0.jpg';

    // 输出前转义所有HTML属性值
    return '<div data-id="'.esc_attr($atts['id']).'" data-thumb="'.esc_attr($thumb).'" ></div>';
}
add_shortcode('test','wp_test_shortcode');

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