【Carstay Tech Blog Vol.1】フロントエンドエンジニアも知っておきたいセキュリティ対策 ー XSS編 ー

今回から新コーナー【Carstay Tech Blog】をはじめます！

Carstayで扱っているプログラミング言語・フレームワークや、どのような点を意識して開発を進めているか、最新技術についての情報共有等、エンジニアメンバーのアウトプットも兼ねて、このnoteでご紹介していきます。

第1回は、CarstayのTech Leadのタンがnoteを書いています✍️

今回の記事では、先日開催した「第1回 JavaScript LT会」にて、LT発表の機会をいただいたので、そこでお話しした発表内容を共有します！

【満員御礼】JavaScript LT会 〜 React.js / Node.js歓迎 〜 (2022/02/26 20:00〜)

当日の発表資料

私の当日の発表資料は以下のスライドです。私の発表では、「フロントエンドエンジニアも知っておきたいセキュリティ対策」というタイトルで、XSS(クロスサイト・スクリプティング)の対策について、紹介しました！

詳細はこちら⬇︎

XSS(クロスサイト・スクリプティング)とは

まず初めに、XSSとは、攻撃対象のWebサイトの脆弱性を突き、攻撃者がそこに悪質なサイトへ誘導するスクリプトを仕掛けることで、サイトに訪れるユーザーの個人情報などを詐取する攻撃手法のことです。

2020年に届出されたWebサイトの脆弱性の種類別では、XSSが58%と一番多くなっています。

XSSの仕組み

XSS攻撃の一例としては、以下のような流れで行われます。

(1) 攻撃者が利用者に向けてスクリプト実行可能なコードの入ったリンクを送信（Email内のリンクなど）

(2) 利用者はリンクをクリックし脆弱性のあるWebサイトにアクセス

(3) 利用者ブラウザはWebサイトが読み込まれるが、XSSの脆弱性により悪意のあるスクリプトが実行される

(4) 悪意のあるスクリプトが利用者の個人データを攻撃者に送信する

React開発時に、注意すべきXSSの脆弱性

今回は、React開発時に注意すべきXSSの脆弱性と、その対策を紹介していきます。

1. dangerouslySetInnerHTML

dangerouslySetInnerHTMLとは、React公式のエスケープを無効化するオプションです。HTMLとして認識させたい場合などに使用することがあります。​

ただし、XSSの脆弱性対策としては、基本的にdangerouslySetInnerHTMLは使わない方が良いです。

どうしても使用したい場合は、徹底的にエスケープを行うことが必要です。エスケープするために、DOMPurifyなどのライブラリを使うことで、XSSの問題を解決することができます。

GitHub - cure53/DOMPurify: DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:

2. JSON.stringify()

JSON.stringify() は、JavaScriptオブジェクトを取得し、JSON 文字列に変換します。Server Side Rendering時に、React側で利用できるように、以下のように書く場合があります。

ただし、こちらもXSSの脆弱性の問題が起こるので、基本的には使用しない方が良いです。

どうしても使用したい場合は、徹底的にエスケープを行うことが必要です。エスケープするために、Serialize JavaScriptなどのライブラリを使うことで、XSSの問題を解決することができます。

GitHub - yahoo/serialize-javascript: Serialize JavaScript to a superset of JSON that includes regular expressions and functions.

3. Javascript: スキーム

aタグのhref属性は、先頭がjavascript:から始まる場合、それ以降の文字列をjavascriptとして実行され、XSSが生じます。

対策としては、スキームを http:// か https:// のみに制御する、もしくは以下コードのように先頭に "/" を記載してください。

const userInput1 = '/javascript: alert("Hack!!!")';

発表内容のまとめ

ここまで具体的事例などを挙げてきましたが、今回のフロントエンドエンジニアのためのセキュリティ対策のまとめとしては以下です。

・Webサイトで最も多い脆弱性はXSS

・XSSの原理を知らないと、簡単にXSSの脆弱性をつくりこんでしまうので、XSSの理解が必要

・XSS対策には、文字列をエスケープすることが重要

・ID/パスワードが漏れていなくても、Cookie情報が漏れれば、攻撃者はログインできてしまうので、PCを使わない時は必ず画面をロックしましょう！

次回のConnpassイベントはこちら！

ぜひ、ふるってご参加くださいませ⬇︎

【登壇者募集！】JavaScript LT会 Vol.2 〜 React / Node.js歓迎 〜 (2022/03/26 20:00〜)

エンジニア募集中！

Carstayでは絶賛エンジニア採用中です！私たちと一緒にVANLIFE×自動運転の未来をつくり、技術的課題を解決しているメンバーを募集しています。

ご興味を持っていただいた方は、ぜひお気軽にご応募ください！詳しくは以下のページをご覧ください＊

採用情報はこちら⬇︎

Carstay 採用情報 | Notion

Carstay株式会社 の全ての求人一覧

Carstay株式会社では、ミッションである「Stay Anywhere, Anytime.｜誰もが好きなときに、好きな場所で、好きな人と過ごせる世界をつくる」を実現するため、国内最大のキャンピングカー・車中泊スポットの予約サービスを運営しています。企業さま・自治体さま・メディアさまと是非連携させて頂きたく、また新たな仲間も募集しておりますので、下記URLより、ぜひお気軽にお問い合わせ頂けましたら幸いです：https://carstay.jp/ja/contact

2022.03.08