東京五輪ボランティア応募サイトを検証してわかったこと

はじめに

Twitterで東京五輪のホームページがやばいという話

東京五輪ボランティアの応募フォーム、ステップ1〜6まであるんだけど、普通はそのページを入力し終わったら最下部の送信ボタンを押して次のステップに行くと思うじゃん？
けど東京五輪ボランティアは違う。
まじでビビった。こんな仕打ちはないでしょ😂😂
なにこのエラー表示😂😂 pic.twitter.com/MTODKCjpUX

— ぼへ⭕️ (@bhe_bbo) 2018年9月27日

が上がっていたので、検証してみることにしました。

このWEB業界に精通しているわけではないので、拙い点は多々あるかと思いますが、よろしくお願いいたします。

とりあえず検証してみる

不具合が多すぎるからか、このような文章が追加されています。

必須項目の＊が見辛い

必須項目の＊が他の文字と同じ大きさ、色なのでとても分かりづらいです。

中華フォント

中華フォントが使用されていて、視認性が悪くなっています。

idが日本語

idに日本語って設定できるんだ…って今更知りました（）

10/3 追記

HTML、CSSではid属性やName属性に使える文字は英数、ハイフン、アンダースコア、コロン、ピリオドで、最初の文字はアルファベット。という規定があります。
参考: http://memopad.bitter.jp/w3c/html5/att_global_id.html

idに日本語をつかっても良いという説はありますが、日本語（全角文字）は一文字3バイトなので、全体で見るとファイル容量が大きくなり、Webサイト全体のファイル容量が増えてしまう結果につながります。
参考:　http://tech.sanwasystem.com/entry/2017/11/13/102531

WikipediaではIdに日本語が機械的に自動生成され埋め込まれるようですが、ここでは割愛させていただきます。

生年月日がグダグダ

その1

NANの嵐です。

その2

生年月日に「今日」が選択可能になっています。 規定上、参加時に18才以上である事が条件のようなので、日時の設定を入れることもできたかもしれません。

項目の補完がひらがなに対応していない

##　a href="javascript:void(0);"

今ではあまり使わないコードです。
ステータスバーにコンテンツが表示されてしまうため、代替の手段があるはずです！

a要素にalt属性がついている…

ここはAlt属性ではなくTitle属性を用いた方が良いのではないかと思います。

Voice overが最悪

MacのVoice overという機能を使うと、応募フォームの読み上げを検証できます。

意味のわからない説明が読み上げられるので、目が不自由な方は、音声だけでどこのフォームを指しているのか判断できません。

CSSのミス？

media="screen and (min-width: 768px)"

と指定してあるのに

html, body {
    min-width: 1200px;
}

となっています。

また、body内にstyleタグが多くあったり、idが複数あったりと、理解の範疇を超えていました。

ソースが丸見え

webpackのmapファイルがアップロードされているため、React.jsのソースがすぐに見える状態になっています。 ~~これはセキュリティー的にいい状態とは言えないのではないでしょうか？~~ ~~ソースマップは開発情報が含まれているため、安易に公開しても良い情報ではありません。~~ ~~コードに脆弱性が含まれていることもあるため、ソースマップが公開されていると、公開されていない場合に比べて攻撃者にヒントを多く与えることになるため、脆弱性が突かれやすくなります。~~

10/3 追記

ソースマップを本番環境に置く必要性はないのではないか、という意見です。
セキリュティ的によくないという記述をしましたが。「セキュリティ」という言葉にも伝わり方の個人差がありますので、「XSSなどに利用される危険性があったり、脆弱性が突かれやすくなる」という表現に訂正させていただきました。

12/8 追記

かなりたくさんのコメントをいただき、ありがとうございます。
@tiwanari さんより、「タイトルのヤバい」と言う言葉が誤解を招くのではないのか、と言う意見をいただきましたので、記事のタイトルを
東京五輪ボランティア応募サイトを検証したら予想以上にヤバかった（語彙力） より 東京五輪ボランティア応募サイトを検証してわかったこと　に名称変更させていただきます。

ソースマップに関してですが、実際に攻撃をする前提なら手間暇がかかると言う問題があるので公開することに影響はあると思います。
（解析するのに手間がかかると言う意味で）

最後に

せめて身体に不自由のある方が困らないようにしてほしいと思います。

#　参考文献
https://qiita.com/clockmaker/items/05aeaf6c69a57150e315