伝言システム開発 課題研究 発表 

• 伝言システム • 使い方 • 伝言システム詳細 • ログイン認証 

伝言システム • 新宿山吹高校にある伝言システム 問題点: エントランスホールでしか伝言が確認出来ない 

伝言システム • エントランスホールでしか伝言が確認出来ないことによる弊害 ・伝言のリアルタイム性が無い ・学校に行かないと伝言が確認できない ・2台しか置いてないため列が出来やすい 

新宿山吹高校 伝言システム on Web 

新宿山吹高校 伝言システム on Web • メリット ・スマホやPCからすぐに確認できる ・24時間いつでも見返すことが出来る ・伝言確認による列を解消 

• 伝言システム • 使い方 • 伝言システム詳細 • ログイン認証 

使い方 • 閲覧者画面(生徒) 

使い方 • 送信者画面(先生) 

使い方 • 管理者画面 

• 伝言システム • 使い方 • 伝言システム詳細 • ログイン認証 

伝言システム詳細 •使用技術など 使用言語: HTML, CSS, PHP, JavaScript ライブラリ: Bootstrap, SQLite ツール: XAMPP, Apache, Git, VS Code 

伝言システム詳細 •伝言データ管理 id: 伝言に割り振られた番号 isNew: 伝言が読まれたかどうか messageFrom: 伝言の差出人 messageTo: 伝言の宛先 sender: 差出人の名前 subject: 教科 date: 伝言の日付 content: 伝言の内容 

伝言システム詳細 • セキュリティ対策① - XSS対策 →伝言にJavaScriptコードを書いて送信することでウェブサイトが改ざんで きでしまう脆弱性 

伝言システム詳細 • セキュリティ対策① - XSS対策 対策方法: 「<」は「<」に、「>」は「>」に変換する 

伝言システム詳細 • セキュリティ対策② - CSRF対策 →別のサイトから伝言システムに保存されたログイン情報を使用して、伝言 が送信できてしまう脆弱性 

伝言システム詳細 • セキュリティ対策② - CSRF対策 対策方法: ワンタイムトークンと呼ばれる一時的な文字列を発行し、伝言送信 時にサーバー側で再確認する 

• 伝言システム • 使い方 • 伝言システム詳細 • ログイン認証 

ログイン認証 • 認証方法 セッション認証(Cookieを使う方法) → メリット: 1度ログインしたら一定期間ログインデータが保持される 

ログイン認証 •ユーザーデータ管理 username: ログイン時に使用するID pass: ログイン時に使用するパスワード name: 伝言の差出人に記載する名前 subject: 教科 authority: ユーザー権限 

ログイン認証 • セキュリティ対策 – パスワード管理 →パスワードを「SHA-256」でハッシュ化してデータベースに保存 

将来的に追加出来たら良い項目など • メッセージの一斉送信機能 • 履修科目の登録機能 • 伝言の通知機能 etc.. 

参考 • PHPによる簡単なログイン認証いろいろ - Qiita https://qiita.com/mpyw/items/bb8305ba196f5105be15 • SQLite入門 - DBOnline https://www.dbonline.jp/sqlite/ • jQueryでテキストボックスの変更を監視/検知する - Qiita https://qiita.com/maruyam-a/items/cf0168f91d934b449a07 • サーバーサイドプログラミング入門 28.脆弱性 - N予備校 https://www.nnn.ed.nico/courses/668/chapters/9516 • リロードによる多重投稿を防止する - GRAYCODE https://gray-code.com/php/make-the-board-vol23/