かなりめんどいよ。
20230710追記
いいのかわかんないけどX-Frame-Optionsの設定だけで突破できたという例。
CSPとの食い合わせ問題
cspはstyle属性が大嫌いなので、そのままslick.jsを放り込むとIssuesがうるさいことになる。
それをやっていく。
CSPの準備
CDNを使うならそのドメイン（ORIGIN）をちゃんと指定しておく。
つまり、slick.jsがstyle属性をつけることでCSPがエラーを吐くだけの状態にしておく。
やっていく
nonceとdeferをつける。これだけ。
nonce
wp前提なら話は早いんだけど、まあ文字列は手打ちでも動くだろうからhtmlファイルでやってる人はそれで。
defer
<script>につけることでjsの処理が変わる。deferの他にasyncがあって、それぞれ処理のタイミングが変わる。自分の構築環境だとdeferじゃないと変な感じになるのでそれを採用。
で、問題なのが、ページに記述する<script>全部に記述しておかないと壊れる。一応内容を理解していればつけたりつけなかったりをきちんと区別できるけど、分からなかったら全部書く。
こうなる
<script defer nonce="**********" type='text/javascript' src='jquery-3.6.1.js'></script>
<link rel='stylesheet' href='slick.css' type='text/css' media='all' />
<link rel='stylesheet' href='slick-theme.css' type='text/css' media='all' />
<script defer nonce="**********" type='text/javascript' src='slick.min.js></script>
<script defer nonce="**********" >
window.addEventListener( 'load', function(){
$(function(){
$('#slick').slick();
})
}, false);
</script>deferを設定してjsをベタ打ちする場合、「window.addEventListener( ‘load’, function(){ … }, false);」で囲うのを忘れないこと。
これでOKだった。
なんでだ
多分セキュリティチェックのタイミングより先にstyle属性を生成するのがまずいんでしょう。チェックが済んだら知るかってことなんでしょう。たぶんね。
WPでやる場合のテクニック
ページ上の<script>に一括してdeferを仕込める。
add_action('after_setup_theme', function(){
if(is_admin()) return;
ob_start(function ($buffer_html) {
$buffer_html = str_replace('<script', '<script defer', $buffer_html);
return $buffer_html;
});
}, 90000);deferやasyncが付いてない前提なので、もし混ざってたら除外したり置換したりを仕込むように。もしくは元データを修正する。
管理画面は関係ないので除外しておく。
最後の「90000」は優先順位。普段はこんなに数値をデカくしないけど、こうなった。「after_setup_theme」であとの方にしてるんだけど、プラグインとチキンランすることになる。負けて先に発火すると追記漏れになってマイナス判定になる。
一番最後に、って発火条件は割りと頻繁にあることで、それを加味しても最後に、みたいなあれはホントだるいですね。
コメント