otaku-tokyo

 

wiki

pukiwikiを使ってサイトを作る方法

まず、こちらのサイトからpukiwikiをダウンロードします。

ダウンロードファイル内にpukiwiki.ini.phpがあるので次のように変更します。

$page_title = サイト名

$modifier = 管理人の名前

$modifierlink = http://gamesofia.com/pukiwiki/

そして、サーバー内のpublic_html > ~~.com 内にpukiwikiという新規フォルダを作成し、その中にダウンロードファイルを入れます。

http://gamesofia.com/pukiwikiにアクセスしてみましょう。

pukiwikiの画面が真っ白になる場合はphpのバージョンがあっていない可能性があります。【https://pukiwiki.osdn.jp/?FAQ/45】だとpukiwiki1.5.3はphp8.0に対応していない為、php7.4にする必要があります。

http://gamesofia.com/pukiwiki/?cmd=md5にアクセスします。

MD5ハッシュ値を計算したい文字列を入力し、「PHP md5」を選択します。

pukiwiki.ini.phpを次のように変更したらインストールは完了です。

$adminpass = ‘ {x-php-md5}e739e0ae6a80f9f9e8b78c6fab9d5be8’;

pukiwikiのカスタマイズ

基本的にはskinディレクトリ内の「pukiwiki.css」か「pukiwiki.skin.php」を変更する。

メニューの変更にはMenuBarというページを編集

内部SEO

・twitter連携【https://saruwakakun.com/html-css/reference/twitter-card

・sitemap.xml【https://web-kanji.com/posts/xml-sitemap-making】←まだやってない

・構造化データ【https://digitalidentity.co.jp/blog/seo/schema-org/structured-data.html】←まだやってない

MenuBarの幅を広げる

デフォルトだと12emしかないので300pxに広げた

MenuBarにアクセスカウンターをつける

&counter(today); &counter(yesterday); &counter(total);

画像のサイズ変更

&ref(oo.jpg,500×260); で次のようなエラーが出た場合は、ファイル名の頭に./を付けると直る。

#ref(): The style ref(filename,pagename) is ambiguous and become obsolete. Please try ref(pagename/filname)

背景色

・背景色を黒にすると眼精疲労が起きる

・黒背景に白文字はカッコいいけど、目がチカチカして見えづらい

ロゴを変更する

<a href=”<?php echo $link[‘top’] ?>”><img id=”logo” src=”<?php echo IMAGE_DIR . $image[‘logo’] ?>” width=”80″ height=”80″ alt=”[PukiWiki]” title=”[PukiWiki]” /></a>

<?php echo IMAGE_DIR ?>headerlogo.jpg

とし、imageフォルダ内にheaderlogo.jpgを加え、pukiwiki.pngを消す。

FrontPageの名前を変える

pukiwiki.ini.phpに次のような記述があるので、$defaultpage のところを変える。

$defaultpage = ‘FrontPage’; // Top / Default page
$whatsnew = ‘RecentChanges’; // Modified page list
$whatsdeleted = ‘RecentDeleted’; // Removeed page list
$interwiki = ‘InterWikiName’; // Set InterWiki definition here
$menubar = ‘MenuBar’; // Menu

ページを編集する

編集するには「凍結」をクリック。凍結解除用のパスワードが必要。

pukiwiki.ini.phpの$adminpassが凍結解除用のパスワード。

ちなみにe739e0ae6a80f9f9e8b78c6fab9d5be8はMD5化したパスワードなので、このまま打つと「パスワードは間違っています」となる。正解はpassword8**

参考【https://pukiwiki.osdn.jp/?%E8%B3%AA%E5%95%8F%E7%AE%B1/3065】

wikiの作成方法

wikiの主な作成方法は次の3つです。

・wiki用のwordpressテーマをインストールする

・wordpressにwikiプラグインをインストールする

・レンタルwikiを借りる

・上記以外

wiki用のwordpressテーマとして無料で使えるものは「MyWiki」か「BuddyDocs」の2つです。MyWikiはWordPress内から検索してもヒットします。

プラグインをインストールする場合はWP User Fronted(ユーザーにフロントエンド投稿(ログインせずに投稿)させるプラグイン)もしくはYadaWikiなどがあります。ただし、YadaWikiは他のユーザーが編集できません。

レンタルWikiでは広告を載せられるPUKIWIKIがおすすめです。(カスタマイズ方法)。ただし、Wiki独自の記法を覚えないといけない点に注意が必要です。

専用テーマやプラグイン、レンタルwikiなしで作成する場合はcontenteditable属性などを使って誰でも編集できるようにします。ただし、セキュリティ上の問題には気を付ける必要があります。

セキュリティ対策

XSS(クロスサイトスクリプティング)

inputタグ内でaタグとjavascriptを含んだ投稿をすれば、その投稿リンクをクリックしたアプリ利用者が知らないうちに悪質なスクリプトを実行させられて、利用者のCookieを攻撃者のもとに送信してしまいます。その結果、利用者のCookieを手に入れた攻撃者は不正ログインができてしまいます。このようなサイトの脆弱性を利用した攻撃手法をXSSといいます。

防ぐためには次の3つの方法が必要となります。

・サニタイジング

・WAF

・文字数制限

サニタイジングとは、javascriptで使用される&、<、>、”、’の5文字がそのまま文字列として表示されるように置換することです。これによってscriptを無害化できます。PHPでは htmlspecialchars($str, ENT_QUOTES, ‘UTF-8′); と書くだけで良いのですが、Javascriptにはサニタイジング用の関数はないので次のコードを追記しましょう。

function htmlentities(str){
return String(str).replace(/&/g,”&amp;”).replace(/</g,”&lt;”).replace(/>/g,”&gt;”).replace(/”/g,”&quot;”)
}

ただしこのままではjavascript自体は入力・投稿可能なので、投稿も出来ないようにするためWAFを導入すると良いです。加えて文字数制限するとスクリプトが書き込みにくくなります。

CSRF(クロスサイトリクエストフォージェリ)

投稿版に攻撃者がJavascriptを含んだ投稿をする。攻撃者の投稿リンクをクリックしたアプリ利用者は知らないうちに悪質なスクリプトを実行させられる。結果、アプリ利用者が自分の意図していない投稿を勝手にさせられる。虚偽犯行につながる。

CSRF対策にはワンタイムトークンを実装する。投稿フォームのページを表示する前にランダムな文字列(トークン)を生成し、ユーザーのセッションに保存する。そしてinputタグにトークンをhiddenで埋め込む。リクエスト先では、セッションに保存したトークンと送信したトークンが一致しているか確認を行い、一致しない場合は不正なリクエストとして扱う。

$csrf_token = ランダムな文字列;

$_SESSION[‘csrf_token’] = $csrf_token

<form method="POST" action="http://hoge.com/send_point.php">
    <input type="hidden" name="csrf_token" value="<?=$csrf_token?>">
    <input type="text" name="send_user_id">
    <input type="text" name="point">
    <input type="submit value="ポイントを送付する">
</form>

if (isset($_POST["csrf_token"]) 
 && $_POST["csrf_token"] === $_SESSION['csrf_token']) {
 echo "正常なリクエストです";
} else {
 echo "不正なリクエストです";
}