月別アーカイブ: 9月 2013

WORDPRESSでレスポンシブする場合に注意!

現在、WORDPRESSには沢山のレスポンシブテーマが用意されており、これを使うと簡単にレスポンシブル対応ができてしまいます。しかしオリジナルで追加したコンテンツが簡単に変換されてレスポンシブ表示になるかと言えばそんなことはありません。

一番問題になりそうなところを言ってしまうと、テーブルタグ、divタグの入れ子にした時が最も崩れてしまう可能性があります。

レスポンシブは手法を大きく分けると3種類存在します。

  1. 従来の技術リキッドレイアウト(CSSのautoやHTMLの%表示指定などをフル活用)
  2.  

  3. Javascriptやプログラム側でUSER_AGENTからブラウザ判定しstyle.cssを切り替える
  4. JQuery等のJavascript系のライブラリーを使用する

で、実際3番を最初やってみましたよ。

ところが問題がありました。
JQueryのライブラリーは当然WORDPRESSを入れると最初から自動で入っていますし、テーマがレスポンシブル対応であれば尚更、補足するライブラリーが沢山詰まっているわけですよ。

結局コンタクトフォーム、テーブル表示、DIVタグ入れ子の箇所はレスポンシブダメダメでとほほだったのでJQueryやその他のJavascriptライブラリーを入れてみたが、どうやら干渉してしまい、まともに動きません。

大体の予測はありました。AjaxライブラリーをWORDPRESSに導入した場合も、プログラムの”$”の箇所を”JQuery”に書き換えて対応したので、おそらく其の関連であろうと思います。しかし書き換えるのも面倒なのでJavascriptさよならしました。
一般的にはWORDPRESSの最初から同梱しているものを外して、オリジナルのJQueryを入れると動作するものと思われます。

んで、原点に戻りリキッドレイアウトを利用し結局作らわざるを得なかった。
成功例があれば、こっちの方はそれほど難しくないということがわかった。IEでうまく表示できない場合はリキッドレイアウトの方がそもそも対応しやすいと思う。また2番めの手法も合わせて利用すると完璧かもしれない。

WordPressセキュア&SPAM制限TIPS

最近、様々なプロバイダーでCMSを使ったコンテンツが侵略され改竄される被害にあっています。全て同じ手法で攻撃されているわけではありませんが、必要十分なセキュリティについて掲載して行きたいと思います。

一番、ガンブラー系攻撃でブロックする有効な手法はIPアドレスのフィルタリングではないでしょうか?
自宅のアクセスライン、会社のアクセスラインに固定IPのインターネットサービスを使う必要があります。固定IPのアクセスラインは安いところもありますのでそれを活用すると良いと思います。

もしどうしても、固定IPがとれないならProxyServerを格安VPS上で動作させてあげれば、VPSの固定IPを使ってブラウザーアクセスすればIPの固定化ができます。私の会社の顧客の一部もそうしています。日本には昔からよく知られたProxyServerでDelegateというオープンソースサーバがあります。これを使ってブラウザーのProxyServer設定を組み込んで自社のHPへアクセスする際に制限をかければ問題ありません。

http://www.delegate.org/delegate/

話は戻って実際にIPアドレスでの制限をかける設定ですが以下の記述をApache Web Serverにかけてあげれば安全です。
記述する箇所はhttpd.confやvirtual.conf等のディレクティブとディレクティブで利用してください。又.htaccessにも記述しても動作いたします

アクセス制限サンプル

order deny,allow
allow from a.b.c.d # ここに許可するアクセスIPを記述。
deny from all

ホットリンクを制限します

ホットリンクとは自分のコンテンツを勝手に他サイトで利用されることを意味します。いい意味でリンクされるなら視聴の営業活動になるのですがSEO上、アクセス負荷上の問題となることもあるので制限をかけたい人はいるはず
下記は画像を勝手にリンクされてしまうのを防ぐ例です。ページ全体のリンクも下記応用でフィルタリング可能です
手法はアクセス前のリファラーを見て自サイト経由からのアクセス以外は自動で警告(warn_stolen_image.jpg)イメージに転送する記述です。apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?example.com/.*$ [NC]
RewriteRule \.(gif|jpg)$ http://exampe.com/warn_stolen_image.jpg [R,L]

コメントスパムをブロックします

ブログコメントにスパムをする輩って多いですよね。これをブロックするためにリファラーを監視します。
リファラーはどのページから該当ページを見に来たのか、一つ前にいたページをチェックする機能です。
スパムのプログラムはダイレクトにコメントプログラムへアクセスするため基本Noリファラーになります。
ノーリファラーできたものは自身へ転送します。つまりエラーになります。apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

RewriteEngine On
RewriteCond %{REQUEST_METHOD} POST
RewriteCond %{REQUEST_URI} .wp-comments-post\.php*
RewriteCond %{HTTP_REFERER} !.*example.com.* [OR]
RewriteCond %{HTTP_USER_AGENT} ^$
RewriteRule (.*) ^http://%{REMOTE_ADDR}/$ [R=301,L]

wp-config.phpをアクセス禁止

アクセス制限サンプルと同じ要領で行なってください。apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

<Files wp-config.php>
order allow,deny
deny from all
</Files>

.htaccessのアクセス禁止

apacheのhttpd.conf.virtual.confや.htaccessに記述してください。

<Files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</Files>

.htaccessのファイル名を変更して攻撃者からapacheコンフィグを探せなくする

.htaccessファイル自体の名前は知られているので別のファイルの名前にすると安全です。apacheのhttpd.conf.virtual.confに記述してください。
次からはht.access.ruleが.htaccessの代わりとして動作します。

AccessFileName ht.access.rule

以上ですが、是非トライしてみてください。