スポンサードリンク

jquery.xdomainajax.jsを利用の機能が動かなくなった⇒手抜きの弊害(^^;)

ウェブリブログのテーマ指定が色々と不便⇒半ランダム関連記事機能を作って運用⇒外部サイトのデータを利用するには、クロス・サイト・スクリプティングをかわす方法が必要⇒自分には一番お手軽に思えたjquery.xdomainajax.jsを使う⇒しばらくの間問題なく運用⇒ある日突然動かなくなる⇒クロス・サイト・スクリプティングをかわす機能が動かなくなったのかも?⇒だとしたら解決は面倒かも?⇒とりあえずiframe方式で逃げる⇒としていたけど、原因が分かった!⇒手抜きロジックの弊害?だった(^^;)

自分のブログの「関連記事ランダム表示」の機能

キーワード抽出で、ランダム生成した関連テーマ、関連記事を表示して紹介するよ!


記事表示都度にランダムだと一番良いんでしょうけど、

ローカル・アプリ実行時にランダム選択でベース・データは固定されます。


・巡回ソフトでローカルに引っこ抜いたブログのデータ

・テーマ分類、キーワード、除外キーワードを指定したコントロール・ファイル


これらを使って、記事内の全文検索で、関連記事の表示用データを作る・・・

なんて泥臭いやり方で実現している機能なワケです(^^;)


ちなみに、その表示用データは、FC2の無料ホームページアップロードしておき、

javascript + ajax + jquery.xdomainajax.js

の組み合わせで、ブラウザからFC2への非同期通信を行うコトで、

関連記事の表示データを引っこ抜いて来ています。


でもあんまりメンテナンスしてないわよね?

あはは・・・


確かに、キーワード指定が悪くて、

「内容的に全く関連しない」記事が抽出されてるテーマがあったり、

テーマ分類もイマイチだなぁ・・・

ってな感じで改善点が多々あるのは認識はしてるんですケドね・・・



外部サイトのデータを利用するには超えるべき壁がある

外部のデータを利用する為には、外部サーバとの独自通信を行う必要があります。


同一ドメインでは無いサーバに置いてあるデータを、ローカルなjavascriptから利用する・・・

のは、実は、セキュリティ機能により、簡単・単純には出来ません。


いわゆるクロス・サイト・スクリプティング防止の仕様に阻まれてるワケです。


幾つか対応方法があるんですが、いわゆる「正しい?」やり方で

行うには、通信するサーバ・サイドでの設定調整が必須です。


自分の場合はFC2のホームページとなるワケです。


・・・が、無料利用や、無料に近い利用をしている限り、

大抵は、このような変更を行うコトは簡単に出来ないと思われます。


技術的に出来ない・・・というより、

ユーザ管理の観点から、そこまで柔軟に利用出来るようにしていない・・・

って感じでしょうか?


レンタル・サーバなどで、自分でHTTPサーバを管理出来る場合には

この限りではありません(^^;)


例えば、オリジン・ヘッダを指定するのが1つの方法なのですが、

この設定を可能にするHTTPサーバが認識する.htaccessというファイル。

FC2のホームページでもユーザが利用出来ます。


ところが、.htaccessの色んな機能を開放しているワケではなく、

ベーシック認証というユーザ・パスワードの認証機能だけを開放しているようです。


ちょっと逸れました。



魔法のツール・・・個人ブログなので、気軽に使えるモノは使っちゃおう


魔法のツール⇒https://github.com/padolsey/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js


厳しいセキュリティに阻まれてるんだよね?


詳しくは調べてませんが、

YahooのAPIをごにょごにょと使って実現しているらしい、何やら怪しげな仕組みのAPI(^^;)


個人ブログだし、楽チンに使えるモノは使いましょう(^^;)




しばらく何事もなく運用していたのに・・・

突然、関連記事のランダム紹介機能が動かなくなる

突然動かなくなった・・・


理由は幾つか考えられます。


・Yahoo側でAPIの仕様が変わった、あるいは使えなくなった

・データを置いているFC2の何らかの仕様が変わってブロックされた

・ブラウザ仕様が変わって影響を受けた⇒Chrome,firefox,ieすべて全滅なので違う理由と思われる

・ウェブリブログ側でスクリプトがブロックされた⇒コードはすべて展開されているみたいなので違う理由と思われる


ん~、ちょっとデバッグしても動かない理由が分からない。

根が深そう・・・




とりあえず、iframe方式で代替で逃げる

ってコトで、根が深そうな予感がしたので、面倒を避けるために、

iframeでfc2に置いてるデータを直接表示する方式にとりあえず変更。


iframeのサイズ調整が面倒とか、デザインにも影響があるし、

スマホのブラウザとかだと、iframeの表示に難があるとか、

色々な理由でiframe使うのを避けたかったんですが、致し方ありません(^^;)




しばらく面倒で放って置いたけど、少しやってみる気になったので調査

ブラウザのデバッガでじっくりと調べる

ブラウザのデバッガでじっくりと調べていくと、

潜在的なバグがFC2の状態変化で顕在化した・・・・

という理由でうまく動かなかったというコトがわかりました。


ajaxは、HTMLソース流し込みでDOMが作れます。

その時にスクリプトタグがあるとそこだけ弾くとかじゃなくて、

DOM化自体が失敗してしまうようです。


ブラウザ・デバッガで、scriptを含むHTMLをajaxに流し込むとエラー

a = $('<script type="text/javascript"><!--\x0d\x0avar fc2footerparam = 'charset=' + (document.charset ? document.charset : document.characterSet) + '&url=' + document.location + '&service=0&r=' + Math.floor(Math.random()*99999999999);\x0d\x0avar fc2footertag = '<' + 'script src="http://vip.chps-api.fc2.com/apis/footer/?' + fc2footerparam + '" charset="UTF-8"><' + '/script>';\x0d\x0adocument.write(fc2footertag);\x0d\x0a//--></script>\x0d\x0a<!-- FC2, inc.-->\x0d\x0a<img src="http://media.fc2.com/counter_img.php?id=50" style="visibility:hidden" alt="inserted by FC2 system" width="0" height="0">\x0d\x0a<!-- FC2, inc.-->')
(program):1 Uncaught SyntaxError: Unexpected identifier





ブラウザ・デバッガで、scriptを含まないHTMLをajaxに流し込むと正常終了





 a = $('<script type="text/javascript"><!--\x0d\x0a\x0d\x0a//--></script>\x0d\x0a<!-- FC2, inc.-->\x0d\x0a<img src="http://media.fc2.com/counter_img.php?id=50" style="visibility:hidden" alt="inserted by FC2 system" width="0" height="0">\x0d\x0a<!-- FC2, inc.-->')
[, #text, , #text, , #text, ]







問題のコード


元にしたサンプル・コードに倣って、下のような感じで得られた結果全体を突っ込んでます。






.done( function(data, textStatus, jqXHR ) {
$('#related2').html(data.results);




HTML全体を引っこ抜いてきて動いてるので、


BODYタグの中身だけを抜いてくるんだろうなぁ、と漠然と思ってましたが、


HEADタグの中身とかも引っこ抜かれてDOM化されてます。


この辺りは、ブラウザによって、HEAD部が無視とか、HEAD部の特定のものが抜かれるとか、


色々あるみたいです。




つまり、BODY部の中身だけがDOM化されてるワケじゃないので、


そのまま対象のDIVの中身を置き換えると、


通常は有り得ないいらないモノがDOMツリーに存在する汚いDIVが出来ているコトになります。




ただ、ブラウザの表示の時には、それらは無視される?ために、


見た目の表示には支障が無い。


つまりは、たまたま動いていた汚いコードである・・・というコトになります。






今まで動いていたのが何故急にダメに?


FC2側のこの辺りの動作仕様が変わっていたみたいです。


FC2に置いたデータ(html)をブラウザで見てみると、


最後尾にWebサーバがインサートしているscriptコードがありました。




先の検証のとおり、


ajaxのDOM化機構では、scriptタグがあるとDOM化自体が失敗します。




FC2側のこの辺りの仕様が変わってしまったコトで、


潜在的なコード・バグが触発されて、


DIVの中身を置き換えているハズなのに、


何も表示がされない(変わらない)という現象になってた・・・


というコトのようです。






対処


本来は、受け取りデータのパース・コードを綺麗に修正すべきなんでしょうが、


とりあえず動けば良しのレベルなので、


HTMLの最後尾にコードが挿入されるのは、.htmlの場合だけみたいだったので、


データファイルの拡張子を乱暴ですけど.cssに変えてロードする仕様にして


回避しました。








~おわり by yasumin001 (やすみん001) / 天人鳥のいる暮らし(Life with pin-tailed whydahs/vidua macroura)~

スポンサードリンク

スポンサードリンク

この記事へのコメント

この記事へのトラックバック

スポンサードリンク