Front-End-Checklist の日本語訳を読んで、補足っていうか自分の知らなかったものとか、あれ?これなんだっけ??ってのを まとメモ
Head
・X-UA-Compatible
制御パラメータを利用して古いブラウザの機能をエミュレートさせることができる。
content=”IE=edge”はIEの最新バージョンの標準モードで表示するという設定。
・Description
ページの内容をあらわす概要を記述する。
検索結果のスニペットで使われる事がある。
・Canonical
複数の重複 ページが存在している場合に、 検索エンジンに優先させるべき ページを伝えることでそれ以外のページは重複 ページであることを伝える事ができる。
なぜ URLの正規化が必要か
- どれを インデックスに登録するか判断できない
- リンクポピュラリティが分散する
などがある
・Noopener
target="_blank" で外部リンクを使用する際、rel="noopener" 属性をつけて Tabnabbing 脆弱性を防ぐ。
Tabnabbing 脆弱性
スクリプトにより非アクティブのタブ上のページを偽のページに書き換え、ユーザがそのタグに移動したとき、偽のページを利用してパスワードなど情報を盗み出す。
JavaScript
・Modernizr
modernizr.jsというJavaScriptのライブラリ。
閲覧者のブラウザがどのような機能をサポートしているかをチェックして、HTMLタグにサポート状況を判別できるクラスを付与し、その結果を記録したmodernizrグローバルオブジェクトを生成してくれる。
閲覧者の使用しているブラウザごとに判別してクラスを付与して、追加されたクラスを使うことで、ブラウザの対応状況に応じたCSSを記載することができるようになる。
たとえばcanvasが利用可能な場合は「canvas」とクラス名を付与する。canvasが利用できない場合は、頭にno-がついた機能名、「no-canvas」 というクラス名を付与する。
・ESLint
JavaScript のための静的検証ツール。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立つ。
特徴
- すべての検証ルールを自由に on/off できる
- 自分のプロジェクトに合わせたカスタムルールを簡単に作れる
- 豊富なビルトイン ルール (4.0.0 時点で 247 個) に加えて、たくさんのプラグインが公開されている
- ECMAScript 2015 (ES6), 2016, 2017 を標準サポートしている
- JSX 記法 をサポートしている
- Babel と連携することで、仕様策定中の新しい構文や Flow 型注釈にも対応できる
参考：ESLint 最初の一歩
セキュリティ
・Content Type Options
X-Content-Type-Options: nosniff
ファイルの内容からファイルの種類を決定できないようにするヘッダフィールド。
Content-typeを’text/plain’と指定した場合には指定通り
テキストとしてと表示されるようになる。
これによってクロスサイトスクリプティング(XSS)が防止できる。
・X-Frame-Options (XFO)
iFrameを使って他のサイトから自分のサイトが読み込まれないようにするヘッダフィールド。
クリックジャッキングを防ぐ。
クリックジャンキングとは
悪意のあるサイト上の特定箇所をクリックさせ、他のサイトの設定情報を変更させること。
他のサイトは、iframeを使って読み込まれた上で、視覚的に見えなくしてある。
用語以外
Cookie size: もし Cookie を使用しているなら、4096 バイトを超えていないこと、20以上の Cookie を使用していないこと。
これは知らんかった...Cookie関連(キャッシュとか諸々)まだ知らんことが多い...(｡ŏ﹏ŏ)