Web 開発再入門

Last updated at 2024-07-20Posted at 2023-12-09

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

画面ショット

[ログイン画面]

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

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

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

[ホーム画面]

[パスワード変更画面]

[アバウト画面]

[ＸＸＸＸ業務画面]

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

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

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

[ユーザー管理画面]

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

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

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

基本的な作り

今回は、一つの 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

掲載

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

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

MIT License

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.

ソースコードの置き場所

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up