Quantcast
Channel: 音楽方丈記
Viewing all articles
Browse latest Browse all 339

So-netブログで記事中のa要素のhref属性にJavaScriptの文字を入れると記事本文が白紙になる現象

$
0
0
今日、ブログの過去記事のメンテをしていて複数の記事の本文が表示されていないことに気付きました。



記事のページ自体は存在していて記事の本文だけがすっぽり抜けた状態です。
記事の HTML ソースを見たら本文の部分が丸ごとなくなっていました。
(下にある関連記事のところは JavaScript で自動抽出して記事が表示された後から差し込んでいます)

JavaScript のコードの何かがフィルターに引っかかっている?

 白紙になっていた複数の記事はどれも記事中で JavaScript を使っていたので、おそらくそれが原因だということはすぐに察しがつきました。

 記事中に書いた JavaScript は元々問題なく動いていたものでコード自体に原因があるとは思えず、ためしにテキストエディタで単独の HTML ファイルを作って記事本文を貼り付けてみると、JavaScript の部分は問題なく動きました。

 となると怪しいのは So-net ブログのシステム側のほうで、ブログテンプレートの記事本文の差し込み処理のフィルターの仕様が変更されたのではないかと思ったのです。

原因は a 要素の href 属性に指定した "javascript:"

 原因箇所を特定するために、まず記事中に書いていた JavaScript のコード <script> ~ </script> の部分をばっさり消してプレビュー表示してみたのですが、変化はなく記事本文は消えたまま。

 次に、JavaScript で DOM を変更している個所の div 要素を全部消してプレビューしてみると記事本文が表示されました。

 問題の範囲が絞り込めたので、その部分を注深く見ると a 要素の href 属性に "javascript:" を指定している箇所があって、もしかしてこれかと思い除いた div 要素を元に戻して、"javascript:" を "#" に書き換えてプレビューしてみたら記事本文が表示されました。

ということで、a 要素の href 属性に "javascript:" を指定していたらダメということがわかりました。

例えば
<a href="javascript:void(0)" onclick="func()" >ここをクリック</a>

のような書き方です。

 記事全体が表示されたあとの DOM 操作で上のような a 要素全体を差し込んでみた場合は問題がないことから、やはりブログテンプレートの差し込み処理段階で発生していることがわかりました。

<a href="#" onclick="func()" >ここをクリック</a>

とりあえず a 要素の href 属性に "javascript:" を指定しているところを "#" に変えて回避しましたが、なんだか釈然としません。

いつからこんな状態になっていたかわからないのですが、So-net ブログユーザーで参考になる方がいたらと思い記事に残しました。
後で問い合わせフォームで報告しておこうと思います。

[追記] 2012/12/07
昨夜に問い合わせを送ったあと、今日の昼にサポート担当からメールがありました。
(いつも迅速な対応で素晴らしい)

回答によると検証作業では現象は再現できなかったとのことだったので、再度こちらも現象が出た状態にして確認してみたところ、今度は問題なく表示されました。

現象が発生した時はブラウザでソースを表示で本文がごっそり抜けてたので、記事表示したあとの DOM 操作で消えたのではないと思っているのですが、昨夜何度も確認して確実に起こっていたものが再現しなくなって、本当のところどこに原因があったのか突き詰めようがなくなってしまったので、とりあえずしばらく様子見することにしました。


[関連サイト]
 So-net ブログ

Viewing all articles
Browse latest Browse all 339

Trending Articles