WordPress 4.2 正确使用 Emoji 表情方法-WP酷

WordPress 升级到 4.2 那段时间里，一连串的漏洞被找到：

【刻不容缓】尽快升级至4.2.1！WordPress 曝存储型XSS漏洞。

Via @Freebuf：http://www.freebuf.com/news/65926.html。
WordPress官方在4月21日发布了新的版本4.1.2，其中提到修复了一个严重的存储型XSS漏洞。不久之后便有人给出了漏洞的细节。而安全研究团队Klikki Oy发现在，新版本（<=4.2）的Wordpress中仍然可以利用该漏洞。

XSS漏洞一（WordPress 4.1.1 及其之前版本均受影响）
这次的XSS漏洞出现在wordpress的留言处，不过问题是由mysql的一个特性引起的。在mysql的utf8字符集中，一个字符由1~3个字节组成，对于大于3个字节的字符，mysql使用了utf8mb4的形式来存储。如果我们将一个utf8mb4字符插入到utf8编码的列中，那么在mysql的非strict mode下，他的做法是将后面的内容截断。

XSS漏洞二（WordPress 4.2及以下版本均受影响）
就在不久之前，安全研究团队Klikki Oy发现在新版本的 WordPress 中仍然可以利用该漏洞，漏洞形成的原理是一样的，利用截断来造成页面布局混乱，只不过这次 Klikki Oy 利用了 MySQL 的另外一个特点。
在 WordPress wp_comments 表中存储留言的列为 comment_content，他的类型为text。Text 最大可以存储64kb的数据，如果用户输入了大 于64kb的数据，mysql的做法依然是将后面的内容截断，由于 WordPress 并没有限制留言内容的长度，所以当我们提交大于64kb的留言内容 时，依然可以造成页面布局的混乱，形成XSS漏洞。

除此之外，如果你更新到 WordPress 的 4.2 版本，查看网页源代码你会发现 WordPress 会自动在加载一段用于支持emjo 表情的脚本（JS+CSS）。对于大部分人来说，这个是十分鸡肋的功能，再加上 GFW 的强大力量，反而影响加载速度。

怎么办？我们有两种解决方法：启用或禁用。感谢 Devework 和 Fatesinger 两位大神的努力。

 

禁用：移除 WordPress 4.2 中前台自动加载的 emoji 脚本

 既然功能鸡肋，不如直接移除掉来得更加快捷。代码提取自 Disable Emojis 插件，可以放在主题目录下的 functions.php 文件中：

/**
 * Disable the emoji's
 */
function disable_emojis() {
	remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
	remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
	remove_action( 'wp_print_styles', 'print_emoji_styles' );
	remove_action( 'admin_print_styles', 'print_emoji_styles' );	
	remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
	remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );	
	remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
	add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
add_action( 'init', 'disable_emojis' );

/**
 * Filter function used to remove the tinymce emoji plugin.
 * 
 * @param    array  $plugins  
 * @return   array             Difference betwen the two arrays
 */
function disable_emojis_tinymce( $plugins ) {
	if ( is_array( $plugins ) ) {
		return array_diff( $plugins, array( 'wpemoji' ) );
	} else {
		return array();
	}
}

 

 

启用：转存至本地调用 Emoji 表情

WordPress 官方将此功能会写入正式版一定有其理由。但我们知道 WP 的 CDN 早就被（=-=|||）掉，唯一方法就是转存到本地→使WP识别本地 Emoji 表情。感谢发哥。

Twitter Emoji 表情包下载，下载后直接解压至主题目录，文件夹名不变。将以下代码放在主题目录下的 functions.php 文件中：

//首先补全wp的表情库
function smilies_reset() {
	global $wpsmiliestrans, $wp_smiliessearch;

	// don't bother setting up smilies if they are disabled
	if (!get_option('use_smilies')) {
		return;
	}

	$wpsmiliestrans_fixed = array(
		':mrgreen:' => "\xf0\x9f\x98\xa2",
		':smile:' => "\xf0\x9f\x98\xa3",
		':roll:' => "\xf0\x9f\x98\xa4",
		':sad:' => "\xf0\x9f\x98\xa6",
		':arrow:' => "\xf0\x9f\x98\x83",
		':-(' => "\xf0\x9f\x98\x82",
		':-)' => "\xf0\x9f\x98\x81",
		':(' => "\xf0\x9f\x98\xa7",
		':)' => "\xf0\x9f\x98\xa8",
		':?:' => "\xf0\x9f\x98\x84",
		':!:' => "\xf0\x9f\x98\x85",
	);
	$wpsmiliestrans = array_merge($wpsmiliestrans, $wpsmiliestrans_fixed);
}

//替换cdn路径
function static_emoji_url() {

	return get_bloginfo('template_directory').'/72x72/';

}
//让文章内容和评论支持emoji并起初emoji加载的乱七八糟的脚本
function reset_emojis() {
	remove_action('wp_head', 'print_emoji_detection_script', 7);
	remove_action('admin_print_scripts', 'print_emoji_detection_script');
	remove_action('wp_print_styles', 'print_emoji_styles');
	remove_action('admin_print_styles', 'print_emoji_styles');
	add_filter('the_content', 'wp_staticize_emoji');
	add_filter('comment_text', 'wp_staticize_emoji',50); //在转换为表情后再转为静态图片
        smilies_reset();
        add_filter('emoji_url', 'static_emoji_url');
}
add_action('init', 'reset_emojis');

function fa_get_wpsmiliestrans(){
    global $wpsmiliestrans;
    $wpsmilies = array_unique($wpsmiliestrans);
    foreach($wpsmilies as $alt => $src_path){
        $emoji = str_replace(array('&#x', ';'), '', wp_encode_emoji($src_path));
        $output .= '<a class="add-smily" data-smilies="'.$alt.'"><img class="wp-smiley" src="'.get_bloginfo('template_directory').'/72x72/'. $emoji .'png" /></a>';
    }
    return $output;
}

具体怎样输出，还需要各位细细研究哦~