Web サイトの診断ツール Sonar を使ってみる

SonarQube ではなくて、Sonar という Web サイトの診断ツールがあることを知りました。
調度、Web UI から実行できるという記事を見つけたので、試しに実行して、問題に対処してみようかと思います。

目次

[TOC]

参考

sonar: Linting the web forward - Microsoft Edge Dev BlogMicrosoft Edge Dev Blog

MicrosoftがWebサイト診断ツールSonarをコマンドラインツールとWebサービスで提供 | TechCrunch Japan

前提

過去に、PageSpeed Insights、Observatory by Mozilla の チェックと対策はある程度実施していてそこそこの点数は出るようになった状態でチェックを実施しています。
対応状況によって、チェック結果は異なるかと思います。

• PageSpeed Insights

• Observatory by Mozilla :: Scan Results for www.monotalk.xyz

Web UI から Lint を実行する

実行方法

sonar’s online scanner にアクセスして、スキャンしたいサイトの URL を入力し実行します。

• サイトURLを入力

• 少し待つ
  Scan 結果を表示する PERMALINK が生成されます。
  少し待つと結果に遷移するので少し待ちます。
  

• 実行結果
  以下のような実行結果のサマリーが出力されます。
  

指摘の内容に対処する

1 WARNING 、 55 ERROR が出力されました。 指摘は以下のカテゴリに分類されます。

各カテゴリごとの指摘内容を確認し、対処可能なものは対処していきます。

Accessibility

• [WARNING] Error executing script: “TIMEOUT”. Please try with another connector スクリプトがタイムアウトして、うまくチェックできてないというWARNINGがでていました。
  sonar は aXe というツールで Accessibility をチェックしているようなのですが、どうもそれが上手く動いてないという警告のようで、そもそもチェックができていないので、一旦対処はスルーします。
  aXe によるチェックは、Chrome plugin aXe - Chrome ウェブストア でも実施できそうなので、そちらで実施してみようかなと思います。

Interoperability

• [ERROR] ‘content-type’ header should have ‘charset=utf-8’
  js ファイルと、css ファイルに、content-type に charset 属性がなく、付与すべきという警告です。
  使用している HTTP サーバは Apache のため、以下 AddCharset を httpd.conf に追加して対処しました。
  

  AddCharset utf-8 .css .js
  

• ‘content-type’ header should have media type ‘text/javascript’ (not ‘application/javascript’) Javascritpt の content-type の media type 指定が、'application/javascript' になっているという警告です。
  これは、3rd party Javascript で出力されていたため、対処しませんでした。

• ‘content-type’ header should have media type ‘image/x-icon’ (not ‘image/vnd.microsoft.icon’)
  これは、favicon.ico の content-type に、'image/vnd.microsoft.icon' が設定されており、'image/x-icon' に変更すべきという警告でした。
  CentOs 、 Apache では /etc/mime.types に拡張子と、content-type のマッピングは記述されているので、記載を修正しました。
  

  image/vnd.microsoft.icon
  image/x-icon                    ico
  

• ‘x-ua-compatible’ header was not specified これは、Meta tag usage is discouraged, use equivalent HTTP header の警告とセットになります。
  x-ua-compatible を http ヘッダに付与すべきという警告になります。
  httpd.conf には以下のSet Header 指定を追加し、
  

  Header set X-UA-Compatible: IE=edge
  

  HTML上から、<meta http-equiv="X-UA-Compatible" content="IE=edge"> を削除しました。
  上記 Header の追加後、再度チェックを実行したところ、今度は、付与する必要のないリソースのヘッダにX-UA-Compatible: IE=edge が付与されてしまったので、最終的に以下のように定義を追加しました。¹

  <IfModule headers_module>
     Header set x-ua-compatible: "IE=edge"
  </IfModule>
  <IfModule headers_module>
      <FilesMatch "\.(js|css|otf|eot|woff|ico|jpg|woff2)$">
          Header unset x-ua-compatible 
      </FilesMatch>
  </IfModule>
  

• Meta tag usage is discouraged, use equivalent HTTP header
  'x-ua-compatible' header was not specified の警告に対する対応が、この警告に対する対処になります。

• A charset meta tag was already specified
  <meta content="text/html; charset=utf-8" http-equiv="Content-type"> で、charsetを指定しているが、既に<meta charset="utf-8"> で定義しているので不要という警告になります。
  meta 要素 - HTML | MDN に meta タグ の役割が記載されています。
  HTML 5 では指定は不要なので、<meta content="text/html; charset=utf-8" http-equiv="Content-type"> の記載は削除します。

Performance

• ‘x-xss-protection’ header is not needed
  3rd party のリソースで発生しているエラーでした。対処できないので無視します。
  不要なx-xss-protection ヘッダが付与されているという警告です。

• ‘x-frame-options’, ‘x-xss-protection’ headers are not needed
  3rd party のリソースで発生しているエラーでした。対処できないので無視します。
  不要な'x-frame-options', 'x-xss-protection' ヘッダが付与されているという警告です。

PWA

• No ‘apple-touch-icon’ was specified
  apple-touch-icon の記述がないという警告です。 180*180 の icon を配置し、以下のタグを追加することで解消されました。
  

  <link rel="apple-touch-icon" href="{% static "img/apple-touch-icon.png" %}" />
  

Security

• your_domains grade X doesn’t meet the minimum A- required.
  Qualys SSL Labs の SSL チェックの グレードが X だったというエラーです。
  Qualys SSL Labs の SSL脆弱性診断(SSL Server Test)について | 株式会社セブンネット
  すぐには対処できなそうですので、後日対処していこうと思います。²

• no-protocol-relative-urls
  これは外部 URL の プロトコル表記 を省略していると、出力されます。
  画像 URL 等 多数プロトコル省略して記述しているため、対応を見送りました。

• ‘x-content-type-options’ header was not specified
  x-content-type-options を付与していないリソースで警告が出力されていました。
  3rd party のリソースだったので、対処できないため無視します。

• validate-set-cookie-header:
  Invalid date format in 'expires' value of the 'set-cookie' header to set 'xxxxxxxx'. The recommended format is: Sun, 28 Oct 2018 13:35:42 GMT cookie の expires の 日付フォーマットが、推奨されるフォーマットと異なるという警告です。
  これは django の 'expires' 日付フォーマットが以下の値で、設定を変更する拡張ポイントが現状(2017/10/30) でないため、対処しませんでした。

  • 日付フォーマット
    'Wdy, DD-Mon-YYYY HH:MM:SS GMT'

  ちなみに、日付のフォーマットは、django.utils.http.py の cookie_date で指定しています。

  • cookie_date
    

    def cookie_date(epoch_seconds=None):
        """
        Formats the time to ensure compatibility with Netscape's cookie standard.
    
        Accepts a floating point number expressed in seconds since the epoch, in
        UTC - such as that outputted by time.time(). If set to None, defaults to
        the current time.
    
        Outputs a string in the format 'Wdy, DD-Mon-YYYY HH:MM:SS GMT'.
        """
        rfcdate = formatdate(epoch_seconds)
        return '%s-%s-%s GMT' % (rfcdate[:7], rfcdate[8:11], rfcdate[12:25])
    

• no-vulnerable-javascript-libraries
  jQuery@2.1.1 has 2 known vulnerabilities (1 medium, 1 low). See https://snyk.io/vuln/npm:jquery for more information. 脆弱性がある、javascript ライブラリを使用しているという警告です。
  jQueryの version 2 系の最新version である、jquery-2.2.4.min.js に更新しました。
  しかし、2.2.4 でも脆弱性の警告は消えず、対処することをあきらめました。

警告対処後にチェックを再実行

警告対処後に、再実行しました。
1 WARNING 、 35 ERROR が出力となりました。

まとめ

Wen サイトの診断ツール Sonar を使ってみました。
以下まとめます。

• Sonar は、Lint ツールを幾つか統合しており、総合的なチェックが実施できる。

• Web UI からは、Accessibility 関連のチェックは現状実行できない。

• 自ドメイン以外のドメインのリソースで警告がでる。リソースを読み込まないか、無視するかの対応になる。

Accessibility 関連のチェックもWeb上で動くようになれば、Lint チェックはこれだけでもいいかもしれません。
以上です。