カテゴリー: プログラム

PHPセキュリティ まとめ ver.01

気がついたら全く更新してませんね。

いえね、実は裏側ではだいぶいろいろ動いているのですが、チョコチョコしたことではなく結構でかめのことをやっているので、あまりこちらでちょくちょく公開できる感じでもないのですね。
まーそれはそれとして、気をとりなおしてブログ再開していきましょう。

脱引きこもりプロジェクトの第三弾か四弾として、PHPセキュリテイセミナーに参加してきました。

昨日全然寝てないもんだから、セミナー中に寝そうになってしまい「おぉ、これはウッカリ」と思って回りを見たらけっこうチラホラ寝てました。
まぁそれだけ基本的な内容だったとも云えるかもしれません。オライリーで勉強したことそのまんまという印象でした。

とはいえ、自作CMSをスパムにフルボッコにされた経験を持つ私としては、体系的におさらいが出来て有意義でした。
以前自分がまとめたものと合わせて、再度自分のためのおさらいとしてまとめようと思います。

<ul class="参考にした資料">
<li><!-- プログラミングPHP 第2版（オライリー） --></li>
<li><!-- 入門 PHPセキュリティ（オライリー） --></li>
<li><!-- PHP逆引きレシピ --></li>
<li>PHPセキュリティセミナー（セミナー）</li>
</ul>

※2010年07月01日現在。随時更新予定

【第1：基本的な考え方】

———————————————————————————————————————————————————————————————————————
●多重防御　・・・複数のブロックをつける
●最小特権　・・・ユーザーには必要最低限のパワーを与える
●シンプル　・・・　シンプルはセキュリティ。複雑なソースを作らない
●データの流出は最小限に　・・・機密データの不必要な流出は避ける
●データの追跡　・・・どのデ－タがどこから来てどこへ行くのかを意識する

■変数は必ず初期化してから使う
■基本はPOST送信。GETはページidなどだけに使う。
■データベース（個人情報）、ログ、ライブラリはドキュメントルート配下に置かない（置くと誰でも見れてしまう）

【第2：安全なphp.iniの設定】

———————————————————————————————————————————————————————————————————————

●逆引きレシピのP589参照
●およびセミナーの内容を追記

【第3：入力のフィルタ】

———————————————————————————————————————————————————————————————————————

●1、入力を識別する　・・・どれが入力されたものかを識別する
（フォーム、URL、セッション、データベースから来たものは全て入力）

●2、入力をフィルタする
・内容および範囲のチェック
※フィルタはホワイトリスト形式で行う
※フォーム（チェックボックスなども）、URL、セッション、データベースからの全てが対象となる
※パスワード一致など、文字列の比較は必ず===で行う

●3、フィルタ前のデータとフィルタ後のデータを明確に区別
・$clean_xxxx変数を初期化
・$clean_xxxx変数にフィルタ後のデータを入れる

【第4：出力のエスケープ】

———————————————————————————————————————————————————————————————————————

●出力をする際は必ずエスケープする
・HTMLに出力（print）する直前にエスケープ　→　$clean_xxxx = htmlentities($xxxx,ENT_QUOTES,’UTF-8′)
（一部のHTMLタグを許可したい場合はHTML purifierライブラリを使用する）
・データベースに入れる直前にのエスケープ　→　mysql_real_escape_strings()など
（‘※SQL文で使用する変数を’で囲まないと意味が無い）

【第5：クロスサイトスクリプション、SQLインジェクション、NULLバイト攻撃】

———————————————————————————————————————————————————————————————————————

●クロスサイトスクリプション（XSS）
（ユーザーの入力したデータをそのままHTMLに出力することで発生する脆弱性）
・print出力前のエスケープで対応
・$_SERVER[‘PHP_SELF’]の撲滅。代わりに$_SERVER[‘SCRIPT_NAME’]を使う

●SQLインジェクション（ユーザーが入力したデータをそのままSQL文として出力することで発生する脆弱性）
・SQL文出力前のエスケープで対応

●NULLバイト攻撃
（\0の文字で一部のバイナリセーフでない関数で発生する脆弱性）
・preg_matchでチェックする

if(preg_match(‘/\0/’),$sample){
die(“不正な入力です”);
}

【第6：セッションハイジャック対策、その他クッキー対策】

———————————————————————————————————————————————————————————————————————

●セッションハイジャック対策
（他のユーザーのセッションIDを乗っ取る攻撃）
・ログイン前後、権限レベル変更前後、DBの内容更新前後、SSLページへの偏移前後にsesson_regenerate_id(TRUE)でセッションを再生成する
・上記2のphp.iniの設定（セッション関係）を採用する

●セッションファイルの保存ディレクトリを他人がアクセスできない場所へ変更
（php.iniのsesson_save_pathで設定）

●setcookieの第7引数にtrueを入れて、JS経由のcookieへのアクセスをさせないようにする

【第7：CSRF対策】

———————————————————————————————————————————————————————————————————————

●CSRF対策
（サイトの権限を持ったユーザーに不正操作を実行させる攻撃）
・処理の前後でワンタイムチケット方式でのチェックをかます
（確認後、ワンタイムチケットに使用したセッションは初期化しないとあかんよ。）

【第8：ファイル関連】

———————————————————————————————————————————————————————————————————————

●ファイルが本当にアップロードされたものかどうかis_upload_file()でフィルタし、ファイルの移動も move_uploaded_file()を使う
●独自のファイル名に変更する
●もしも独自ファイル名に変更できず、ままのファイル名を採用しなくてはいけない場合は、basename()とrealpath()でチェックする（ディレクトリトラバーサル対策）
●ファイルのMAXサイズを決める

———————————————————————————————————————————————————————————————————————

7月1日時点では、セミナーで話してた内容だけをまとめているので、これから他の資料から学んだセキュリティのポイントも追加していって、結構まとまったものにしようと思います。

10日までには上に記載した書籍のセキュリティ関係の内容をすべて網羅した感じにします。

Google Map APIを使ったフォトギャラリー、のサンプル

Google Mapの機能をJavascriptを用いて利用するAPIを、Google Map APIといいます。そのまんま。

使い方等はほかのサイトにたくさんのっているので割愛しますが、とりあえず一個簡単に作ってみました。

テキトーに作ったのでデザインがアレでかっこ悪いですが、背景画像やアイコンをイケてる感じにしたら
なかなかいい感じのギャラリーやら特設ページやらとして使えるのではないでしょうか。

とりあえずそんな感じ。PHPと組み合わせたりもできるようなので、そのうちなんかやってみようかな。

【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト（スクロール）

一定時間がたつと画像が切り替えるスクリプトの第二弾。スクロールして画像が切り替わります。

今回はjQueryに加え、jquery.easingというプラグインを使用します。これはアニメーションの動きをイケてる動きに変えれるプラグインです。

縦バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。

横バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。

縦も横もほとんど中身は変わりませぬ。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/recet.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>

<body>
<div>
	<ul id="gallery">
		<li><img src="img/1.jpg" /></li>
		<li><img src="img/2.jpg" /></li>
		<li><img src="img/3.jpg" /></li>
	</ul>
</div>
</body>
</html>

liの部分に画像を一つずつ設定してあげてくださいな。画像ファイルの名前は1とか2とか連番じゃなきゃダメよ。

#gallery{
	width:600px;
	height:480px;
}

#gallery li{
	line-height:0px;
	position: relative;
	left:0
}

//画像を切り替える速さ
imgChangeSpeed = 2000;

//画像の縦幅
imgHeight = 480;

//画像の横幅
imgWidth = 600;

//画像の数
imgInt = 3;

//ページ変異のタイプ
type = "easeInOutBack";

var move = "-" + imgHeight + "px";
var maximun = "-" + imgHeight * imgInt;

$(function(){

	//一定時間毎にスクリプトを呼び出す
	var t = setInterval(loadImg, imgChangeSpeed);
	
	//呼び出されるスクリプト
	function loadImg(){
		
		var movement = $("li").css('top');
		var movement = parseInt(movement.replace("px","")) - imgHeight;
		
		if(movement > maximun){
			$("li").animate({'top':movement},{queue:false, duration:1000, easing: type});
		}
		else{
			$("li").animate({'top':	0},	1000);
		}
	}
});

画像の縦幅と横幅と切り替える画像の数を指定してあげてね☆

ちなみに、//ページ変異のタイプのところをjQuery日本語リファレンスのこちらのページの黄色の棒の上に書いてあるそれぞれの名前に変えてあげると、スクロールの動きが変わりまっせ。

これでFlash使わなくてイイネ！今回のサンプルではバカでかい画像使ってるけれど、これを横長の画像にしてサイトのメイン画像部分に入れちゃえば、いい感じになるんじゃなーい？キャンペーンの画像切り替えたりしてさー！

では。

【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト（フェードイン）

一定時間がたつと画像が切り替えるスクリプトでございます。jQueryつかってます。

サンプルデモはこちらです。
ファイルのダウンロードはこちらから。

画像を切り替えるスピードなどは簡単に変えることができます。ちなみにスピードのとこの3000というのは3秒のこと。1秒は1000です。

画像を<p id=”gallery”>とかで囲めば表示されます。切り替える画像の数も拡張子も自由に変えれるけれど、画像の名前は1.jpgとか2.pngとか、1、2、3とかの連番でなくてはいけない。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>

<body>

<div>
	<p id="gallery"><img src="img/1.jpg" /></p>
</div>

</body>
</html>

//画像の数
imgLength = 3;

//最初に表示する画像
firstInt = 1;

//画像を切り替える速さ
imgChangeSpeed = 3000;

//画像の拡張子
imgExtension = ".jpg";

//画像の保存ディレクトリ
imgDirectory = "img/";

randomInt = firstInt + 1;

$(function(){

	//一定時間毎にスクリプトを呼び出す
	var t = setInterval(loadImg, imgChangeSpeed);

	//呼び出されるスクリプト
	function loadImg(){

		$("#gallery").children("img").animate({'opacity':'0'},	0)
		$("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'},	800);

		if(randomInt < imgLength){
			randomInt = parseInt(randomInt) + 1;
		}
		else{
			randomInt = 1;
		}
	}
});

ほんとはね、ほんとは画像をクロスフェード（なんか溶け込むように変わってくやつ）で切り替えたかったんだけど、めんどくさかったから寝ちゃったんです！

いつかそれも作ります。

会社で隣の席の先輩がグロ画像を喜んで見せてきました。そのせいでもう僕のスィートハートはブレイキンだぜ！

ほんとは「イヤーン！こんな怖いもの見れませんわー！」とか言いながら嬉々として見ていたんですけれども。

【Javascript】改良版・jQueryとPHPと Sqliteを使ったAjaxのシンプルなチャット

サンプルデモはこちら
ファイル一式のダウンロードはこちら

先日、jQueryを使ったシンプルなチャットを作成しましたが、今回はその修正版です。

一度に表示する記事数を設定でき、Twitterみたいに「もっと読む」をクリックするとAjaxで次の記事が表示されます。
あ、あと日付も入れました。

なんか全然難しいことしてないのに、やたら時間ばかりかかりました。もうダメです。五月病です。ウソです。

さてどんな使い道があるでしょう。

・ちょっと思いついたアイデアを書き込んじゃうメモにする
・話しかけたい けれど勇気が出せず話しかけられない総務のアイドル長谷川さんへ思いを密かに綴る恋日記にする
・姑の悪口をひたすら吐くことでストレス解消の場とする

うん、ちょっと考えただけでもいろいろ使えそう！レッツトライ！

一度に表示する記事数はlimit.phpをいじります。

<?php
//一度に表示する記事数
$limit = 5;
?>

説明しなくても分かるくらいに簡単ですね。赤子の手をひねるようですね。関係ないですが、なんでわざわざ赤子の手をひねらなければいかんのでしょう。いったいどういうシチュエーションなのかサッパリわからんとです。足ではいかんかったのでしょうか。

そんなわけで僕はもう寝ます。もう朝です。布団が読んでます。グゥ。

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ！

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん

Twitter