ネットワークシステム 2022年度後期(1年)

今日、やったこと フォームの練習 今日のホワイトボード フォームの練習問題１ <form>タグと<input>タグ、<select>タグ等を使ったWebページを作成。 正解例をあげておきます。  <div>タグ 多くのタグは改行されません。 図　多くのタグは改行ナシ <div>タグの前後は改行されます。 図　<div>の前で改行、</div>の後で改行 次回は 2月22日（水）1コマ目にフォームの評価用課題をやってもらいます。

今日、やったこと 枠線・余白の練習問題 今日の練習問題 「ペンギン」の正解例です。 演習１ 演習２ 演習３ 演習４ 演習５ 演習６ 演習７ 演習８ じかいは テストをします。 

今日、やったこと 枠線・余白 今日のホワイトボード 枠線と余白 HTMLの多くのタグには枠線と余白の設定ができます。 余白には 枠線の内側（設定項目名：padding) 枠線の外側（設定項目名：margin） があります。 図　枠線・余白 練習問題１（マンボウ） 正解例をあげておきます。 style.css index.html linkタグでstyle.cssを読み込んでください。  次回は 練習問題の続き（ペンギン）をやってもらいます。

今日、やったこと デザイン設定を別ファイル（style.css）に 今日のホワイトボード タグのID、クラス タグにはID、クラスを指定することができます。 IDは重複NG、クラスは重複OKです。 図　タグにID、クラスを指定する デザイン設定 いままではタグを対象にデザイン設定をしていましたが、デザインは タグ ID クラス  を対象に設定できます。 図　セレクタの違い セレクタは対象がタグ、クラス、IDの場合にそれぞれ指定方法が異なります。 デザインを別ファイル(style.css)に 今まではHTMLファイルに表示内容とデザイン設定をしていました。 １つのWebサイトには複数のHTMLファイルがあります。これらのデザインを各ファイルで指定すると、 同じ設定を複数ファイルで指定する必要がある デザイン変更時の変更作業が大変 になります。 そこで、デザインはHTMLファイルとは別ファイルで設定し、HTMLファイルはデザイン設定ファイルを読み込めば上記の問題点も解消されます。 図　HTMLファイルとデザイン設定ファイル(style.css)を分離 練習５ style.cssファイルを作成する練習問題をやりました。正解例をあげておきます。 style.css 練習６ style.cssファイルを作成する練習問題をやりました。正解例をあげておきます。 style.css じかいは 余白、枠線をやります。

今日、やったこと HTTPヘッダ [練習問題]HTTPパケット の解析 今日のホワイトボード HTTPヘッダ DNSヘッダと同じように、可変長の文字列データをASCIIで数値化。データとデータの区切りにはCR(0x0d)、LF(0x0a)の2バイトが挿入される。 図　HTTPヘッダ 文字列データはリクエストラインにはコマンド、ヘッダフィールドには目的別の項目がHTTPで定められている。 Connection:Keep-alive Connectionはヘッダフィールドの項目の１つで、リクエスト毎にコネクション確立をするか(Connection:close)、レスポンスを返してもコネクションを切断せず、再利用するか(Connection:Keep-alive)を指定する。 図　クライアントとサーバーのコネクション HTTP/1.1では”Keep-alive"がデフォルト。 HTTPのコマンド リクエストラインには 図　GETコマンドでサーバーにリクエスト クライアントからサーバーへのコマンド（メソッド）がある。 図　GET、POSTコマンド コマンドはGET以外にも、目的別にPOST、PUT、DELETE、HEAD等がHTTPで定められている。 とりあえず、GETとPOSTはおさえておいてください。 次回は HTTPの解析テストをします。

今日、やったこと [確認テスト]パケット解析2 今日の確認テスト 今日のテストのパケット解析結果です。 イーサネットヘッダ 項目 データ 宛先MACアドレス 40 : b0 : 76 : a2 : 69 : ff 送信元MACアドレス 00 : 1a : eb : 94 : 29 : 3c タイプ 0x0800(上位プロトコルはIP) 以前と同じでタイプが0x0800よりイーサネットヘッダ以降はIPヘッダだとわかります。 IPヘッダ 項目 データ バージョン 0100(このIPヘッダはバージョン4のフォーマット) ヘッダ長 0101(このIPヘッダは20バイト) パケット長 0x0130(IPヘッダ以降の長さは304バイト) プロトコル番号 0x11(上位プロトコルはUDP) 送信元IPアドレス 8.8.8.8 宛先IPアドレス 192.168.20.15 プロトコル番号が0x11(10進数なら17)よりIPヘッダ以降はUDPヘッダだとわかります。 UDPヘッダ 項目 データ 送信元ポート番号 0x0035(53 DNSのウェルノウンポート) 宛先ポート番号 0x0403(1027) 長さ 0x011c(UDPヘッダ以降の長さは284バイト) 送信元ポート番号が0x0035(10進数なら53)よりUDPヘッダ以降はDNSヘッダだとわかります。 DNSヘッダ(ヘッダセクション) 項目 データ トランザクションID 0x0002 QDCount 1 ANCount 1 ...

今日、やったこと パケット解析確認テスト１の解説 パケット解析(HTTP) 今日のホワイトボード パケット解析確認テスト１の解説 前回(11月24日)のおたすけサイト をご覧ください。 パケット解析 順に解析していきます。 イーサネットヘッダ タイプが0x0800より、イーサネットヘッダ以降はIPヘッダであることがわかります。 IPヘッダ 図　IPヘッダ解析 図　IPヘッダ解析結果 プロトコル番号が0x06より、IPヘッダ以降にはTCPヘッダがあることがわかります。 TCPヘッダ 初登場のTCPヘッダですが、フォーマットに従って解析すればややこしいことはないとおもいます。 図　TCPヘッダ解析 図　TCPヘッダ解析結果 UDPヘッダと同じように送信元・宛先のポート番号で上位プロトコルがわかります。 このパケットは宛先ポート番号の80からTCPヘッダ以降にはHTTPヘッダが続くことがわかります。 HTTPヘッダ このパケットはTCPの宛先ポート番号が80であることから、クライアント->サーバーのリクエストのパケットです。 HTTPヘッダはビット単位でフォーマットが決まっているわけではなく、区切りのCR(0x0d)、LF(0x0a)で区切った文字列データの連続です。 ということで、1バイトずつasciiの文字コード表をもとに文字に変換していきます。 まずは先頭から。ここはリクエストラインになります。 図　HTTPヘッダ　リクエストライン部 リクエストラインは 　 GET / HTTP/1.1 です。 続いて、リクエストヘッダフィールドです。 図　HTTPヘッダ　リクエストヘッダフィールド部　① データは 　 Host:　172.16.8.10 です。 リクエストヘッダフィールドが続きます。 図　HTTPヘッダ　リクエストヘッダフィールド部　② データは 　 Connection:　keep-alive です。 これで終了です。 リクエストヘッダフィールドは 　項目名：値 のフォーマットです。 このパケットには項目名HostとConnectionがあります。 Hostはリクエストするホスト名の指定です。 Connectionは接続方法の指定です。keep-aliveはTCPのコネクションを維持せよという指定です。 図　HTTPヘッダ　まとめ 次回は パケット解析確認...

今日、やったこと [確認テスト]パケット解析確認テスト1 今日のテスト 解析してもらったパケットはこんなパケットでした。 まず、パケットの先頭はイーサネットヘッダです。イーサネットヘッダのヘッダフォーマットに従って解析していきます。 イーサネットヘッダ 項目 データ 宛先MACアドレス 00 : 1a : eb : 94 : 29 : 3c 送信元MACアドレス 40 : b0 : 76 : a2 : 69 : ff タイプ 0x0800(上位プロトコルはIP) イーサネットヘッダのタイプが0x0800になっていることから、イーサネットヘッダの後にはIPヘッダが続くことがわかります。 ということで、IPヘッダのヘッダフォーマットに従って解析していきます。 IPヘッダ 項目 データ バージョン 0100(このIPヘッダはバージョン4のフォーマット) ヘッダ長 0101(このIPヘッダは20バイト(5x4=20)) パケット長 0x0043(IPヘッダ以降の長さは67バイト) プロトコル番号 0100(このIPヘッダはバージョン4のフォーマット) 送信元IPアドレス 192.168.10.11 宛先IPアドレス 8.8.8.8 IPヘッダのプロトコル番号が0x11(10進数では17)になっていることから、IPヘッダの後にはUDPヘッダがつづくことがわかります。 ということで、UDPヘッダのヘッダフォーマットに従って解析していきます。 UDPヘッダ 項目 データ 送信元ポート番号 0x04020(1026) 宛先ポート番号 0x0035(53 DNSのウェルノウンポート) 長さ 0x...

今日、やったこと [パケット解析練習]パケット2の解説 今日のホワイトボード 前回、途中で終わったパケット２の解説です。 前回はDNSヘッダのヘッダセクションとQuestionセクション、１つ目のAnswerセクションの途中まで解説をしました。 ヘッダセクション ヘッダセクション以降の各セクションの数です。 Questionセクション数 1 Answerセクション数 2 Authorityセクション数 0 Additionalセクション数 0 Questionセクション ドメイン名 www.yahoo.co.jp タイプ Aレコード Answerセクション① 前回はここまで解析しました。 ドメイン名 www.yahoo.co.jp 圧縮あり.DNSヘッダ先頭から13バイト目にドメイン名あり タイプ DNAMEレコード CNAMEは正式名.このAnswerセクションでwww.yahoo.co.jpの正式名を回答 RDLength 16 RDataは16バイト 続きです。 RDataは最後の2バイトが圧縮（別の場所に記述済み）されています。 図　Answerセクション　1つ目 図　Answerセクション①　解析結果 RDataの最後の2バイトが圧縮されています。 本来ここに書くべき値はDNSヘッダの先頭から26バイト目に書かれていることになります。 ということで、DNSヘッダ先頭から26バイト目はQuestionセクションのドメイン名になります。 図　DNSヘッダ先頭か...

今日、やったこと パケット解析練習  今日のホワイトボード 2種類のパケット解析をやってもらいました。 「パケット2」のDNSヘッダのAnswerセクションが以前のパケットと異なるため、ちょっとだけ解説をしました。 DNSヘッダ（ヘッダセクション） 図　DNSヘッダ（ヘッダセクション） ヘッダセクション以降は以下の各セクションが続くことになります。 セクション セクション数 Questionセクション 1個 Answerセクション 2個 Authorityセクション 0個 Additionalセクション 0個 DNSヘッダ（Questionセクション） ここは以前のパケットと同じです。 図　DNSヘッダ（Questionセクション） ちなみに問い合わせているドメイン名は　www.yahoo.co.jp です。 DNSヘッダ（Answerセクション①） Answerセクション1つ目です。 図　DNSヘッダ(Answerセクション①）前半部 タイプが　CNAME　です。CNAMEはCanonical Nameの略で正式名という意味です。 問い合わせドメイン名は別名で、正式名はこれですと回答しています。 すいません、ホワイトボードでは CNAMEを別名と書いてました。訂正をお願いします。 図　DNSヘッダ(Answerセクション①）前半部　解析結果 ...

今日、やったこと DNSパケット解析 今日のホワイトボード 前回はDNSヘッダのヘッダセクションまで解析しました。 その結果、ヘッダセクション以降には以下のセクションが続くことがわかりました。 Questionセクションx1 Answerセクションx1 Authorityセクションx4 Additionalセクションx8 今日は続きのQuestionセクション以降です。  Questionセクション Questionセクションは以前に一度解析しました。フォーマットに従って切り取っていきます。 図　DNSヘッダのQuestionセクション 図　Questionセクション解析結果 Answerセクション①ドメイン名 AnswerセクションもQuestionセクション同様、先頭はドメイン名です。 が、先頭の2ビットでドメイン名がどこに書き込まれているかが分かれます。 今回は先頭2ビットが” 11 ”なので、 圧縮あり です。 ドメイン名はAnswerセクションに書き込まれず、どこか別のところに書き込まれています。 で、どこに書き込まれているかは、続く6ビット＋8ビット（オフセット値）に書き込まれています。 図　Answerセクションのドメイン名 図　Answerセクションのドメイン名の解析結果 オフセット値は12です。DNSヘッダの先頭から12+1バイト目にドメイン名が書き込まれていることになります。 DNSヘッダの先頭から13バイト目はQuestionセクションのドメイン名です。 結局、Answerセクションに書き込むべきドメイン名はQuestionセクションのドメイン名と同じということになります。 図　DNSヘッダの先頭から13バイト目 Answerセクション②ドメイン名以降 解析すると以下のようになります。 図　Answerセクション 図　Answerセクションドメイン名以降解析結果① Answerセクション最後のRDATAは可変長です。 RDLengthにRDATAの長さが書き込まれています。 図　AnswerセクションのRDATA解析結果 このパケットは 本来なら、Answerセクション以降にAuthorityセクション、Additionalセクションが続きます。 図　Answerセクション以降 次回は DNSパケット解析の練習問題をやってもらいます。 ...

今日、やったこと [パケット解析]DNS② 今日のホワイトボード 新しいパケットの解析をしました。 イーサネットヘッダ 図　イーサネットヘッダ 図　イーサネットヘッダ解析結果 「タイプ」が0x0800より上位プロトコルはIP。 IPヘッダ 図　IPヘッダ 図　IPヘッダ解析結果① 図　IPヘッダ解析結果② 「プロトコル番号」が0x11より上位プロトコルはUDP。 UDPヘッダ 図　UDPヘッダ 図　UDPヘッダ解析結果 送信元ポート番号が53より、上位プロトコルはDNS。 DNSヘッダ（ヘッダセクション） 図　DNSヘッダ　ヘッダセクション 図　DNSヘッダ　ヘッダセクション解析結果 次回は DNSヘッダのQuestionセクションの解析からです。  

今日、やったこと DNS問い合わせパケット解析 今日のホワイトボード 前回からDNS問い合わせのパケットを解析しています。 前回はイーサネットヘッダとIPヘッダの途中まで解析しました。 今日、その続きです。 IPヘッダの続き 図　パケット解析（IPヘッダ） 前回はIPヘッダのTTLまで解析、解説をしました。 今日はプロトコル番号からです。 図　IPヘッダ解析結果 プロトコル番号より、IPヘッダのあとにはUDPヘッダが続くことがわかります。 また、ヘッダ長が20バイトより、宛先IPアドレスまでがIPヘッダで、オプションはなしです。 図　IPヘッダは宛先IPアドレスまで、そのあとにはUDPヘッダ UDPヘッダ UDPヘッダはいたってシンプルです。 ポイントはポート番号で、これで上位プロトコルがわかります。 図　パケット解析（UDPヘッダ） 図　UDPヘッダ解析結果 宛先ポート番号が53になっています。UDPの53番ポートはDNSのウェルノウンポートです。よって、UDPヘッダのあとにはDNSヘッダが続くことになります。 DNSヘッダ DNSヘッダはいくつかのセクションに分かれます。 先頭はヘッダセクションです。 ヘッダセクション 図　パケット解析（DNSヘッダのヘッダセクション） 図　DNSヘッダのヘッダセクション解析結果 ヘッダセクションより、問い合わせのパケットで、このあとにQuestionセクションが１つ続くことがわかります。 Questionセクション Questionセクションには問い合わせをしたいドメイン名と問い合わせのタイプが書き込まれています。 図　パケット解析（DNSヘッダのQuestionセクション） 図　DNSヘッダQuestionセクション解析結果 ドメイン名には可変長の「ラベル」がルートラベル（0x00）まで連続しています。 「ラベル」は1バイトの「ラベル長」と、ラベル長分の「ラベルデータ」で構成されます。 「ラベルデータ」は問い合わせしたいドメイン名を1文字づつASCIIで数値化したデータで、1文字1バイトに変換されます。 次回は 引き続きパケット解析シリーズを行います。