絵文字挿入/HTML対策機能・SIIシステム

メニューへ戻る
ヘルプデスク
カンタンに説明 実物を見てみる ダウンロード 設置・設定方法 仕様に関して

■CGI開発者の方へ

 毎度ご利用有難うございます。(^-^)
 ここでは、あなたが開発したCGIをSIIシステムに対応させるための方法をご説明します。
 isi-sii.plは以下の5つのサブルーチンと1つの変数を含んでいます。

 通常の使用方法では、まず入力フォーム(<from></from>など)から受け取ったコメントをCheck_Htmlサブルーチンに渡して、不正なhtmlタグの処理などを行います。
 次に、Chenge_Imagetagタグにコメントを渡し、絵文字タグ(<!電球>など)を、<img>タグに置換し、そして表示(print)します。
 具体的な例は以下のとおりになります。
例:
require 'isi-sii.pl';

# 入力
$input='<b>今日</b>の気分は<!電球>';

# HTMLをチェック
&isi_sii::Check_Html($input); 

# imgタグに変換
&isi_sii::Chenge_Imagetag($input,'');

# 表示
print	$input;
sub Check_Html($html,$tag1,$tag2,$tag3)
動作
このサブルーチンの処理内容は次の通りです。
  • HTMLタグを解析し、無許可のタグを無効化させる処理
  • 開始タグと終了タグの過多などをチェックし、補完または無効化させる処理
  • \rをすべて削除(ver 1.10で削除)
  • &をすべて&amp;に置換
  • タグ外の半角スペースを&nbsp;に置換
  • タグ内のstyle属性、id属性、class属性をすべて削除
  • タグ外の\nを<br>に置換
  • タグ内の\nを半角スペースに置換(ver 1.10で削除)

引数
引数$htmlには、入力フォーム(<form></form>など)から受け取ったコメントを渡してください。

引数$tag1と$tag2と$tag3は、どのHTMLタグを許可するかを指定するものです。brなどの終了タグのないものは$tag1に、終了タグのあるインライン要素タグは$tag2に、終了タグのあるブロック要素タグは$tag3に設定してください。
この値は省略してもかまいません。($tag1 eq'' 等として処理)

$tag1 eq '0' の場合、すべてのタグを無効化します。
$tag1内に'/' が含まれていた場合、許可するタグを個別に指定できます。区切り記号は/です。たとえば、'img/br'の場合、imgタグとbrタグのみを許可します。
$tag1 eq '1' または $tag1 eq'' の場合、isi-sii.pl内で設定したタグを許可します。

$tag2、$tag3の動作もこれと同様です。
$tag1がどれにも該当しない場合、$tag1 eq '1'と同じ動作をしますが、今後の仕様変更に備え、isi-sii.pl内で設定したタグを許可したい場合は明示的に'1'を設定しておいてください。

サンプル1
プログラムサンプル:
require '../cgi/isi-sii.pl';

$html='<b>今日</b>の<table><i>気分は   <!電球>です。';
$pass='../cgi/';
&isi_sii::Check_Html($html);

print $html;
サンプルの出力結果:
HTML> <b>今日</b>の&lt;table&lt;<i>気分は&nbsp;&nbsp;&nbsp;<!電球>です。</i>

ブラウザ> 今日の<table>気分は   です。
 許可済みのタグ(<b>)は有効のまま、無許可のタグ(<table>)は無効化されているのがわかります。
 また、<i>の終了タグが不足しているため、自動的に末尾にこれを補完しています。
 なお、この段階では絵文字タグ(<!電球>)はそのままなので、不明なタグとしてブラウザは無視します。
サンプル2
 通常、HTMLタグの許可不許可の設定はisi-sii.pl内に記録されていますが、引数$tag1と$tag2を使うと、タグの許可設定をカスタマイズすることが出来ます。

プログラムサンプル:
require '../cgi/isi-sii.pl';

$html='<b>今日</b>の気分は<font color="red">超ナイス</font>です。';
$pass='../cgi/';
&isi_sii::Check_Html($html,'0','b/i/u/small','0');

print $html;
サンプルの出力結果:
HTML> <b>今日</b>の気分は&lt;font color="red"&gt;超ナイス>&lt;/font&gt;です。

ブラウザ> 今日の気分は<font color="red">超ナイス</font>です。
上記の例では$tag2='b/i/u/small'を設定してあるため、b,i,u,smallのタグだけを許可するように動作が変更されました。
sub Chenge_Imagetag($html,$pass)
<!電球>などの絵文字タグを、実際のimgタグに置換する関数です。
引数$htmlには、表示するコメントを渡してください。引数$passには、表示するWebページのアドレスからSIIシステムまでの相対パスを渡してください。
$passは、たとえば掲示板のアドレスがhttp://www.jias.jp/cgi/bbs1/isi-bbs.cgi、isi-siiの画像がhttp://www.jias.jp/cgi/isi-sii/に保存されているとき、$pass='../isi-sii/'となります。

プログラムサンプル:
require '../cgi/isi-sii.pl';

$html='今日の気分は<!電球>';
$pass='../cgi/';
&isi_sii::Chenge_Imagetag($html,$pass);

print $html;
サンプルの出力結果:
今日の気分は<img src="../cgi/isi-sii/mark/denkyu.gif" alt="電球">
isi-sii.plの内部では、プログラム全体がisi_siiとしてパッケージ化されていることに注意してください。
sub Get_List()
利用できる絵文字リストを受け取るための変数です。普通は使わないと思うので、知らなくても構わないと思います(^-^;;;)。区切り記号は\nです。プログラムが文字コードShift-jisで保存してあったとしても、\rはすべて事前に削除してあるものとします。

プログラムサンプル:
$list=&isi_sii::Get_List();
print $list;
sub Get_TagList1()
許可されたHTMLタグ一覧(終了タグのないもの)を得るための変数です。区切り記号は\nです。&Get_Listと同様に\rは削除済みです。
プログラムサンプル:
$list=&isi_sii::Get_TagList1();
print $list;
sub Get_TagList2()
許可されたHTMLタグ一覧(終了タグのあるもの、インライン要素)を得るための変数です。区切り記号は\nです。&Get_Listと同様に\rは削除済みです。
プログラムサンプル:
$list=&isi_sii::Get_TagList2();
print $list;
sub Get_TagList3()
許可されたHTMLタグ一覧(終了タグのあるもの、ブロック要素)を得るための変数です。区切り記号は\nです。&Get_Listと同様に\rは削除済みです。
プログラムサンプル:
$list=&isi_sii::Get_TagList3();
print $list;
$version
SIIシステム(isi-sii.pl)のバージョンです。
プログラムサンプル:
print $isi_sii::version;
 余談ですが、私はC++言語等を経てPerlプログラミングに転移した身なので、プログラムの書き方はきわめてC言語的です。Perl独特の文法なんぞどこへやらの世界ですのでよろしくです。(<なにを?(^-^;;))

■入力後の「編集機能」が付いた掲示板類の場合について

 最近では「削除キー」を照合して、投稿後でも記事を編集できる掲示板が増えてきました。SIIシステムはこれに対応しています(多分^-^;)。
 ただひとつ、ご注意いただきたい点があります。以下の例を見てください。
require 'isi-sii.pl';

# 入力
$input='<b>今日</b>の気分は<!電球>';

# HTMLをチェック
&isi_sii::Check_Html($input); 

# imgタグに変換
&isi_sii::Chenge_Imagetag($input,'');

# 保存
open(FILE,'>data.dat');
print FILE $input;
close(FILE);

# 読み込み
open(FILE,'<data.dat');
$input=<FILE>
close(FILE);

# 表示
print	$inut;
 この例はひとつの問題を含んでいます。入力した文字列が、HTMLの<img>タグに変換されたあと、ファイルに記録されています。このままだと、事後に「編集機能」を使用したとき、編集画面にimgタグが表示されてしまいます。投稿者は突如現れるimgタグに困惑することでしょう。
 この問題は、
(入力 > HTMLタグをチェック > imgタグに変換 > 保存 > 読込 > 表示)
という処理順序が原因です。問題を解決するには、
(入力 > HTMLタグをチェック > 保存 > 読込 > imgタグに変換 > 表示)
という順序に変更するのがもっとも理想的でしょう。

 なお、チャットや編集機能の無い掲示板では、この問題は発生しません。(当たり前か。^-^;;)その場合、むしろ編集直後にimgタグの変換をすれば、表示時の処理軽減につながると考えられます。適切な手法をお執りください(^-^)。