Web サイトの
目次
[TOC]
CLI ツールを 実行する
User guide | sonar documentation を
インストール、 作業ディレクトリの 作成
- インストール
% npm install -g --engine-strict @sonarwhal/sonar
OUTPUT
/usr/local/bin/sonar -> /usr/local/lib/node_modules/@sonarwhal/sonar/dist/src/bin/sonar.js > canvas-prebuilt@1.6.0 install /usr/local/lib/node_modules/@sonarwhal/sonar/node_modules/canvas-prebuilt > node-pre-gyp install [canvas-prebuilt] Success: "/usr/local/lib/node_modules/@sonarwhal/sonar/node_modules/canvas-prebuilt/canvas/build/Release/canvas-prebuilt.node" is installed via remote > amphtml-validator@1.0.20 postinstall /usr/local/lib/node_modules/@sonarwhal/sonar/node_modules/amphtml-validator > /bin/sh -c "exit 0" 2> postinstall.DELETEME && rm postinstall.DELETEME || node postinstall-windows.js > axe-core@2.4.2 postinstall /usr/local/lib/node_modules/@sonarwhal/sonar/node_modules/axe-core > node build/utils/postinstall.js + @sonarwhal/sonar@0.13.0 added 438 packages in 81.745s
作業ディレクトリを
作成
init
コマンドを打つため、 作業ディレクトリを 作成します。 mkdir sonar
init コマンド実行
- ディレクトリ移動、
initコマンドを 実行 cd sonar sonar --init
以下、
ブラウザを
選択
chrome
を選択しました。 Welcome to sonar configuration generator ? What connector do you want to use? (Use arrow keys) ❯ chrome jsdom
formatter を
選択
json
を選択しました。 ? What formatter do you want to use? ❯ codeframe json stylish summary
推奨ルールを
使うか 否かを 選択
Y
を選択しました。 ? Do you want to use the recommended rules configuration?
対象ブラウザを
選択
Default
を選択しました。 ? What browsers are you targeting? (Use arrow keys) ❯ Default (last 2 versions of each browser, and browsers with globaly usage over 1%, plus Firefox ESR) Custom (use browserslist format: https://github.com/ai/browserslist#queries)
.sonarrc の
内容を 確認
選択した設定に 従い、 .sonarrc
が作成されます。
上記の選択だと、 以下の 内容で 作成されました。 % cat .sonarrc { "browserslist": [], "connector": { "name": "chrome", "options": { "waitFor": 1000 } }, "formatters": [ "json" ], "ignoredUrls": [], "rules": { "amp-validator": "off", "apple-touch-icons": "error", "axe": "error", "content-type": "error", "disown-opener": "error", "highest-available-document-mode": "error", "html-checker": "error", "image-optimization-cloudinary": "off", "manifest-app-name": "error", "manifest-exists": "error", "manifest-file-extension": "error", "manifest-is-valid": "error", "meta-charset-utf-8": "error", "meta-viewport": "error", "no-disallowed-headers": "error", "no-friendly-error-pages": "error", "no-html-only-headers": "error", "no-protocol-relative-urls": "error", "no-vulnerable-javascript-libraries": "error", "ssllabs": "off", "strict-transport-security": "error", "validate-set-cookie-header": "error", "x-content-type-options": "error" }, "rulesTimeout": 120000 }
チェック実行
このサイトに
チェック実行
sonar https://www.monotalk.xyz
警告の
抜粋
json
フォーマットを選択したので、 json形式で 出力されます。 https://www.monotalk.xyz/static/fonts/Open-Sans-800italic/Open-Sans-800italic.woff2?5ddec16961e4: 5 issues [ { "location": { "column": -1, "line": -1 }, "message": "'content-type' header should have media type 'application/font-woff2' (not 'application/x-font-woff')", "resource": "https://www.monotalk.xyz/static/fonts/Open-Sans-800italic/Open-Sans-800italic.woff2?5ddec16961e4", "ruleId": "content-type", "severity": 2, "sourceCode": null }, { "location": { "column": -1, "line": -1 }, "message": "'server' header is disallowed", "resource": "https://www.monotalk.xyz/static/fonts/Open-Sans-800italic/Open-Sans-800italic.woff2?5ddec16961e4", "ruleId": "no-disallowed-headers", "severity": 2, "sourceCode": null }, { "location": { "column": -1, "line": -1 }, "message": "'x-ua-compatible' header is not needed", "resource": "https://www.monotalk.xyz/static/fonts/Open-Sans-800italic/Open-Sans-800italic.woff2?5ddec16961e4", "ruleId": "no-html-only-headers", "severity": 2, "sourceCode": null }, { "location": { "column": -1, "line": -1 }, "message": "'strict-transport-security' header was not specified", "resource": "https://www.monotalk.xyz/static/fonts/Open-Sans-800italic/Open-Sans-800italic.woff2?5ddec16961e4", "ruleId": "strict-transport-security", "severity": 2, "sourceCode": null }, { "location": { "column": -1, "line": -1 }, "message": "'x-content-type-options' header was not specified", "resource": "https://www.monotalk.xyz/static/fonts/Open-Sans-800italic/Open-Sans-800italic.woff2?5ddec16961e4", "ruleId": "x-content-type-options", "severity": 2, "sourceCode": null } ]
設定変更して、 再度チェックを 実行
コンソールで
また、
出力フォーマットを 変更
.sonarrc
を編集
.sonarrc
を編集して formatter を "stylish"
に変更します。 "formatters": [ "stylish" ],
チェックを
再実行 sonar https://www.monotalk.xyz
チェック結果の
抜粋
コンソール出力に見やすい 形式で 出力されます。 ✖ Finishing... https://www.monotalk.xyz/ Error Invalid date format in 'expires' value of the 'set-cookie' header to set 'csrftoken'. The recommended format is: Mon, 29 Oct 2018 11:58:05 GMT validate-set-cookie-header Error Manifest not specified manifest-exists Error jQuery@2.2.4 has 2 known vulnerabilities (1 medium, 1 low). See https://snyk.io/vuln/npm:jquery for more information. no-vulnerable-javascript-libraries line 4 col 21516 Error Protocol relative URL found: //monotalkxyz.disqus.com/count-data.js?1=BlogPost-323&1=BlogPost-324&1=BlogPost-325&1=BlogPost-326&1=BlogPost-327&1=BlogPost-328&1=BlogPost-329&1=BlogPost-330&1=BlogPost-331&1=BlogPost-332 no-protocol-relative-urls line 4 col 21764 Error Protocol relative URL found: //monotalkxyz.disqus.com/count-data.js?1=BlogPost-333&1=BlogPost-334&1=BlogPost-335&1=BlogPost-337&1=BlogPost-338&1=BlogPost-339&1=BlogPost-340&1=BlogPost-341&1=BlogPost-342&1=BlogPost-343 no-protocol-relative-urls line 4 col 22012 Error Protocol relative URL found: //monotalkxyz.disqus.com/count-data.js?1=BlogPost-344&1=BlogPost-345&1=BlogPost-346&1=BlogPost-347&1=BlogPost-348 no-protocol-relative-urls line 5 col 20046 Error Protocol relative URL found: //uh.nakanohito.jp/uhj2/uh.js no-protocol-relative-urls line 5 col 21384 Error Protocol relative URL found: //monotalkxyz.disqus.com/count.js no-protocol-relative-urls line 5 col 22996 Error <ul> and <ol> must only directly contain <li>, <script> or <template> elements axe line 16 col 205 Error Form elements must have labels axe line 16 col 310 Error Form elements must have labels axe line 16 col 1002 Error Protocol relative URL found: //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js no-protocol-relative-urls line 16 col 1598 Error Frames must have title attribute axe line 20 col 7460 Error Elements must have sufficient color contrast axe line 31 col 88 Error Protocol relative URL found: //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js no-protocol-relative-urls line 31 col 684 Error Frames must have title attribute axe line 33 col 10696 Error Links must have discernible text axe line 33 col 10909 Error Links must have discernible text axe line 33 col 11119 Error Elements must have sufficient color contrast axe ✖ Found 19 errors and 0 warnings 中略..................... https://fcmatch.youtube.com/pixel?goog … cql_Xe3xhq4cSK1pDUlBdIUqmjVJtWBTQ51wpzw Error 'x-frame-options', 'x-xss-protection' headers are not needed no-html-only-headers Error 'strict-transport-security' header was not specified strict-transport-security Error 'x-content-type-options' header was not specified x-content-type-options ✖ Found 3 errors and 0 warnings https://pagead2.googlesyndication.com/ … UiZYl3_X2rV4FTV0sl2De43qVlh58jk7tgEaozB Error 'strict-transport-security' header was not specified strict-transport-security ✖ Found 1 error and 0 warnings ✖ Found a total of 181 errors and 0 warnings
ignore URL を 追加
3rd party の
- ignore URL に、
エラーを 無視したい ドメインを 追加
ignoredUrls
に、エラーを 無視したい ドメインを 追加します。
全てのルールを 無視したいので、 rules
には["*"]
を設定しています。
"ignoredUrls": [ { "domain": "pagead2.googlesyndication.com", "rules": ["*"] }, { "domain": "www.gstatic.com", "rules": ["*"] }, { "domain": "tpc.googlesyndication.com", "rules": ["*"] }, { "domain": "fonts.gstatic.com", "rules": ["*"] }, { "domain": "googleads.g.doubleclick.net", "rules": ["*"] }, { "domain": "monotalkxyz.disqus.com", "rules": ["*"] }, { "domain": "fonts.googleapis.com", "rules": ["*"] }, { "domain": "www.google-analytics.com", "rules": ["*"] }, { "domain": "securepubads.g.doubleclick.net", "rules": ["*"] }, { "domain": "uh.nakanohito.jp", "rules": ["*"] }, { "domain": "adservice.google.com", "rules": ["*"] }, { "domain": "adservice.google.co.jp", "rules": ["*"] }, { "domain": "www.googletagmanager.com", "rules": ["*"] } ],
チェックを
再実行 sonar https://www.monotalk.xyz
チェック結果
3rd party のドメインの エラーは 出力されなくなりました。 ✖ Finishing... https://www.monotalk.xyz/ Error Invalid date format in 'expires' value of the 'set-cookie' header to set 'csrftoken'. The recommended format is: Mon, 29 Oct 2018 12:05:14 GMT validate-set-cookie-header Error Manifest not specified manifest-exists Error jQuery@2.2.4 has 2 known vulnerabilities (1 medium, 1 low). See https://snyk.io/vuln/npm:jquery for more information. no-vulnerable-javascript-libraries line 4 col 21516 Error Protocol relative URL found: //monotalkxyz.disqus.com/count-data.js?1=BlogPost-323&1=BlogPost-324&1=BlogPost-325&1=BlogPost-326&1=BlogPost-327&1=BlogPost-328&1=BlogPost-329&1=BlogPost-330&1=BlogPost-331&1=BlogPost-332 no-protocol-relative-urls line 4 col 21764 Error Protocol relative URL found: //monotalkxyz.disqus.com/count-data.js?1=BlogPost-333&1=BlogPost-334&1=BlogPost-335&1=BlogPost-337&1=BlogPost-338&1=BlogPost-339&1=BlogPost-340&1=BlogPost-341&1=BlogPost-342&1=BlogPost-343 no-protocol-relative-urls line 4 col 22012 Error Protocol relative URL found: //monotalkxyz.disqus.com/count-data.js?1=BlogPost-344&1=BlogPost-345&1=BlogPost-346&1=BlogPost-347&1=BlogPost-348 no-protocol-relative-urls line 5 col 20046 Error Protocol relative URL found: //uh.nakanohito.jp/uhj2/uh.js no-protocol-relative-urls line 5 col 21331 Error Element “ul” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.) html-checker line 5 col 21384 Error Protocol relative URL found: //monotalkxyz.disqus.com/count.js no-protocol-relative-urls line 5 col 22996 Error <ul> and <ol> must only directly contain <li>, <script> or <template> elements axe line 16 col 97 Error Element “form” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.) html-checker line 16 col 205 Error Form elements must have labels axe line 16 col 310 Error Form elements must have labels axe line 16 col 743 Error Element “p” not allowed as child of element “h1” in this context. (Suppressing further errors from this subtree.) html-checker line 16 col 1002 Error Protocol relative URL found: //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js no-protocol-relative-urls line 16 col 1598 Error Frames must have title attribute axe line 19 col 2149 Warning Text run is not in Unicode Normalization Form C. html-checker line 20 col 7460 Error Elements must have sufficient color contrast axe line 31 col 88 Error Protocol relative URL found: //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js no-protocol-relative-urls line 31 col 684 Error Frames must have title attribute axe line 33 col 10696 Error Links must have discernible text axe line 33 col 10909 Error Links must have discernible text axe line 33 col 11119 Error Elements must have sufficient color contrast axe ✖ Found 22 errors and 1 warning ✖ Found a total of 22 errors and 1 warning
除外ルールを 追加
validate-set-cookie-header
、no-protocol-relative-urls
、no-vulnerable-javascript-libraries
は
また、manifest-exists
に
"rules": { "amp-validator": "off", "apple-touch-icons": "error", "axe": "error", "content-type": "error", "disown-opener": "error", "highest-available-document-mode": "error", "html-checker": "error", "image-optimization-cloudinary": "off", "manifest-app-name": "error", "manifest-exists": "off", // off に設定 "manifest-file-extension": "error", "manifest-is-valid": "error", "meta-charset-utf-8": "error", "meta-viewport": "error", "no-disallowed-headers": ["error",{ "ignore":["Server"] }], "no-friendly-error-pages": "error", "no-html-only-headers": "error", "no-protocol-relative-urls": "off", // off に設定 "no-vulnerable-javascript-libraries": "off", // off に設定 "ssllabs": "off", "strict-transport-security": "error", "validate-set-cookie-header": "off", // off に設定 "x-content-type-options": "error" },
Web UI で 実行する 場合との 違いに ついて
推奨ルールを
aXe
のhtml-checker
の
aXe の
チェックが 効いている
2017/10/30
時点ではWeb UI での aXe の チェックは 実施できないようですが、 CLI からは 実行されており、 ログに 警告が 出力されています。 “html-checker” が
効いている
Web UI だと、html の 妥当性検証は かかっていなかったのですが、 CLI ツールで 実行すると、 チェックが かかるようです。 “ssllabs” が
“off” に なっている
Web UI だと、Qualys SSL Labs
のチェックが 行われますが、 CLI では 推奨ルールで OFF に なっています。
これは、イントラネット環境で Glogbal な Domain が 割り当てられていない 場合、 チェックが 失敗するからかと 思います。 “image-optimization-cloudinary” が
“off”
cloudinary のapi に よる 画像の サイズチェックも OFF に なっています。
これも、イントラネット環境で Glogbal な Domain が 割り当てられていない 場合、 チェックが 失敗するからかと 思います。
Cloudinary offers support for sonar | Cloudinary Blog“amp-validator” が
“off”
これは、Web UI でも OFF に なっていました。 AMP ページの 場合は 有効に するのかと 思います。
警告に 対処する
出力されたFound a total of 22 errors and 1 warning
に
Web UI で
html checker の 警告
以下、html checker
の
Error Element “ul” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.)
ul の子要素と して ul が 使用されていると いう 警告です。
確かに不要な ul が ありましたので 削除しました。 Error Element “p” not allowed as child of element “h1” in this context. (Suppressing further errors from this subtree.)
h1 の子要素と して、 p タグが 使われていると いう 警告です。
h タグの中に 入れていいのは インライン要素のみなので、 ブロックタグ である p タグは 削除する 必要が あります。
対象箇所のp タグを 削除しました。 1 Warning Text run is not in Unicode Normalization Form C.
「Text run is not in Unicode Normalization Form C.」と いう HTML Validation Serviceの 警告に ついて: 小粋空間 を 見る 限り Unicode正規化形式C
ではない文字列が 混じっている とこの 警告が でるようです。 対象箇所を Validator.nu (X)HTML5 Validator で 確認した ところ、 濁点まじりの 文字で 警告が 出ているようでした。
Pythonのunicodedata.normalize(‘NFKC’, x)で 正規化される 文字一覧 - めも ちょう を 見ると、 unicodedata.normalize
で正規化は できそうなので、 後日やってみようかと 思います。
axe の 警告
続いて、axe
の
sonar ではaxe
の
私は
aXe - Chrome ウェブストア
Error Form elements must have labels
Form のinput タグに label が 付与されていないと いう 警告です。
これはForm の デザイン的に 入れるのが 難しいため、 無視しました。 **Error `
- and
- ,
- must only directly contain