調べたこと 第十一回
入力フォーム
例 <form method ="GET" action="kurumi.php">
お名前<input type ="text" name="chiharuname">
とあると、name のところで入力された値を受け取ることができる。
で、kurumi.phpのほうで、
<?php "亀井" .$_GET[chiharuname]. "さん"; ?>
とすると、例えば「ちはる」と入力していたら、亀井ちはるさん と表示される。
getメソッドなので、urlにも、?username=%8ER.......というふうに入力したデータが後ろに付いている表示になる。
入力値に < こんなのとか $こんなのとか を入れていいよというものにするには
HTMLエスケープをしたらいい。
<こんなのは→ &lt; という表記になる。
これをPHPでするときには、
$_GETの前に、htmlspecialchars を入力したらいい。
javascript のプログラムとして、<script>で囲まれた部分を実行できる機能があるから、もし、このHTMLエスケープをしない場合、入力フォームに<script>を入れてしまうと、ブラウザ側で実行できてしまうので、そのサイトでやり取りしている情報を盗み出すことが頭のいい人には簡単にできてしまう。
例え
- cookie情報を利用した不正アクセス(セッションハイジャック)
- HTMLタグを使った入力フォームによる情報収集
- 偽サイトを使ったフィッシング詐欺
などなど、 XSSというらしい。
エスケープしておけば、このscriptが”<script$gt;”という風になって、実行されないので安心。
↓
製作者がしないといけないこと。
- クロスサイトスクリプティングに対応したWEBアプリケーションを構築する
- WEBサーバやアプリケーションを最新の状態に保つ
- クロスサイトスクリプティングに対するフィルタ機能を持つWAFの導入
(WAF は、ウェブクライアントとウェブサーバーの間に展開されるアプリケーションセキュリティ対策であり、一般的な形式のウェブトラフィックについて、すべてのリクエストとレスポンスを詳しく検査します。異常な悪意のあるトラフィックを特定して隔離またはブロックすることで、WAF は脅威がサーバーに到達するのを効果的に防ぎます。)
POSTについて
GETと似ているけど、違う点が
1,URLの末尾にデータがつかない
2, リロードしたら再送信するか確認メッセージが表示される。
調べたこと 第十回
まず、Ajaxには、1,非同期に通信 2,XML形式で通信 という意味がある。
非同期とは、送信した先が受け取ったかどうかを待たずに次の処理に移ること。
で、XMLは、データの形式のことで、HTMLのように<>ので囲ってデータを表すもの。この形式だと要素を解析するのに時間がかかる。
そこで、代わりに使われているのが、Json という形式。JsonはJavascriptの形式で送るので、Javascriptは直接データに変換できるという強みを持っているので、XMLと違って要素を解析する手間などがないという利点がある。
XAMPPについて
XAMPPの初期設定では、ユーザーが接続した時に見える場所が「C:¥xampp¥htdocsディレクトリ」に設定されている。
/でファイル名が指定されずにアクセスされたら、その中のファイルがすべて表示されるようになっている。
プログラミングで使う言葉(わかりやすかったので)
1,入力データの読み取り
$_GET 、 $_POST で、入力されたデータを取得できる。
2, 計算などをするために値を一時的に保存したい場合には、変数を用いる。
3, まとまった処理をする機能のことを関数という。
4, PHPではIf分を使って、条件が成り立つか成り立たないかで分岐して、それに応じて結果を出す。
5, PHPではwhile で条件が成り立つまで繰り返しその処理をするようにできる。
6, データを複数ひとまとめにして扱い時は、配列やハッシュという仕組みを使う。
ハッシュとはー> 例えば、data = {a:”みかん”, b:”ぶどう”, c:”りんご”}
な感じのまとまり。
普通の配列と違い、中の要素に名前が(aのような)ついている。それをkeyとして、呼び出す時に用いて、配列の中の要素を取り出す。
調べたこと 第九回
イベントドリブン
JavaScriptのように「〇〇した時に〇〇する」という形式で実行されるプログラムを「イベントドリブン型」という。
例 <input type="button" onclick="msgchange();">
のonclickが相当する
JavaScriptの書き方
例 function msgchange(){
document.getElementById("msg").innerHTML ="ok";
}
の場合、 HTMLの中で、「id属性の値がmsgである要素を取得する」という意味になる。
HTMLには <div id ="msg">Hello</div> というような要素がある。
.innerHTML ="ok"; ー> タグに囲まれた文字を「OK」という文字に書き換える
ということを意味する。
これらのコードによって、ボタンを押した時にHello からOKに変わるという変化を加えることができる。
この、特定の要素だけを書き換えることができるのが、クライアントサイドのプログラミングの強み。
JavaScriptでサーバサイドのプログラミングを呼び出すこともできる。
それがAjax。
HTTP通信できる機能を使ってサーバとやり取りする。
HTTP通信とはブラウザとWebサーバー間で行なう通信のことを指します。 ブラウザからWebサーバーに向けてTCPというプロトコルを使って接続を行い、接続が成功したらブラウザは「こういう情報くださいな☆」というリクエストを発行します。
グーグルマップがスクロールと同時に、地図を読み込んで動くのもこのAjax機能を使っているから。(ユーザーがマウスでドラッグ操作すると、Ajaxの方で移動後の範囲の画像データをHTMLにはめ込んでユーザーに渡している)
データベースについて
データベースを使うとき。。
申し込みフォームに記入されたデータを担当者が閲覧できるように、データを保存しておく、 ショッピングサイトで注文されたデータを保存する、 商品情報をあらかじめ登録しておかないとユーザーが選べない、 などなどデータを保存する時に用いる。
種類 ー> 「MySQL」 「PostgreSQL」 「OracleDatabase」 ETC
WEBプログラムを動かす
1,自分のパソコンにWebサーバを構築するには 「XAMPP」や「MAMP」をインストールする。
2,クライアントがアクセスしてきたときに、どのディレクトリの内容を見せるか をあらかじめ設定しておかないといけない。そのディレクトリのことドキュメントルートという。
(自分のサーバに接続するには http://localhost/ というURLを指定する。)
XAMPPに入ってるもの、、
ApacheのWebサーバ PHPの実行環境 Perlの実行環境 Javaの実行環境 データベースサーバ FTPサーバソフト メールサーバソフト
FTPサーバ ファイル転送プロトコル。 ネットワーク上でファイルの転送を行うため
の通信プロトコルの1つ)
開発者の人は、 自分のパソコンで開発と簡単な動作テストをして、開発サーバにコピーする。
調べたこと 第八回
プログラミング言語には、インタプリタ形式とコンパイラ形式の2つの種類がある。
インタプリタ ー> プログラマが記述したプログラムを解釈しながら実行
テキストエディタさえあれば書けて、修正しやすいという利点。
速度がおそいので、文法ミスがあるか分かるのも遅い。
コンパイラ ー> バイナリコード(機械にしかわからないコード)に変換したプログラムで、処理速度が早くなる。(コンパイルするということをビルドするという)
プログラムを隠しておける。文法ミスがあれば、コンパイルする時点で発見できる。
コンパイラを用意しないといけない。(Javaなどが含まれる。)
Webサーバでどのようにプログラムが実行されているか?
まず、Webサーバソフトがポート80番や443番などで待っている。
そこに、クライアントがコマンドを送って来たら、その送られてきた内容を返すという仕組みになっている。
サーバ上のプログラムを実行するときに使う。
#!/ usr /bin/○○○ -> この丸のところにプログラムの名前を入れるとどのプログラム
echo でも実行できる。
echo
(ちゃんと画像データなども返すことができる)
大きな2つの問題がある
1,#!プログラム名 とするだけで、実行できることからセキュリティ的に弱い
2,アクセスしているユーザーの数だけCGIが作られるので、大きなメモリが必要と
なり、実行環境の読み込みにも時間がかかることからパフォーマンスが良くない
↓ そこで
モジュール
アパッチなどのWebサーバにあらかじめ、それぞれのプログラムの環境を組んでおくしくみのこと。
すでにWebサーバと動いていて要求に応じて読み込む必要がなく、ユーザーの数だけ実行されるわけではないので、CGIの問題をカバーしている。
入力フォームの仕組み
HTMLでおなじみの<form>~</form>で囲われてるとこ。
inputタグの name='' はサーバ側でその名前として取得できる。
formタグのmethod にはGET or POST を指定できる。
GET ー> search.php?username=入力された値&email=入力された値
↑
クエリ文字列(querystring)
⦿キャッシュされる。
⦿大きなデータを送信できない。
⦿検索エンジンの結果などに使われる。
POST ー> search.php?username の後、入力されたデータを要求に続けて送信する。
⦿キャッシュが残らない。
⦿大きなデータを送信できる。
⦿申し込みページや購入ページなどに使われる。
これら2つの方法でデータが送信されるときには、URLエンコードという特別な変換がされる。
?や& が入力フォームのフィールドで区切りとして使われるので、混同を防ぐために、最初から漢字や記号は%16進数で表される。
調べたこと 第七回
プログラムはブラウザで実行される”クライアントサイド” と、
サーバで実行される”サーバサイド” に分けられる。
クライアントサイドのプログラム
このブログラムは、htmlやcssやJavaScriptなどが含まれる。
クライアント(入力者)がボタンをクリックしたり、ページを読み込んだり、何かをしたときのタイミングで実行できる。(AJAXという仕組みを使って、サーバサイドのプログラムと通信することができる。)
※AJAXとはJavaScriptがWebサーバから情報をもらえて、すべてを新しい内容に書き換えなくても済む方法のこと。
サーバサイドのプログラミング
もがな、PHPやJAVAなどが含まれる。このプログラムは、クライアントからの要求があったときに実行され、実行結果が返される。
で、サーバでデータを保存するのに”データベース”が使われる。
サーバサイドのプログラミング言語
PHP・Peal・Ruby・Python・JavaScript・Java・C#・VBNet....
よく知らない言語↓
WEBアプリ開発でよく使われる。(クックパッドや食べログなど)
オンラインショッピングサイトやSNSなども
スマホアプリを作るときにも使われる、他の言語で作られるイメージがあるけど、実は
サーバーでデータを保存したり処理をしたいとなった場合は「API」と呼ばれるサーバーのプログラムを実装する必要があり、そのAPIを作るのに用いられる。
Pythonを使うと、Windows/Mac/iPadに対応したデスクトップアプリをクロスプラットフォームに開発することができます。パソコンのカメラ機能と電話機能を用いてスカイプのような会議アプリを制作したり、メモ帳を開発したりできます。
数値計算能力と連携可能なシステムの多さが挙げられます。例えば大量にあるデータベースのデータを内部計算して読みやすい行列表に計算したり、膨大なエクセルのデータを開かないで目的のデータのみ抽出して別アプリにコピーしたりする柔軟なデータ処理が可能です。
業務システム開発とは、企業の業務効率化を図る企業システムや、銀行をはじめとする金融機関の会計システムが特に有名です。企業は堅牢性や保守を重視して、確実に稼働を続けるシステムを採用したいと考えています。
スマートフォンのAndroidアプリは、ほとんどがJavaで作られている。
C#とは、マイクロソフトが開発しているプログラミング言語です。C++やJavaと同じオブジェクト指向と呼ばれるプログラミング言語で、文法はJavaに似ています
Windows向けのアプリケーションの開発に最適!
統合開発環境(IDE)の「Visual Studio」が開発を強力にサポートするため、きれいなGUIのフォームアプリケーションを簡単に作ることができます。
(GUIとは、、コンピューターの画面上に表示されるウィンドウやアイコン、ボタン、プルダウンメニューなどを使い、マウスなどのポインティングデバイスで操作できるインターフェース。)
adobe者が開発したプログラムの実行環境。
動画やアニメを作りやすいものなので、そういった分野でよく使われる。
クライアントサイドのプログラムは、ブラウザによって動かないということがあるので、クライアントサイドのプログラムを作るときは、他のユーザーのブラウザでは動かないかもしれないという点を意識しておく必要がある。
サーバサイドのプログラムは、ブラウザの影響を受けることがなく、どのクライアントでも使うことができる。
調べたこと 第六回
共通鍵暗号方式
これは、暗号と解読とで同じ鍵を使って暗号化する方式のこと。クライアント側でその鍵をランダムに作成して、サーバに送信するときだけ、公開鍵暗号式を使い、それ以降
送信した鍵を使ってやり取りしていくこと。(このほうがスピードが早い)
SSLを使う方法
1,秘密鍵を作る
2,秘密鍵には公開鍵の情報も収められているので、ここから公開鍵の情報を取り出し
CSRという認証局に証明書を発行してもらうためのデータを作る。
3,アパッチなどのWebサーバに、1の秘密鍵と証明書をインストールする。
認証局を選ぶときに必要なこと
○ 実在確認されているか(されていると信頼度が高い)
○ 認証局の公開鍵が多くのブラウザにインストールされているか
(マルチドメインー>
マルチドメインの機能があれば、1つのサーバ契約で複数のドメインを設定して
ドメインごとに異なる内容のホームページを公開・運営することができます。
ワイルドカード ー>
*.example.jp」のように、コモンネームの一番左のラベルにアスタリスク(*)を指定したサーバー証明書です。ワイルドカード証明書の「www.example.j「login.example.jp」「member.example.jp」のように、アスタリスクと同一階層のサブドメインのみが異なるすべてのサーバーにインストールできます。
Webサーバの構築方法
2つの設置方法
1.マシーンを購入してサーバOSをインストール
レンタルなどの共有サーバの場合に、共有している人からファイルを見られたり、書き換えられたりする危険がある。
共有している別の人がしているサイトが人気だとその分速度が遅くなってしまうこともある。
また、root権限もないので、サーバの重要な部分の設定を変える必要がある一部のソフトは使えない。
そこで、一台のサーバでも共有しているそれぞれが、サーバを構築できるようにしたのがVPSという仮想サーバになる。
安価で、ROOT権限もモテるのでとても便利なサービス。
インターネットに接続するので、IPアドレスができる。
特定のドメイン名でアクセスできるようにしたければ、ドメイン名とIPアドレスが対応するように設定しないといけない。
このときにDNSサーバを設定する必要がある。
で、アパッチやWebサーバソフトをインストールしてサーバとして稼働させる。
(レンタルサーバでは予めWebサーバソフトの設定が済んでいるので、これらの作業はいらない。)
調べたこと 第五回
ポート。。。
サーバやクライアントで通信するアプリケーションは、必ずこのポートを使っている。
多くの場合、サーバの方でも、クライアントの方でも、複数のことを同時実行しているので、異なるサーバへの通信が同時発生していることになり、データが混乱する危険を持っているので、そこでポートが活躍する。
TCPとUDP(プロトコル)にそれぞれ1〜65535までのデータの口が用意してあり、ここをポートという。
あるアプリケーションが、一つのポートを通ると、他のアプリケーションはそのポートを通ることができないという方法で、番号が分かれているので、たくさんの情報でも混乱すること無く動き続ける事ができる。
ポートには種類があって、ウェルノウンポートとエフェメラルポートがある。
ウェルノウンポートは名前の通り、予め知られている、定められているポートに当たる。アプリケーションにはこれが定められているので、私達がアクセスした場合すぐにその口につなげてくれる。
で、クライアント側の予め決められている必要のない、ランダムなポートをエフェメラルポートという。
インターネット上で企業や官公庁の公式サイトで情報を入手したり、動画やSNSを利用したりする場合には、必ずWebサーバーソフトウェアのお世話になります。そのうち半数でApacheが稼働しています。
(コンピュータにApacheを入れると、そのコンピュータはWebサーバとしてのお仕事ができるコンピュータになります。)
暗号化(SSL)→ (https://〜 ポート番号443番)
これで暗号化しているときは、ブラウザのアドレスのところに鍵のマークがついている。
少しの個人情報を入力するサイトでもSSLの暗号化をしたほうがいい。
公開鍵暗号方式(?)
という手法が、SSLでは使われている。で、ここでは2つの鍵を使う。
一つは、秘密鍵 もう一つは公開鍵 という。
暗号化するのには、公開鍵を使い、元に戻すには秘密鍵の方をつかう。
(この暗号化っていうのは、数学の計算で作られている。)
で、悪い人が、この公開鍵の方を偽物にすり替えることがある。
これを防ぐために、認証局というものを取り入れている。
認証局は信頼できる企業や団体のことで、この公開鍵はインターネットで個別に配信ではなく予めブラウザにインストールしておく。
その公開鍵は絶対に偽造されていないというものになる。信頼できる。
認証局以外の公開鍵を使うときは、、、
まず、認証局に秘密鍵で暗号化してもらい、通信するときはその認証局からもらった暗号化した証明書をつかってやり取りする。
で、ウェブブラウザに内蔵されている公開鍵でもとに戻せば、偽造された公開鍵ではないと信じられる。