Subresource Integrity(SRI)をWordPressに対応する方法

概要

Subresource Integrityについてまとめる。最後にWordPressに対応する方法をまとめている。

Subresource Integrity(SRI)

Subresource Integrity
CDN上にあるファイルをサイトに読み込む際に、<script>要素にハッシュの値(integrity="ハッシュ値")をつけることで、使用ファイルがそのハッシュ値と一致するかを検証し、使用ファイルが改竄されていないことを確認する機能。

多くのウェブサイトでCDN経由でファイルが読み込まれている。CDNは導入がとても簡単であり、サーバー処理の負担を減らし、キャッシュを保管してくれるため、読み込み速度を早める効果が期待できる。

一つデメリットがあるとするならば、少なくとも改ざんの可能性があるということだ。

Subresource Integrity(SRI)を活用すれば、万が一改ざんが行われた場合、ファイルの実行を防ぐことができる。

基本的なSubresource Integrity(SRI)の導入方法

  1. SRI Hash Generatorでshaの値を調べる。
  2. 生成されたscriptタグを挿入。

SRI Hash Generator: https://www.srihash.org

WordPressでSubresource Integrity(SRI)の対策をする場合

手順

  1. SRI Hash Generatorでハッシュ値を調べる。
  2. function.phpファイルでファイル管理。

 

例)TweenMaxのCDN(https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js)の場合

ハッシュ値を生成すると以下のコードになる。

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha384-Fe7o4IB+X/R42l4ubeFS03yRfSAAB99jbFAEQS6OSH1Sx+vKlefJt3gHPd/H6CO3" crossorigin="anonymous"></script>

このコードがhtmlファイルに出力されればよい。
だがWordPressの場合、footer.phpに直接スクリプトファイルを読み込む記述しても動作しない。

WordPressでスクリプトファイルを読み込む場合、function.phpwp_enqueue_script()で読み込む必要がある。

function.php


//tweenmax.js
wp_enqueue_script(
'tweenmax',
'//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'
);

このままだとハッシュ値が挿入されないので、ハッシュ値を挿入するために次のコードを下に記述する。

function.php


add_filter( 'script_loader_tag', 'add_attribs_to_scripts', 10, 3 );
function add_attribs_to_scripts( $tag, $handle, $src ) {

$tweenmax = array(
    'tweenmax'
);

if ( in_array( $handle, $tweenmax ) ) {
    return '<script src="' . $src . '" integrity="sha384-Fe7o4IB+X/R42l4ubeFS03yRfSAAB99jbFAEQS6OSH1Sx+vKlefJt3gHPd/H6CO3" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}

return $tag;
}

ページのソースを表示して、該当のスクリプトタグが以下のようになっていれば完了。

index.html


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js" integrity="sha384-Fe7o4IB+X/R42l4ubeFS03yRfSAAB99jbFAEQS6OSH1Sx+vKlefJt3gHPd/H6CO3" crossorigin="anonymous"></script>

ハッシュ値が一致しなければスクリプトファイルは実行されない。

必ずコンソールで確認すること。

複数の CDNファイルを読み込む場合

複数のCDNファイルを読み込む場合は次にように記述する。

function.php


// wp_enqueue_scripts()でスクリプトファイルを読み込む
function my_enqueue_scripts() {
  //Barba.js
   wp_enqueue_script(
      'barba',
      '//cdnjs.cloudflare.com/ajax/libs/barba.js/1.0.0/barba.min.js',
      array(),
      '1.0.0',
      true
   );
  //tweenmax.js
  wp_enqueue_script(
     'tweenmax',
     '//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'
  );
  //Three.js
  wp_enqueue_script(
     'three',
     '//cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js'
  );
  //code-prettify
  wp_enqueue_script(
     'codeprettify',
     '//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'
  );
}

add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

// 各スクリプト要素にハッシュ値と crossorigin="anonymous" を挿入する

add_filter( 'script_loader_tag', 'add_attribs_to_scripts', 10, 3 );
function add_attribs_to_scripts( $tag, $handle, $src ) {

$barba = array(
    'barba'
);
$chart = array(
    'chart'
);
$tweenmax = array(
    'tweenmax'
);
$three = array(
    'three'
);
$codeprettify = array(
    'codeprettify'
);

if ( in_array( $handle, $barba ) ) {
    return '<script src="' . $src . '" integrity="sha384-nadzBlDCKGR6GwSlZCMHGJlEBM6KDelL+GBVVSWOwnUXP3PNBtQZfnLyiIP447or" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $chart ) ) {
    return '<script src="' . $src . '" integrity="sha384-U3SHMuMFK4M7q42jpyqaAHJTzci8BikdB2ZgmUEsrElciy0Ty1vxiW4EL3bNCsyT" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $tweenmax ) ) {
    return '<script src="' . $src . '" integrity="sha384-Fe7o4IB+X/R42l4ubeFS03yRfSAAB99jbFAEQS6OSH1Sx+vKlefJt3gHPd/H6CO3" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}

if ( in_array( $handle, $three ) ) {
    return '<script src="' . $src . '" integrity="sha384-tT94DdmZUEkZxWZR9iflb54HJQjdLNaQ+hKEdYNxlRsdv/Kp4CPY6gsPLjckiBra" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}
if ( in_array( $handle, $codeprettify ) ) {
    return '<script src="' . $src . '" integrity="sha384-TQkC3xow7XsJdrLPDiLsOmXT6uIP5yZkJhHx8jr7QAsRimCDNmCfueSdlxPLLVMz" crossorigin="anonymous" type="text/javascript"></script>' . "\n";
}

return $tag;
}

htmlページで各スクリプトタグが正しく出力されていることを確認し、ハッシュ値も一致していれば完了。

他にもWordPressセキュリティー対策を以下の記事で紹介している。

 

参考サイト

https://www.questarter.com/q/wordpress-script-with-integrity-and-crossorigin-27_44827134.html

.