ゲーム攻略からプログラミングまで、その時に思いついたことをだらだらと書き連ねていきます。

【Javascript】FC2のプラグインを改造してみよー(続編)

2014.08.06 12:56 | コメント(0) | 技術

program.jpg
ぽよーん。

さつきさんですぜーい。

前回書かせていただいたFC2のプラグインを改造してみよーですが、
あのあとさらに改良してみました。

主な改良点は、
  • XSS対策(根本的な対策ではないです)
  • 各要素のデザインをJSONで内包
  • 何度も使用する関数をカプセル化

くらいですかねー。
最終的に表示される内容は前回と変わってません。

XSS対策


※間違った解釈でしたらご指摘ください。

まず、XSSってなんだ。
XSS(Cross Site Scripting):くろすさいとすくりぷてぃんぐ
入力フォームなんかに特定のスクリプトを介在させ、POST時にスクリプトを実行させること。
ユーザが動的にフォームに入力することでスクリプトが実行されるため、例えば、会員制サイトなどで、IDや平文のパスワードを抜き出したり、cookie情報をごっそり持ち出したりすることができる。
これは、入力フォームに入力されたスクリプトコードをエスケープできていないために生じる。現状のほとんどのサイトはXSSへの対策を行っている・・・はず。
なお、「XSS」と省略するのは、「CSS」と略してしまうと、CSS(Cascading Style Sheets)と区別がつかなくなるため。

XSSの例)
XSS対策がされていない入力フォームに、"<script type="text/javascript">alert('Hello, World');</scrript>"と入力すると、POST後のページで「Hello, World」というポップアップが表示される。

はい、怖いですねー。
あなたのサイトは大丈夫ですか?

まあ、こういったことは基本的にサーバサイド(アプリケーション内)で設定するものですが、
なんかブラウザでも個別に対策してるのがあるっぽい。
前回の記事で私が嘆いていたXSSエラーはどうやらブラウザの問題だったみたいでした。
エラー内容は、特定のJavascriptの記述(関数を定義するなど)を行った場合、
The XSS Auditor refused to execute a scriptと、コンソールにエラーが出ておりました。
内容は見ての通り、「XSSぽいんでスクリプトの実行を拒否しまっせ」ですね。
どうやら、これはプレビュー表示をしたときのみ起こる模様。
(設定反映後の通常ページでは問題なく表示される。)

ふむ、本番ページとプレビューページの違いってなんだろう。
そうですね、リクエスト方法です。
本番ページはGETであるのに対し、プレビューページはPOST形式です。
プレビューページでは、今触ってるプラグインのデータをPOSTし、擬似的にページに当てはめた結果を見せてるので、いろんなところで不具合が出てます。
おそらく、今回怒られた内容は、HTMLコードの中にJavascriptの記述を紛れ込ませたからかなと。
私がプレビュー機能を利用してなんか悪いことをしようと企んでいるぞ!とブラウザは判別したようです。
さて、じゃあどうしよう。

とりあえず、各ブラウザで動くかどうか判別。
ブラウザバージョン結果
Internet Explorer11
Fire Fox31.0
Google Chrome36.0.1985.125 m×

お・・・w
Chromeさんダメじゃん。
IEの旧バージョンまでは見てません。仕事以外でそこまで面倒見れませんぬ。
んーFFなんかで見ると問題ないとこを見るとやっぱりブラウザの独自実装みたいですねー。
さて、じゃあどうしよう。
Chromeで見たらプレビューでは何も表示されません!じゃさすがに悲しい。
とりあえずこんな風に見えるよってことだけ伝えられたらいいかなーということで、
サンプルコードを埋め込んでみました。
Chromeでプレビューするとこんな感じに見えます。
sample
ソースコードは後程ー。


あとはざっくり行きます。

各要素のデザインをJSONで内包


もうCSS使わずにプラグインの記述内でデザインできるようにしました。
使いやすいかは微妙だけど、CSSを別に作成する手間は省けますね。


何度も使用する関数をカプセル化


Javascriptのエラーを吐く原因がブラウザ側のXSS対策ということが分かったので、バカっぽい冗長なコードはやめました。

それでは、変更後のコードを載せますね。
コードを表示



コメントアウトなし版はこちら



というわけで、少し直してみました。
個人的なもやもやはだいぶ解消しましたw

やっぱり気になったことはそのまんま放置はいけないね!
技術の記事

コメント

まだコメントがありません...(´・ω・`)