Web 開発再入門

# Web 開発再入門

fmockup

## はじめに

2000年から 8年間ほど、仕事で Web 開発（C++ の CGI、Perl の CGI、Java、PHP）をしていました。その時は自分でソースコードも作成していました。
その後も Web 開発・運用に関わってきたものの、自分でソースコードを作成することはありませんでした。
今回（2023年10月から）、最新の Web 開発技術を理解（特に、シングル・ページ・アプリケーション技術を習得）すべく、久しぶりに Web 開発（ソースコードの作成）を行ってみました。

開発する際に多いに参考にさせていただいた Qiita に、その開発の記録を書き留めておこうと考えました。

また、GitHub にソースコードを置きます（って、どなたにソースコードを見ていただけるのかは分かりませんが...）。
ただし、ソースコードは完璧ではなく、手抜きをしているところが多々あります。技術を速習することが目的でしたので...。

CGI：Common Gateway Interface

## Web システム名称

**fmockup (Mock-up for Business System Demonstration and Development Templates)**
業務システムのデモンストレーションおよび開発テンプレートとしてのモックアップ

## この Web システムの想定

もし自分でイチから小さな業務システムを開発することになったときに、素早く複数の業務画面を開発できるように開発できるようひな形のソース・コードを作成します。って、そんな機会があるのかな？
簡単なアカウント管理および簡単な RBAC も実装します。ただし、もし大きい業務システムを開発するのであれば、IDM や IGA などを導入するべきです。

RBAC：Role-Based Access Control
IDM：IDentity Management
IGA：IDentity  Governance and Administration

## 画面ショット

**[ログイン画面]**

![Java-fmockup_01-login-ja.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/084e2244-5778-e78f-f906-db083c466606.jpeg)

**[ログイン画面（英語版）]**

![Java-fmockup_01-login-en.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/10c75b04-7135-cb50-5666-e880ce8cd5f1.jpeg)

**[ログイン画面（中国語簡体字版）]**

![Java-fmockup_01-login-cn.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/2e08c8a9-2de9-f336-f550-8aeac3678902.jpeg)

**[パスワード変更画面]（初回ログインまたは 1カ月毎に強制的にパスワードを変更）**

![Java-fmockup_02-changePassword.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/35821c25-c40e-35c5-19bc-97fc09896d17.jpeg)

**[ホーム画面]**

![Java-fmockup_03-home.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/6578e7e8-b357-226c-c846-7a0c4bc59af4.jpeg)

**[パスワード変更画面]**

![Java-fmockup_04-password.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/1b3172db-3a64-baae-d918-02159b0f24a1.jpeg)

**[アバウト画面]**

![Java-fmockup_05-about.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/795e16f8-aedd-7a04-5ccf-ebfddd0a6730.jpeg)

**[ＸＸＸＸ業務画面]**

![Java-fmockup_06-xxxxList.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/1060437b-58d0-bda8-f516-4e10e64c5681.jpeg)

**[ＸＸＸＸ業務画面 - レコード追加]**

![Java-fmockup_07-addXxxx.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/35b0a45b-73a8-2cca-c159-485f9b221fac.jpeg)

**[ＸＸＸＸ業務画面 - レコード変更]**

![Java-fmockup_08-modifyXxxx.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/5eff65cb-f37b-f19c-1680-f99069ae545e.jpeg)

**[ＸＸＸＸ業務画面 - レコード削除]**

![Java-fmockup_09-dropXxxx.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/f0756e6a-3864-10b1-d3b3-c0d70e03314b.jpeg)

**[ユーザー管理画面]**

![Java-fmockup_10-userList.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/8ee6ca27-d517-5084-6f23-95f73016c555.jpeg)

**[ユーザー管理画面 - ユーザー追加]**

![Java-fmockup_11-addUser.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/152131ba-37e9-9648-e040-3e54524aa2a6.jpeg)

**[ユーザー管理画面 - ユーザー変更]**

![Java-fmockup_12-modifyUser.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/b2f9e7e8-6dc1-f469-d482-6301674bf3dd.jpeg)

**[ユーザー管理画面 - ユーザー削除]**

![Java-fmockup_13-dropUser.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529613/46667798-a54e-f44c-b01d-e1843835abc4.jpeg)

## 基本的な作り

今回は、一つの Web サーバー（Tomcat）で HTML アクセスと Web API アクセスを動作させるものとする。
ブラウザーの [URL] テキストボックス、[戻る] ボタン、[進む] ボタン、[最新] ボタンが使用されても正しく動作するようにするために、マルチ・ページ・アプリケーションとシングル・ページ・アプリケーションのそれぞれの良いところを取り入れたハイブリッドなアプリケーションとする。
そのために、リスト表示（Read）は、マルチ・ページ・アプリケーションとし、追加（Create）・更新（Update）・削除（Delete）は、シングル・ページ・アプリケーションとする。
英日中に対応する。

## アプリケーション・セキュリティの確保

Web としての基本的なアプリケーション・セキュリティを確保する。

* 画面入力値は必ずチェックする。・・・ XSS 対策
* SQL 文の可変値に必ず動的パラメター（? 記号）を使用する。・・・ XSS 対策
* 今回、コマンド実行なし。・・・　コマンド・インジェクションなし
* 今回、ファイル操作なし。・・・　ファイル・パス・トラバースなし
* 今回、自作部分でのリクエストヘッダー読込みなし ・・・ XSS なしとみなす
* 今回、自作部分でのレスポンスヘッダー書出しなし ・・・ XSS なしとみなす
* 今回、サーバー側で HTML を生成しない ・・・ XSS なしとみなす
* アカウントの操作（ログイン、ログアウト、アカウント一覧・作成・変更・削除）のログをとる。
* パスワードは、AES で暗号化する。
* 初期パスワード変更機能を設ける。
* パスワード入力ミスが 6回あったときにアカウントをロックする機能を設ける。
* 1カ月に 1回、パスワード変更をさせる機能を設ける。
* リスト表示時にトークンを取得。追加・更新・削除にトークンで更新をかける。・・・ CSRF 対策
* レスポンス・ヘッダーに有名なセキュリティに関する設定を施す。・・・ ブラウザー挙動悪用対策

    ```:レスポンス・ヘッダー
    Cache-Control: private, no-store, no-cache, max-age=0, must-revalidate
    Expires: 0
    Set-Cookie: ...; Secure; HttpOnly;
    Pragma: no-cache
    Strict-Transport-Security: max-age=31536000; includeSubDomains
    X-Content-Type-Options: nosniff
    X-Frame-Options: SAMEORIGIN
    X-XSS-Protection: 1; mode=block
    ```

## 使用技術

* Eclipse（Preiades 2023-06）
* Java SE 17
* Spring Boot 3.1
* Node.js
* Vue3 （Vite）、Vuetify3、axios
* Tomcat 10
* MyBatis
* Lombok
* MySQL 8.0
* Burp Suite
* Windows 11

## 掲載

ボトムアップアプローチで、インストール、サーバー・サイドの開発、クライアント・サイドの開発、テスト、リリースの順に掲載していきます。

[Web 開発再入門 #1 ― フォルダー構成](https://qiita.com/tengbu-haoshou/items/b6c2a94ddfd39b3c92f8)
[Web 開発再入門 #2 ― MySQL インストール](https://qiita.com/tengbu-haoshou/items/ea8f2dd347b6704ef409)
[Web 開発再入門 #3 ― Eclipse（Preiades）インストール](https://qiita.com/tengbu-haoshou/items/51588b4e71cf00d1293b)
[Web 開発再入門 #4 ― Node.js インストール](https://qiita.com/tengbu-haoshou/items/b2667e04c12a539153bd)
[Web 開発再入門 #5 ― Burp Suite インストール](https://qiita.com/tengbu-haoshou/items/fd598a34e59a0979bdb0)
[Web 開発再入門 #6 ― JDK インストール](https://qiita.com/tengbu-haoshou/items/70fe2d35d97eb6273876)
[Web 開発再入門 #7 ― Windows サービス化プログラムインストール](https://qiita.com/tengbu-haoshou/items/c174715ea9154a1f34dc)
[Web 開発再入門 #8 ― Java プロジェクト作成](https://qiita.com/tengbu-haoshou/items/926446c125f1b6c6e6ad)
[Web 開発再入門 #9 ― DDL 文、DML 文（初期データ投入）](https://qiita.com/tengbu-haoshou/items/0c74fd80bf28daa6a5d6)
[Web 開発再入門 #10 ― コントローラー処理（Web API もどき）](https://qiita.com/tengbu-haoshou/items/aaf859d4aeb3c7dcf679)
[Web 開発再入門 #11 ― モデル処理](https://qiita.com/tengbu-haoshou/items/69913e099180f46358a8)
[Web 開発再入門 #12 ― MyBatis による SQL アクセス処理](https://qiita.com/tengbu-haoshou/items/615107896821f1c1d0a1)
[Web 開発再入門 #13 ― 設定ファイル読込み処理](https://qiita.com/tengbu-haoshou/items/fbd01174b1fbfffb2153)
[Web 開発再入門 #14 ― マルチロケール処理](https://qiita.com/tengbu-haoshou/items/e49d70d8e30d5d121765)
[Web 開発再入門 #15 ― ログ出力処理](https://qiita.com/tengbu-haoshou/items/93b98e19fe107c5f09b1)
[Web 開発再入門 #16 ― セッション処理](https://qiita.com/tengbu-haoshou/items/0b441275c4fcca9a4b55)
[Web 開発再入門 #17 ― セキュリティ対策（CSRF 対策処理）](https://qiita.com/tengbu-haoshou/items/08a35f46eb423facaa53)
[Web 開発再入門 #18 ― セキュリティ対策（レスポンス・ヘッダー処理）](https://qiita.com/tengbu-haoshou/items/8062c0c43c4cef1ad475)
[Web 開発再入門 #19 ― セキュリティ対策（Not Found Page 処理）](https://qiita.com/tengbu-haoshou/items/8a9c4590ea99e18b2eda)
[Web 開発再入門 #20 ― Vue.js、Vuetify、axios](https://qiita.com/tengbu-haoshou/items/07a591b5e1e3210ce769)
[Web 開発再入門 #21 ― テスト（Eclipse 使用）](https://qiita.com/tengbu-haoshou/items/740001c0816f9997c472)
[Web 開発再入門 #22 ― テスト（Burp Suite 使用）](https://qiita.com/tengbu-haoshou/items/9d903f0493c814d64489)
[Web 開発再入門 #23 ― Windows サービス化](https://qiita.com/tengbu-haoshou/items/a6e4c2410bf7ab8ea852)

## 説明で使用するソースコードのライセンス

MIT License

Copyright (c) 2023-2024 Hirotoshi FUJIBE

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

## ソースコードの置き場所

https://github.com/tengbu-haoshou/Java_prod-fmockup