• ベストアンサー

「<img>を<script>～</script> 内に書くことはできません」

元アルバイト先に頼まれてサイトを作り運営しているのですが、わからないことがあるので教えて下さい。 サイトはXHTML1.0 Transitional で作っており、ここに、http://fmono.sub.jp/　の「w3Analyzer」を組み込みアクセス解析をしています。サイト自体もこのアクセス解析も正常に動作しています。 ただ、このサイトをhttp://openlab.ring.gr.jp/k16/htmllint/htmllint.htmlで構文チェックすると、アクセス解析のタグにエラー「<img>を～行目の<script>～</script>内に書くことはできません。」が表示されてしまいます。 エラーが表示されるタグは下記のようなものです。 <script type="text/javascript"> document.write('<img src="http://～/w3a/writelog.php?ref='+document.referrer+'" width="1" height="1" />'); </script> > アクセスログは普通に取得できているので問題ないのですが、もし上記エラーを回避する方法があればご教授下さい。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.3

XHTML には「ホンモノの XHTML」と「ニセモノの XHTML」があります。「ホンモノの XHTML」とは application/xml または application/xhtml+xml として識別されるもの、「ニセモノの XHTML」は text/html で識別されるものです。 ※実際にはどちらも本物です。ここでは「HTML 互換として処理される XHTML」を「ニセモノ」、「XML として解析される XHTML」を「ホンモノ」と、カタカナ＆カッコ付きで書いています。 「ホンモノの XHTML」として見れば、質問文のソースは妥当性違反です。なぜなら、img 要素のタグがエスケープされていないため、これがスクリプトの一部ではなく文書構成要素だと判断されるからです。XHTML 1.0 のスキーマは、script 要素内に img 要素が出現することを許していません。もちろん、スクリプトとしても正しく動作しません。 従って、XML のルールに従ってエスケープする必要があります。特に「<」と「&」は必ずエスケープしなければなりません。 document.write('&lt;img .... />'); ですが面倒なことに、「ニセモノの XHTML」ではこれが動作しなくなります。「ニセモノの XHTML」は、HTML との互換性のために script 要素内の「<」「&」をうまく扱ってくれるのですが、それが仇となり、上記では「&lt;」が「<」に戻りません。 ならば、コメント区間にするのはどうでしょう。XML でもコメント内なら「<」「&」が現れても大丈夫です（ただし「--」だけは駄目です）。 <script type="text/javascript"><!-- document.write('<img .... />'); //--></script> 「ニセモノの XHTML」ならこれでも構いません。しかし、「ホンモノの XHTML」では、コメントは本当に破棄されてしまい、上記では動作すらしなくなります。 そこで、XML/HTML のルールを使わず、JavaScript のルールでエスケープすることを考えます。 document.write('\u003Cimg .... />'); これなら大丈夫でしょう。XML/HTML に限らず、言語が混在する際は必ず適切なエスケープを施す必要があります。エスケープを避けたければ外部スクリプトにして下さい。 なお、ここには別の問題があります。そもそも「ホンモノの XHTML」では、document.write を使用できません。これは HTML 互換の機能だからです（HTML5 に明記されています）。 XHTML を採用するのであれば、それが「ホンモノ」でも「ニセモノ」でも大丈夫なよう、document.write に頼らないコードを作成して下さい。あるいは try...catch で括るなどして、「ニセモノ」として処理されたときのみコードが動作するよう工夫して下さい。あるいはいっそ、XHTML を止めるのも 1 つの選択でしょう。

hosidenshi
質問者

お礼

ご回答ありがとうございました。大変参考になりました。エスケープ処理などわからないことだらけだったのですが、ご回答がきっかけで色々と調べるうちにとても勉強になりました。 結局外部スクリプトにすることで解決しましたが、今後もXHTMLについて一層勉強していきたいと思います。

その他の回答 (2)

  • 4017B
  • ベストアンサー率73% (1306/1777)
回答No.2

多分、下記の様な感じ書けば怒られないと思います？？ ━━Sample::start━━━━━━━━━━━━━━━━━━ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="content-language" content="jp" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <title>NowRPG-Systemz.</title> <link rel="index" href="./index.html" /> <link rev="made" href="mailto:aiueo@123.com" /> <script type="text/javascript"> <!-- document.write('<img src=\"http:\/\/w3a\/writelog\.php\?ref='+ document.referrer +'\" width=\"1\" height=\"1\" \/>'); //--> </script> </head> <body> <p>テストです。</p> <noscript> <p>JavaScriptがOFFの時の文書。</p> </noscript> </body> </html> ━━Sample::ebdd━━━━━━━━━━━━━━━━━━ ポイントとしては、 ・XHTMLの書式に乗っ取って書くこと。 ・JavaScript内の文字列扱いの語句をちゃんとエスケープ処理する事。 ～こんな感じでしょうか？ 質問文の「<img>を～」とは恐らく。 「document.write('～')」の中の文字列のエスケープ処理がおかしかったからじゃないでしょうか？ 別に適当でも動きますが(笑)。 厳密には「/、.、"、'、\、*、-、? (その他演算子)」などは、その文字の前に「\」を置いて“エスケープ処理”をする事が推奨されています。 ですので採点評価サイトなのですから、その辺を厳密に採点してるのだと思います。 後、まさかとは思いますが…。 質問文の「</script> >」は書き損じであって、本物には無いものですよね(文末の“>”が二重)？ P.S. 自分的には… 　/、.、,、"、'、\、*、-、? 、=、$、&、%、#、!、(、)、{、}、[、]、<、>、;、:、_、^、~、|、@ ～は普段からエスケープ処理する様な癖を付けて置いた方が、後々便利だと思います。

hosidenshi
質問者

お礼

ご回答ありがとうございました。詳しく書いて下さり大変参考になりました。エスケープ処理などわからないことだらけだったのですが、ご回答がきっかけで色々と調べるうちにとても勉強になりました。 結局外部スクリプトにすることで解決しましたが、今後もXHTMLについて一層勉強していきたいと思います。

回答No.1

document.write('<img src="http://～/w3a/writelog.php?ref='+document.referrer+'" width="1" height="1" \/>'); としたらどうですか？ 最後を />'); でなくて \/>');

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • HTML文書の文法をチェックの事で

    HTML文書の文法をチェックの事でお伺いします。 xhtmlでページを作成しています。 質問なのですがこのサイトで「Another HTML-lint gateway」（HTML文書の文法をチェックし、採点します） http://openlab.ring.gr.jp/k16/htmllint/htmllint.html 文法をチェックしているのですがアクセス解析のタグを付けていると、かなりマイナス点となってしまいます。 以下はあるアクセス解析のタグなのですが、なるべく減点されないようにするにはどうすればいいのでしょうか？ <!-- アクセス解析のタグ --> <img name="PageNo" src="dummy" alt="1" width="1" height="1"> <script type="text/javascript">document.write('<img src="http://*********/access/other/analyze.cgi?1_' + screen.width + 'x' + screen.height + '&' + screen.colorDepth + '&' + document.referrer + '" alt="" width="1" height="1">');</script> <noscript><img src="http://*********/access/other/analyze.cgi" alt="dummy" width="1" height="1"></noscript> <img name="home_url" src="http://*********/access/other" alt="dummy" width="1" height="1"><img name="1st-biz-img" alt="dummy" width="1" height="1"><SCRIPT type="text/javascript" src="http://*********/access/other/analyze/seidoku.js"></SCRIPT> <img name="1st-biz-img2" alt="dummy" width="1" height="1"><SCRIPT type="text/javascript" src="http://*********/access/other/analyze/taizai.js"></SCRIPT> <img src="http://*********/access/other/analyze/getrank.cgi" alt="dummy" width="1" height="1"> アドバス等ありましたら教えてください。よろしくお願いします。

  • ×マークを消したいのですが

    アクセス解析のＣＧＩを設置したんですが、非表示のはずなのに×マークが見えてしまってます。 この×マークをみえないようにしたいのですが、判る人教えて下さい。 配布元　http://www.suepon.com/　simple_access v.1.0 アクセス解析するページへの記述 <script>document.write('<img src="../access/access.pl?',parent.document.referrer,'">')</script> ↑ この部分が×マークが出てしまいます。サンプルだとこの呼び出しタグで 真っ白な画面のままです。

    • 締切済み
    • CGI
  • ＣＧＩの設置で、タグを記入した所に×が表示される

    アクセスログＣＧＩを設置したのですが、アクセスログを取りたいページに下記のタグを記入したのですが、一つはタグを記入した所に×が表示され、もう一つは×が表示されません。×が表示される方のＣＧＩを私用したいのですが、×が表示されないようにするにはどうしたらよいのでしょうか（×とは画像が表示されない時みたいな感じです） ×が表示される <script language="JavaScript"> var REF=window.document.referrer; document.writeln ("<img src=\"" + "http://.../access/acclog.cgi?ref="); document.writeln(REF); document.writeln("\" border=\"0\">" ) ; </script> ×が表示されない <SCRIPT Language="JavaScript"> <!-- document.write("<img src='http://.../accchk/access_check.cgi?"); document.write(document.referrer+"' width=1 height=1>"); //--> </SCRIPT>

    • 締切済み
    • CGI
  • スクリプトエラーを修正できません。

    スクリプトエラーがでて困っています。 オブジェクトを指定してください。 とのこと。 エラーのラインのタグは以下です。 どうしたらいいのか、どなたか教えてください。 <BODY bgcolor="#FFFFFF" onload="MM_preloadImages('images/side_otoiawase2.gif','images/side_kaisya2.gif','images/side_tokutei2.gif','images/bottan_seikaino2.gif');" <a name="top"><!--アクセス解析タグ　ここから--><script language="JavaScript" src="http://analyzer2.fc2.com/analyzer.js?uid=777967"></script>

  • SSLページのアクセス解析タグの設置方法

    リリースが近いHPがあるのですが、あることで悩んでおります。 アクセス解析ツールとして、futomi's CGI Cafeさんの高機能アクセス解析を使用しております。 参考）http://www.futomi.com/library/acc.html こちらの解析タグをSSLページに貼るとセキュリティ情報画面が毎回表示されてしまいます。 （「このページにはセキュリティで保護されている項目と保護されていない項目があります。」） これを出ないようにしたいのですが、何か方法はあるのでしょうか。 お手数をおかけしますが、ご教授いただければ幸いです。 よろしくお願いします。 参考）貼り付けるタグの例 <script type="text/javascript"> <!-- document.write("<img src='http://www.hoge.com/acc/acclog.cgi?"); document.write("referrer="+document.referrer+"&"); document.write("width="+screen.width+"&"); document.write("height="+screen.height+"&"); document.write("color="+screen.colorDepth+"'>"); // --> </script>

  • 外部サーバーのPHPをIMGタグで呼び出す場合

    外部サーバーのPHPをIMGタグで呼び出す場合の質問です。 2か所のサーバーでサイトを運営しており、今までGoogleAnalyticsでアクセス解析をしていたのですが、Javascriptを無効にしているひとの数も収集しておきたく、ド素人ですが思い切ってPHPでログ収集をしようとしています。 ただ、あっちこっちにログファイルを残しておきたくなかったので、片方のサーバーにログ収集用のPHPを設置し、もう片方のサーバーのサイトのログも以下のような方法で収集しようと考えています。 【http://hoge.jp/サイト.html】 <!DOCTYPE html> <html lang="ja-JP"> <head> 　～ </head> <body> ※コンテンツ <img src="https://huga.jp/収集.php" /> </body> </html> 【https://huga.jp/収集.php】 <?php //画像の作成 $img = imagecreatetruecolor(1, 1); $backGroundColor = imagecolorallocate($img, 255, 255, 255); imagefill($img , 0 , 0 , $backGroundColor); //画像出力 header("Content-type: image/png"); header("Cache-control: no-cache"); imagepng($img); //後始末 imagedestroy($img); //アクセスログ取得 $h = $_SERVER["HTTP_HOST"];// どのサイトのアクセスか分かりやすくするためにアクセスしたサイトのドメインを取得したいのです… $ap = $_SERVER["REQUEST_URI"];// 同じくアクセスページを分かるようにしたいのです… $rf = $_SERVER['HTTP_REFERER'];// できればどこからきた人かわかるようにしたいのです… ～ //アクセスログ吐き出し ～ ?> アクセスログ自体は吐き出されているのですが、コンソールに出るエラーと、吐き出されている内容に問題が発生し、ググりながら色々いじくってみたのですがまったく解決できずに困っています。 そこで質問なんですが、 (1)実際にhttp://hoge.jp/サイト.htmlにアクセスしてみた際、コンソールに「Refused to execute script from 'https://huga.jp/収集.php' because its MIME type ('image/png') is not executable.」というエラーが表示されます。MIME typeをどーにかしろってことだとは思うのですが、色々検索してみるのですがよくわからず、解決方法をご指南いただけませんでしょうか？ (2)別サーバーに設置したPHPではHTTP_HOSTとREQUEST_URIとHTTP_REFERERはうまく取得できないのでしょうか？もしできるやり方があれば御指南いただければと思います。ちなみに、現状では ・HTTP_HOST＝「huga.jp」（hoge.jpになってほしい） ・REQUEST_URI＝「/収集.php」（サイト.htmlになってほしい） ・HTTP_REFERER＝「http://hoge.jp/サイト.html」（アクセス元のページURLになってほしい） のようになってしまします。多分アクセスしたサイトが収集.php扱いになってしまっているのでしょうが、これってどうにかできるんでしょうか？ 何分PHP自体ド素人なもので、用語なんかも明るくありませんので、とわかりにくい説明になっていたら申し訳ないのとともに、プロの方からすれば「こんなしょーもないことで？」と言われてしまいそうですが、どうぞよろしくお願いします。

    • ベストアンサー
    • PHP
  • Javascriptが読み込めない　表示されない

    無料掲示板（http://www.net4u.org/）で作った掲示板に FC2（http://analyzer.fc2.com/）のアクセス解析を入れて使っています。 その掲示板を見ようとすると，ランタイムエラーが出ます． 21行目（アクセス解析タグ）でオブジェクトがありませんと止まってしまいます． その部分のソースです. <!--アクセス解析タグ　ここから--> <script language="JavaScript" src="http://analyzer2.fc2.com/analyzer.js?uid=○○○○○"></script><noscript><di v align="right"><a href="http://analyzer.fc2.com/" target="_blank">アクセス 解析</a></div></noscript> <!--アクセス解析タグ　ここまで--> こちらの環境はＷｉｎ９８ＳＥ　ＩＥ６．０．２８００．１１０６です． ＪＡＶＡスクリプト部分が動かないようです． ちなみにＭＡＣやＸＰでは問題なく動きます。 アクティブスクリプトの設定はオンになっています。 何故見れないのでしょうか？教えてください。 よろしくお願いします．

  • gooの簡単HPに最適なアクセス解析を…

    はじめまして、 先日初めてＨＰに挑戦していろいろしているうちにアクセス解析のことを知りました。 しかし<script>タグが使えず、<img>タグのアクセス解析ならＯＫということがわかりました。 フリーで出来れば広告の小さなアクセス解析をつけたいのですが、どこをみればimgかscriptなのかわかりません。 オススメのアクセス解析などがありましたらお教え願えませんでしょうか？ よろしくお願いします。

  • 画像をオンマウスで変えるスクリプトについて教えてください。

    お世話になります。 以下のJavaScriptを外部のjsファイルにしたいです。 「その１」にオンマウスすると、default.gifがaaa.gifに、 「その２」にオンマウスすると、default.gifがbbb.gifに 表示が変わります。 HTMLを極力綺麗にしたいのですが、外部にすることは可能でしょうか？ これとまったく同じ動作ができるスクリプトでも構いません。 ご存知の方がいらっしゃったら、教えていただきたいです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title>ロールオーバー</title> <SCRIPT language="JavaScript"> <!-- image = new Array(); image[0] = new Image(); image[0].src = "default.gif"; image[1] = new Image(); image[1].src = "aaa.gif"; image[2] = new Image(); image[2].src = "bbb.gif"; function Img_2(n){ if(document.images){ document.first.src=image[n-1].src; } } --> </SCRIPT> </head> <body> <img src="default.gif" name="first" /> <ul> <li><a href="#" onMouseOver="JavaScript:Img_2(2);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(2);document.myFORM.myMSG.value=''">その1</a></li> <li><a href="#" onMouseOver="JavaScript:Img_2(3);document.myFORM.myMSG.value=''" onMouseOut="JavaScript:Img_2(3);document.myFORM.myMSG.value=''">その2</a></li> </ul> </body> </html>

  • ホームページビルダのエラーについて

    HP作成初心者です。 ホームページビルダー９を使ってHPを作成し、SEO対策としてタグを貼り付けたのですが、ホームページのビルダーを開いて修正をし、プレビューで確認をしようとすると、エラーが表示されます。 エラーの内容は このページのスクリプトでエラーが発生しました。 ライン：１７ 文字：４２７ エラー：「ここには顔文字のようなマークがでました。」 コード：０ URL:「ファイルの保管場所が表示されました」 このページのスクリプトを実行しつづけますか？ はい、いいえ となります。 貼り付けたタグは以下の通りです </STYLE> <SCRIPT type="text/javascript"> var sRef,sCG; try{sRef=top.document.referrer;}catch(e){sRef="err";} if(sRef=="err"){try{sRef=parent.document.referrer;}catch(e){sRef="err";}} if(sRef=="err"){sRef=document.referrer;} sCG="<img src=http://ana2.tatsumi-sys.jp/banner.asp?uid=2006992&gid=1&pid=1&ref="+escape(sRef)+"&scw="+screen.width+"&sch="+screen.height+"&scd="+screen.colorDepth+"&ck="+navigator.cookieEnabled+" border=0 width=88 height=31>"; sCG="<a href="http://www.tatsumi-sys.jp/analyzer/?uid=2006992" target="_blank">"+sCG+"</a>"; document.write(sCG); </SCRIPT></HEAD> <BODY background="engel.gif"> <P><a href="http://www.tatsumi-sys.jp/analyzer/"><img src="http://ana2.tatsumi-sys.jp/cleargif.asp?uid=2006992&gid=1&pid=1" border="0" alt="ASP"></a></P> <NOSCRIPT> <A href="http://ec.tatsumi-sys.jp/ozzio/">プラズマテレビ</A> 以上です。 どこがおかしいのかどうかご指導下さい。 よろしくおねがいします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する