Lighthouse の Best Practices で100→93になる件について

Lighthouse の Best Practices でスコア100だったのが93になるとコメントで教えてもらったのですが、問題は「Ensure CSP is effective against XSS attacks」が原因では無くって、FC2(やその他HTML内に入れている解析コード等のJS)から貰ってしまう Cookieとサイトデータが原因なのだと私的に考えています。

以下、自分のFC2ブログを GoogleChrome の Devツール > Lighthouse で検証したものです。他サイト他ブログでは結果が異なりますし、素人検証故に結論として断言できないので流して読んで下さい。

FC2から貰ってしまうCookie等諸々のために「SameSite Cookie」が出来て「Issues were logged in the Issues panel in Chrome Devtools」というが発生。…これがスコア93(100マイナス7)の原因だと思います。

「SameSite Cookie」として検出される中にFC2以外のもの(例えばアクセス解析等のCookie)も含まれる事が有ります。なので、調べる場合はテンプレートから予め該当JSを削除しておく、プラグインの場合は外しておくようにします。

検証してみました。

  • 先ずFC2管理画面にログインし、自分のブログを開く。(ここでcookie諸々を貰う)
  • 次にFC2管理画面からログアウトして自分のブログをGoogleChromeのDevツール,Lighthouseで見てみる。
    すると、FC2からcookie諸々を貰っているので下記のような事になります。

    Issues were logged in the Issues panel in Chrome Devtools が出来る

    デベロッパーツール1

    クリックして開くとSameSite Cookieが…

    デベロッパーツール2
  • 先程FC2管理画面を開いた時に貰ったcookie等を削除する。以下、行った方法。

    → GoogleChromeの右上︙をクリックして『設定』を選択
    →「プライバシーとセキュリティ」の「Cookieと他のサイトデータ」
    →「すべてのCookieとサイトデータを表示」
    → 右上の「Cookieを検索」に [ fc2.com ] と入れる
    → 表示されたものの中から [ fc2.com ] の「〇件のCookie,ローカルストレージ」を削除
  • 再度自分のブログをリロードしてからGoogleChromeのDevツール,Lighthouseで見てみる。
  • Best Practicesが100になっている。

    デベロッパーツール3

…で、Best Practicesにまだ「Ensure CSP is effective against XSS attacks」も出ています。故に、スコアが97になる理由はこれではない模様。

「SameSite Cookie」が出来る要因を探してCookieとサイトデータを削除するとスコアが100に戻るので原因はこれかな…って、こりゃ貰ってしまうものはどうしようもないというか…気にしてもしょうがないのかな?と、そんな感じです。(^^ゞ

通常のDevツール検証を行うと色んな要因でスコアが下がってしまうので、正しい検証値を知りたい場合は『シークレットモード』を使って下さい。

(因みにFC2管理画面ログイン後にシークレットモードで開いた自身のブログはBest Practices スコア100でした。通常モードの拡張機能 Lighthouseでも100です。)

「Ensure CSP is effective against XSS attacks」については、少し前から気付いておりましたが気にしておりませんでした。

ならいざ知らず、なので今のところは「気にしてね」程度の注視として考えています。

あとこの件、異論・反論・的外れ等々何かご意見や情報が有る方は是非教えて下さいませ。m(__)m

[Tag] * Google * Lighthouse * FC2

Comments

おはようございます

akiさん、わざわざ検証してくださってありがとうございます。
自分が犯している大きなミスでなければ、もうしばらくは様子見ということで、スコアは気にしないことにします。
いつもありがとうございます。
2021-09-04-06:35 そふぃあ
[ 返信 * 編集 ]

akiさん、おはようございます!

akiさんのテンプレート、楽しく自慢げに利用させていただいています。
若干の変更はお許しくださいね?
また、教えて下さい。
*タイトルは「写游暇人」としていますが、このタイトルに合わせる
ように「PHOTOCLUB」と言うのを写游歌人の上に追記したいのですが?
なお、フォントサイズはタイトルの半分ぐらいにはしたいと思います。
可能でしたらお教えいただきたく存じます。
2021-09-04-10:38 写游暇人1987
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-09-04-10:46 -
[ 返信 ]

ありがとうございます

詳しくご検証くださりありがとうございます
なんだかんだで頼ってしまいお手数をおかけしてすみません
お疲れ様でした┏○︎))

この記事を拝見して、久々に拡張機能の方のライトハウスで
(ぼっちん先生の記事からブックマークレットを拝借し)
計測してみたところ、ベストプラクティス100点でした
が、devツールの方のライトハウスで計測すると
cookieを全削除してリロードするを繰り返し何度検証しても
93点でした

しかしながらこれ以上気にしてもしょうがないという所に着地したいと思います
(とか言いながら気になるんでしょうけどね(;¯▿¯)←)

何か思い当たることといえば、自分のchromeは、起動した瞬間にシークレットモードになるように設定しているのですが
それも何か関係あるのかしら
もしそれが原因なら93点のままでいいです←どんだけ履歴残すの嫌やねん


この度は誠にありがとうございました
┏○︎))
2021-09-04-13:36 徳川たぬこ
[ 返信 * 編集 ]
aki

Re: そふぃあ 様へ

こんにちは。コメント有難うございます。(^-^)

> 自分が犯している大きなミスでなければ、もうしばらくは様子見ということで、スコアは気にしないことにします。
…そうなんですよね。それまで問題が無い事に突然「いちゃもん」付けられても、どうしていいものやら分からないものも有ります。
で、そのうち誰かが解決策を見出してくれるだろう…という、やっぱり他力本願(笑)。
暫し様子見で参りましょう。(←私も(^^))
2021-09-04-13:53 aki
[ 返信 * 編集 ]
aki

Re: 写游暇人1987 様へ

こんにちは。コメント有難うございます。(^^)

ブログのタイトルは、環境設定のブログ名で設定したものをFC2の変数で出力しているので、変数内の一部を加工(文字サイズや色等)は出来ません。
なので「写游暇人」というブログタイトルはそのままですが、そこにくっ付ける形で対応できます。
やり方は色々有ると思うのですが一番簡単な方法です。ただ、テンプレートを他のものに変更すると表示されませんのでご了承下さい。(変更された際はテンプレート作者様にお問い合わせ下さい。)

① ご利用テンプレートの編集画面を出し、パソコンのキーボードでCtrlキー+Fキーを押して検索窓内に header と入れて検索して下さい。

② 一番初めに出てきた箇所を下記のように変更して下さい。
【 青い文字色部分をオレンジ文字色部分のように変更 】

<header>
<h1 id="blog-name"><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><%introduction></div>
</header>

↑これを↓のように変更。(コピー&ペースト可)

<header>
<h1 id="blog-name"><span style="font-size:0.45em;display:block;line-height:1;">PHOTOCLUB</span><a href="<%url>"><%blog_name></a></h1>
<div class="introduction"><%introduction></div>
</header>

③ 後は更新ボタンを押して完了です。

不具合が有ったらご連絡下さい。m(__)m
2021-09-04-15:14 aki
[ 返信 * 編集 ]
aki

Re: - 様へ

こんにちは。コメント有難うございます。(^-^)
そちらでお返事致しますね。
2021-09-04-15:18 aki
[ 返信 * 編集 ]
aki

Re: 徳川たぬこ 様へ

こんにちは。コメント有難うございます。

う~ん、こちらで見るとシークレットモードのDevツールでスコア100なんですけどね。^^;

> 何か思い当たることといえば、自分のchromeは、起動した瞬間にシークレットモードになるように設定しているのですが
> それも何か関係あるのかしら

ひょっとしてシークレットモードに拡張機能入れてませんか?
シークレットモードはそもそも閲覧履歴などの情報を残さない機能なので、拡張機能を入れてしまうと機能が制限される恐れが有るようです。
https://color-variations.com/chrome-secret-add/
これが一因かどうかは分かりませんが、私の環境からたぬこさんのブログをシークレットモードのDevツールで見るとスコア100です。
https://blog-imgs-144.fc2.com/s/o/r/sorauta1/secret-017073.jpg
多分、ご自身の閲覧環境の問題では?と思いますので気にしないで良いのではないかな。(^^)
2021-09-04-16:35 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-09-04-19:52 -
[ 返信 ]
aki

Re: - 様へ

コメント有難うございます。また何か有りましたらお教え下さい。
今後とも宜しくお願い致します。(^^)
2021-09-04-20:29 aki
[ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2021-09-06-09:26 -
[ 返信 ]
aki

Re: - 様へ

こんばんは。コメント頂き有難うございます。(^-^)
詳しくは書きませんが…良かったです。私の検証は的がズレてたかも?とちょっと反省。
因みに花火、PC検証でなら何度か見てますよ。「おお?」って思いますよね。一瞬ビックリしますけど。(^▽^;)
(お返事不要です。)
2021-09-06-21:33 aki
[ 返信 * 編集 ]

aki さん、おはようございます!

ご丁寧に、ご心配をいただき本当にありがとうございました。
ご返事の件は記録に保存していますが、残得ながらまだ実行を
しておりません。改善しましたら改めてご連絡させていただきます。
2021-09-08-07:39 写游暇人1987
[ 返信 * 編集 ]
aki

Re: 写游暇人1987 様へ

こんにちは。お返事頂き有難うございます。

コメントが増えて、当方の返信が分からなくなってしまったのではと不躾ながら連絡させて頂きました。
ご存知であれば問題有りません。
何かございましたら再度コメントをお願い致します。大変失礼致しました。m(__)m
2021-09-08-14:36 aki
[ 返信 * 編集 ]

aki さん、こんばんは!

先日はありがとうございました。
タイトルの変更はまだ実行していませんですみません。
また、教えて下さい。
写游暇人のページを開くと、今までは右にあったカラム
(プロフィールなど)が本文下に移動してしまっています。
元に戻す術を知りませんので、教えて下さい。
いつもごめんなさい。
2021-09-12-19:22 写游暇人1987
[ 返信 * 編集 ]

akiさん、おはようございます!

早速のご指導ありがとうございました。
ご返事のコメントは現在表示されていませんが、
コメントを記憶していましたので、今朝に修正して見ました。
無事に元の状態に戻りホッといたしました。
フォトブック・遠征記録などの欄は</a>を
最尾に追加しましたが、これでよろしかったですよね?
いつもながら適切なご指導痛み入ります。
今後ともよろしくお願いいたします。
先ずは、御礼まで❣
2021-09-13-07:27 写游暇人1987
[ 返信 * 編集 ]
aki

Re: 写游暇人1987 様へ

こんにちは。コメント有難うございます。

実は昨日返信を付けていたのですが、今朝早く誤字を見付けたので修正しようとスマホから作業をしていたら、間違って削除を押してしまいまして…。
頑張って打った長文だったのでメチャクチャ凹んでしまいました。(-_-;)
午前の出先から帰ったら再度コメントしようと思っておりました、が既に読んで頂いて修正できたという事。
とても助かりました。有難うございます。

不具合箇所(</a>も)、無事に直っているようで良かったです。
消えてしまった先のコメントでも書いたのですが、記事掲載後(若しくはプラグイン追加後)に表示がおかしくなった場合は、その記事(プラグイン)に原因がある事を疑って下さい。
『開始タグ』と『終了タグ』がキチンと対になっているか、片方になっていないか、大体これが原因です。
「あれ?」と思ったら是非見て下さいね。(^^)
2021-09-13-12:29 aki
[ 返信 * 編集 ]





非公開コメント