どうもoreoです。今回はXSSについて記載します。 1 XSS(cross site scripting)とは？ XSSとは動的にHTMLを生成するWebサイトで悪意あるスクリプトが埋め込まれたコンテンツをHTMLとしてそのまま表示した際に、スクリプトが実行される攻撃手法(または脆弱性)です。 XSSの脆弱性があると偽サイトへの誘導、フィッシング、Cookie情報漏洩などの脅威があります。 XSSには主に下記3つの攻撃手法があります。 1-1 Persistent XSS(持続型XSS) Stored XSS(格納型XSS)とも言われます。悪意あるスクリプトが格納されたWebサイトを閲覧した際に、ユーザーのブラウザ上で不正なスクリプトが実行される攻撃手法です。 例えば、掲示板のようなユーザー投稿機能があるWebサイトを考えます。攻撃者が悪意あるスクリプトを含むコメントを投稿し、そのデータ

どうもoreoです。 今回はモダンなJavaScript開発環境で役立つデザインパターンを紹介します。 この記事は、JavaScript Patterns WorkshopとPatterns.devを参考にしています。 有名な「Java言語で学ぶデザインパターン入門」などでは、古典的な23個のデザインパターンが紹介されていますが、JavaScript Patterns WorkshopではPatterns.devをベースとして、モダンなJavaScriptにおける6つのデザインパターンについて言及されています。この記事ではそれらについてまとめてみたいと思います！ ※本記事中のコードは、JavaScript Patterns WorkshopとPatterns.devから引用させていただいております。 1 Design Patternsとは？ デザインパターンとは、ソフトウェア開発で繰り返し

参考 https://developer.mozilla.org/ja/docs/Web/JavaScript/About_JavaScript https://gihyo.jp/book/2017/978-4-7741-8967-3 2 JavaScriptエンジンでの処理の流れ JavaScriptが実行されるまでの過程は、JavaScriptエンジンによって異なりますが、一般的には下記のようになります。 大きな流れとしてJavaScriptコードから、Token、AST(Abstract Syntax Tree、抽象構文木)を経て、CPUが実行可能なByte Codeにコンパイルされ、JavaScriptは実行されます。 例えは、console.log("Hello World !");というコードがByte Codeに変換されるまでのイメージ図は下記のようになります。 それでは、こ

どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht