CSSやJavaScriptファイルのバージョン番号を変える

CSSやJavaScriptファイルのバージョン番号を変える - キャッシュの更新を考慮してバージョン番号を隠す

説明

WordPress 4.7系の脆弱性をついた攻撃も落ち着いた感じなので、標準でヘッダーやフッター内に出力されるWordPressのバージョン番号について一考しました。

HTML内のWordPressのバージョン番号

まずはWordPressのバージョン番号を類推できる情報がどの程度出力されているか確認します。標準テーマ「Twenty Seventeen」を親テーマとした子テーマを適用している場合、ユーザーが未ログイン状態では次のような内容が出力されています(ユーザーがログインしている状態はもう少し増えます)。

// 絵文字表示用スクリプト
window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source": {"concatemoji":"http:\/\/localhost\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.3"}};

// テーマのCSSファイルを指定するlink要素
<link rel='stylesheet' id='parent-style-css'  href='http://localhost/wp-content/themes/twentyseventeen/style.css?ver=4.7.3' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='http://localhost/wp-content/themes/child-theme/style.css?ver=4.7.3' type='text/css' media='all' />

// 作成ツールを示すmeta要素
<meta name="generator" content="WordPress 4.7.3" />

// 埋め込み要素の表示を支援するスクリプト
<script type='text/javascript' src='http://localhost/wp-includes/js/wp-embed.min.js?ver=4.7.3'></script>

これらを分類すると、meta要素、link要素のCSSファイル指定、script要素のJavaScriptファイル指定になります。

meta要素を削除する方法は、ヘッダー情報が出力される(wp_headアクションの実行)前に以下のコードを指定します。これに対応するプラグインもあるので、それらを利用してもいいでしょう。

remove_action( 'wp_head', 'wp_generator' );
バージョン番号を変える

いよいよ本題のlink要素のCSSファイル指定とscript要素のJavaScriptファイル指定です。ファイルのURL指定にバージョン番号を追加している目的の1つは、バージョンアップの際にキャッシュ問題を回避することでしょう。というわけで、バージョン情報をそのまま出力せず、バージョンアップ時にキャッシュ問題を回避する内容に変更したいと思います。

$theme_default_version = substr( hash( 'sha256', filemtime( ABSPATH . WPINC . '/version.php' ).filemtime( get_stylesheet_directory(). '/style.css' ) ), 3, 8 ) ;

この例では、WordPressのバージョン番号を記載したversion.phpと現在のテーマのstyle.cssの更新日時をベースにハッシュ値を生成し、その一部を切り出した値にしています。これであればどちらかのファイルが更新された場合に値が変わることが期待できます。

CSSファイルのバージョンパラメータの変更は、'wp_print_styles'フィルターを使用します。

add_action( 'wp_print_styles', 'theme_wp_print_styles', 1000 );
if ( ! function_exists( 'theme_wp_print_styles' ) ) {
	function theme_wp_print_styles() {
		global $theme_default_version;
		wp_styles()->default_version = $theme_default_version;
	}
}

JavaScriptファイルのバージョンパラメータの変更は、'wp_print_scripts'フィルターは使用せず、'script_loader_src'フィルターを使用します。これは'wp_print_scripts'フィルターを使用してもwp-emoji-release.min.jsのバージョンパラメータを変更できないためです。

add_filter( 'script_loader_src', 'theme_script_loader_src' );
if ( ! function_exists( 'theme_script_loader_src' ) ) {
	function theme_script_loader_src( $src ) {
		global $theme_default_version;
		return str_replace( 'ver='.get_bloginfo( 'version' ), 'ver='.$theme_default_version, $src );
	}
}

ここではWordPressのバージョン番号が指定されているファイル指定のみを変更するようにしています。

バージョン番号を隠す必要性

今回、弊社サイトのリニューアルで「Twenty Seventeen」の子テーマを採用しました。出力されたHTMLを見るとWordPressのバージョン番号が多数出現します。WordPressを常に最新版に維持できるならバージョン番号を隠す必要はないかもしれませんが、攻撃者にヒントを与えることはないでしょう。バージョン番号を隠してブラウザのキャッシュを考慮するなら、ここら辺が落としどころなのではないでしょうか。

お勧めコンテンツ

load_textdomain(2010年6月15日 登録)

bool load_textdomain( string $domain, string $mofile )
国際化用ファイル(MOファイル)をロードする。

load_template(2010年6月7日 登録)

void load_template( string $_template_file [ , bool $require_once = true ] )
テンプレートファイルを読み込む。

has_image_size(2014年4月24日 登録)

bool has_image_size( string $name )
イメージサイズが登録済みか調べる。

get_the_category_list(2009年12月8日 登録)

string get_the_category_list( [ string $separator = '' [ , string $parents = '' [ , mixed $post_id = false ] ] ] )
投稿記事のカテゴリー別アーカイブのリンクリストを取得する。

is_new_day(2011年12月19日 登録)

int is_new_day( )
現在の投稿記事の投稿日が直前の投稿記事と同じか調べる。

最終更新日時 : 2017-03-14 16:34