フロントエンドエンジニア必見！ 脆弱性の仕組みと対策方法を解説

【10-A-4】フロントエンド開発のためのセキュリティ入門

　WebブラウザやWebフロントエンドの技術は日々進化しており、Webページの表現はどんどん多彩なものになり、同時に実装がどんどん複雑になっている。この進化に合わせるように、フロントエンドの脆弱性も増加しており、実装を誤って攻撃を許してしまう例が増えている。フロントエンドエンジニアは、複雑になる実装に追随しながら、脆弱性にも気を配らなければならなくなっている。しかし脆弱性にもさまざまな種類があり、すべてを漏らさず把握し、的確な対策を打つことはかなり難しい。このセッションでは、サイボウズ株式会社New Business Divisionの副部長であり、同社でフロントエンドエンジニアとして活躍している平野昌士氏が、Webアプリケーションをようやく作れるようになった若手エンジニアを想定して、フロントエンドに多い脆弱性の仕組みとその対策について解説した。

セキュリティ強度を高めるためにHTTPはHTTPSに切り替えよう

　まず平野氏は、OWASP（Open Worldwide Application Security Project）が数年に一度発表しているセキュリティリスク上位10件から、「暗号化の失敗」「アクセス制御の不備」「インジェクション」「脆弱で古くなったコンポーネント」の4件を挙げ、このセッションではこの4件に絞って解説するとした。

　暗号化の失敗は、Webブラウザとサーバーの間のHTTP（Hypertext Transfer Protocol）通信を暗号化できていないことだ。HTTPは平文のまま通信データをやり取りするので、通信経路の途中でデータを盗聴されたり、改ざんされたりする可能性がある。さらに、HTTPでは通信相手が本物であるか確認できないため、攻撃者が仕掛けた偽物のサーバーに機密データを送信してしまう可能性もある。

　そこで必要になるのがHTTPからHTTPSへの切り替えだ。HTTPSはHTTP通信のデータをTLS（Transport Layer Security）プロトコルで暗号化する仕組みだ。TLSで電子証明書をやり取りすることにより、通信相手が本物であるかも検証できる。

　しかし、WebサイトをHTTPS化する際に注意しなければいけない点があります。その１つが「Mixed Contents」です。Mixed Contentsとは、1つのWebページにHTTPで配信されたリソースとHTTPSで配信されたリソースが混在する状態を指す。例えば、URLが指すWebページ自体がHTTPSで配信されていても、サブリソースのJavaScriptがHTTPで配信されている状態では、通信の途中で改ざんされて攻撃コードが埋め込まれる可能性がある。Mixed Contentsになってしまっているかどうかは、「Chrome DevTools」などを使えばすぐに分かる。HTTP通信が残っているようならば、早急に修正すべきだ。

　修正箇所が多いときや、すぐにHTTPS通信に切り替えることが難しいときは、サーバー側でHTTPのリクエストをHTTPSへリダイレクトする設定をしておくと良い。さらに、Webブラウザから送信するリクエストをHTTPSに強制できるHSTS（HTTP Strict Transport Security）を利用することも薦めた。