目次 Webアプリケーションの入出力時脆弱性について ①　認証／認可 ②　入力 ③　DB（データベース）アクセス ④　シェル他 ⑤　ファイル（アクセス） ⑥　取り消しできない処理（の呼び出し） ⑦　レスポンス おまけ：メール 基本的なところを抑えるだけで防げることも多い Webアプリケーションの入出力時脆弱性について 情報セキュリティ上の欠陥によってできる、悪意ある攻撃がつけいる隙が脆弱性です。 Webアプリケーションの場合、悪意ある攻撃は外部から行われるので、攻撃ポイントは、入力と出力（処理後にネットワーク上を流れている間を含む）に集中します。 今回は「入出力時の各局面で発生しやすい脆弱性と気を付けるべきポイント」に絞って以下の図にそって整理します。 図の①から⑦は、Webアプリの入力／出力（外部アクセス含む）における各局面を示しています。 以後、各局面ごとに発生しやすい脆弱性と注意点を

こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな

目次 はじめに Nuxt.jsを整理する方針 Nuxt.js基本要素－拡張子とフォルダの役割 ソースファイルの拡張子は「.vue」 フォルダ構成と各フォルダの役割 サンプルでやることと確認したいポイント 全Vueファイルの共通レイアウトの設定 内部リンクの書き方と画面遷移（ルーティング）などをサンプルで確認 header要素に出力する内容の書き方 assetsフォルダに置いた静的画像ファイルの参照 内部リンクによる画面遷移（NLinkタグ）の書き方 WebApiからデータを取得するなどをサンプルで確認 ソース内のブロック分けと役割 asyncData()内でaxiosを使ってWebAPIからデータを取得・表示 staticフォルダ内の静的データの参照 ルートのページに戻る内部遷移 実行イメージ テスト用：Originのチェックを行わないようにChromeを起動する方法 開発環境：Visua