February 4, 2008

XSS をわかりやすく絵で説明してみる

XSS(クロスサイトスクリプティング)をわかりやすく絵で説明してみます。

XSS を絵にすると、だいたい以下のようなイメージになります。

xss1.jpg

まず、攻撃者が「クロスサイトスクリプティング クロスサイトスクリプティング…」と 100 回くらい噛まずに唱えます。
すると、マイナスイオンが大量に発生し、それが空気中を伝播し犠牲者となるユーザのPCに送られます。
そして、ユーザ宅のクッキーを奪っていきます。

xss2.jpg

実に簡単な仕組みですね。
たったこれだけのことでクッキーが奪われてしまうのです。
この脆弱性に対する防護方法ですが、「エイチティーエムエルエンティティーズ(htmlentities)エイチティーエムエルエンティティーズ…」と 100 回くらい噛まずに唱えることで回避できると言われています。

ほんとどうでもいい記事ですみません。

November 6, 2006

PhotoStack - Webでフォトアルバム

僕はとある「集い(つどい)」に毎月参加している。
その集いためのサイトを僕が作ることになった。
(ていうか、作ってみたかったので作ってる)

とりあえず、「イベントのお知らせ」的なものはブログを使ってやるとして、それとは別に「フォトアルバム」みたいなものを作りたかった。
で、フリーのプログラムをいろいろ探して、よさげだったのがこれ↓。

PhotoStack

全体的にシンプルで良い。

デモ

管理画面もなかなか使いやすい。

管理画面のデモ
(idとpassword両方「demo」でログイン)

まだ試してないけど、zip でまとめて画像をアップロードすることもできるみたい。

PHPで書かれていて、ライセンスはGPL。

画像管理ソフトをいろいろ探したり試したりしてて思ったんだけど、無駄に高機能なものが多い気がした。
「アルバム」という単位で画像をまとめて管理できたり、コメントをつけられたりとかね。
それはそれで便利で楽しいだろうけど、写真を見る人がみんなインターネットに慣れているかというとそうじゃないのが現状なので、今回はなるべく無駄なものは省きたかった。
写真が大量になってきたときにアプリケーションがまともに動作するのかとか全然検証してないけど、ま、そのときはそのときでまた考える。

October 22, 2006

PHP: CURL, Client URL Library

前の記事で、del.icio.us API を使ってブックマークを取得したりしてみましたが、ユーザーIDとパスワードは手で入力しないとだめでした。
実際はcronで起動されるプログラムから del.icio.us API を使うことになると思うので、前回のようなやり方だとダメです。
認証とかもやりつつ、API にアクセスしてデータを取ってくる方法が必要になります。

そのために、PHPからlibcurlというライブラリを使うことにしました。
ていうか、ざっと調べてこの方法しか見つけられませんでした。

PHP は、Daniel Stenbergにより開発されたライブラリlibcurl をサポー トします。このライブラリにより、多くの異なったプロトコルで様々なサー バーと接続し、通信することが可能になります。

PHP: CURL, Client URL Library 関数 - Manual

とのこと。
「リッチクライアントWebテクノロジー」のcurlではありません。
カール - リッチクライアントWebテクノロジー

参考:
cURL and libcurl
PHP: CURL, Client URL Library 関数 - Manual

July 23, 2006

YShout を導入

チャットアプリを導入してみました。

http://jugyo.org/ys/

YShoutってのを使ってます。
ココからダウンロードできます。

php + ajax で、なんかおしゃれです。
スタイルシートをいじってデザインをちょっと変えてます。

[via PHP+Ajaxなチャットスクリプト:YShout:phpspot開発日誌]

June 3, 2006

DokuWiki という wiki が良さげ

DokuWiki という wiki が良さげ。
情報共有の為に最近使い始めた。

ここからダウンロードできる。
http://www.splitbrain.org/go/dokuwiki

インストールはすごく簡単。
手順は以下。

  1. サーバーにディレクトリごとアップ
  2. 「data」ディレクトリに「changes.log」という名前の空のファイルを作成

デフォルトでは誰でも閲覧および編集が可能な状態になってるけど、必要に応じてユーザー管理もできるようになっていて、ページごとに権限の設定ができたりする。
ユーザー管理等の設定方法については以下が参考になる。
KoshigoeBLOG: DokuWikiで情報管理

以下、気づいた点をメモ。

良い点

■デザインが良い
すごく僕好み。ぱっと見た瞬間に「これだ!」って思った。
やっぱ、見た目重要。
ちなみに、僕は PukiWiki がどうしても好きになれない。

■編集画面が非常に使いやすい
dokuwiki_editor.png
ボタンを押すだけで文字の装飾を簡単に変えられる。
そもそも Wiki の文法なんて覚えるものじゃない。覚えてもすぐ忘れるし。
その点、DokuWiki のエディタは使いながら文法をある程度覚えられるので良い。
でも文法覚えなくても全く問題なく使える。

■プラグインで簡単に機能を追加できる
最近ではたいていの wiki にプラグインの機能が備わってるけど、DokuWiki はプラグインを管理するのが楽で良い。
dokuwiki_plugin3.png
このスクリーンショットの「Dowonload and install …」ってところを良く見てもらうとわかると思うけど、web から直接プラグインを取り込むことができる。
つまり FTP で転送しなくてもよい。
そして DokuWiki にはかなりたくさんのプライグンがある。
wiki:plugins [DokuWiki]

■履歴管理ができる
dokuwiki_diff2.png
この機能がないと話にならない。

■日本語対応してる
デフォルトでは「英語」になってる。
日本語にするには、「conf」ディレクトリの「dokuwiki.php」ファイルの「$conf[’lang’] 」の項目を編集する。
こんな感じ。

$conf['lang']        = 'ja';

■ソースコードハイライト機能
いろんなプログラミグ言語のソースコードをハイライト表示する機能が付いてる。
例えばこんな感じに書くと、

<code java> ... ソースコード ... </code>

こんなふうに表示される。
source_code_highlight.png
便利〜。

ちょっと気になる点

■日本語での検索がちょっとアレ
例えば、「ほげ」で検索しようとすると、「ほ」と「げ」を別々の単語と見なして検索するらしい。

追記(2006-06-04)
MeCab というプログラムを使えば、日本語でまともな検索ができるようになるらしい。
DokuWikiの日本語対応 [DokuWiki@higuchi.com]

デモ

デモページを設置しました。
http://jugyo.org/dokuwiki/doku.php?id=playground:playground
いじってみてください。

追記(2006-06-03):
DokuWiki を実際に使用するにあたっては、以下のブログの情報が良くまとまっていて参考になると思います。
Gentoo Linux で個人サーバー:Wiki でソースの色分け表示!DokuWiki のインストール - livedoor Blog(ブログ)

追記(2006-06-04):
「PukiWiki は好きじゃない」と書いたけど、PukiWiki Plus! というのがあるみたいで、こっちはなかなか使いやすそうだと思いました。

April 15, 2006

Wordpress でアクセスランキングページを作成する

アクセスランキングページを作りました。

System.exit(); - Access Ranking

■つくり方

必要なもの:
StatTraq - アクセス解析を行う Wordpress プラグイン

アクセスランキングページのテンプレート:

<?php
/*
Template Name: Access Ranking
*/
?>

<?php get_header(); ?>

<h2>Access Ranking</h2>

<div class="archive">
  <ul>
    <?php
      $sqlQuery = "SELECT article_id, COUNT( line_id ) AS cnt, post_title
        FROM $tablestattraq s, $tableposts p
        WHERE user_agent_type = 1
            AND p.ID = s.article_id
            AND p.post_status = 'publish'
        GROUP BY article_id ORDER BY cnt DESC LIMIT 0, 30";
      $results = $wpdb->get_results($sqlQuery);

      $blogAddress = get_settings('home') . '/'
          . get_settings('blogfilename') . "?p=";

      foreach($results as $row)
      {
        $post_title = stripslashes($row->post_title);

        $post_url = $blogAddress . $row->article_id;
        $list = "<li>";
        $list .= "<a href=\"$post_url\" title=\"$row->cnt hit\" >"
          . $post_title . "</a>";
        $list .= "</li>\n";
        echo $list;
      }
    ?>
  </ul>
</div>

<?php get_footer(); ?>

このテンプレートを適用したページを作成すれば完成!

追記:
ソースを読み返してみて思ったけど、全然たいしたことしてないな。
テーブルから普通に Select してきてるだけ。

これから学べるのは、「なるべく他人の作ったものを有効活用しましょう」ってこと。
ソース読めば勉強になるしね。

でも時には車輪の再発明も必要、と Joel が言っていたのを思い出した。

Joel on Software Joel on Software
Joel Spolsky 青木 靖

オーム社 2005-12
売り上げランキング :

Amazonで詳しく見る by G-Tools

(さりげなくアフィリエイト。しかしいまだかつて1冊しか売れてない。orz)

Wordpress でタグクラウドっぽいカテゴリページを作成する

カテゴリページを作ってみました。

なんかそれっぽい。

タグクラウドは大量の項目を表示するのにすぐれた方法だな。
考えた人すごい。

Wordpress では通常のエントリとは別に「ページ」を作成することができます。

page.png

ここで紹介した「カテゴリページ」も「ページ」として作成しています。
ページは、指定した「テンプレート」にしたがって表示されます。

template.png

以下は、カテゴリページのために作成したテンプレートのソースです。

<?php
/*
Template Name: Categories
*/
?>

<?php get_header(); ?>

<h2>Categories:</h2>

<div class="categories">
  <ul>
    <?php
     $query = "SELECT cat_ID, cat_name, category_count
            FROM $wpdb->categories
            ORDER BY cat_ID asc";
     $categories = $wpdb->get_results($query);

     $categories = $wpdb->get_results($query);

     foreach ( $categories as $category ) {
        $list = "";
        $list .= "<li>";
        $font_size = $category->category_count + 60;
        $list .= "<a style=\"font-size: $font_size%\" href=\""
            . get_category_link($category->cat_ID) . "\">";
        $list .= $category->cat_name;
        $list .= "</a>";
        $list .= "</li>\n";
        echo $list;
      }
    ?>
  </ul>
</div>

<?php get_footer(); ?>

追記:
カテゴリページは以下のページに統合されました。

System.exit(); - Archives