人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

Javascriptでフォームに入力されたタグのsrcやwidthなどが「”(ダブルクォーテーション)」で
括られていない場合、自動的にダブルクォーテーションが付くようにしたいと思います。

以下のようなコードを書きました。
# Javascript部分
function tagCheck(){
var tags = document.getElementById('tag').value;
tags = tags.replace(/(\w+)\s*\=\s*([^\s\>\/]+)/,'$1="$2"');
document.getElementById('preview').value = tags;
}

#HTML部分
<textarea id="tag"></textarea>
<input type="button" value="実行" onClick="tagCheck();">
<hr>
<textarea id="preview"></textarea>


「<img src=image.gif width=100 height=50>」と入力した時に、image.gifには「"」が付きますが
widthやheightには付きません。
また、image.gifをhttp://を付けた絶対パスにした時も変になります。

正規表現で指定する部分に誤りがあると思うので、正していただければと思います。


●質問者: k27w
●カテゴリ:ウェブ制作
✍キーワード:GIF HTML http:// JavaScript SRC
○ 状態 :終了
└ 回答数 : 2/3件

▽最新の回答へ

1 ● kn1967
●35ポイント

tags = tags.replace(/(\w+)\s*\=\s*([^\s\>\/]+)/g,'$1="$2"');

何も指定しなかった場合replaceは最初に合致したものだけを対象とします。

gをつければ続けて検索を行って、該当するものがあれば全て対象とします。

◎質問者からの返答

srcに入力した内容がファイル名だけなら上記のコードで問題ないのですが、

絶対パスの場合、以下のように変になります。

<img src="http:"//example.com/image.gif width="100" height="50">

また、最初からwidth="100"と括っていた場合でも、更に追加されてwidth=""100""のようになります


2 ● kn1967
●100ポイント ベストアンサー

既に別の話になってますが、とりあえず目の前の

2つの問題点(絶対パスと最初から括ってあった場合)に対応してみました。


tags = tags.replace(/(\w+)\s*=\s*"*([^\s">]+)"*/g,'$1="$2"');


ダブルクォーテーションが既に付いている場合、

まったく付いていない場合、前後のいずれかだけに付いている場合の

3パターン全てに対応します。


エスケープする必要の無いものまでエスケープしていたことによって

URLが変な所で切られてしまっったので違いをご確認くださいませ。


ところで・・・

全てのタグおよび要素について正規表現1つでカバーするのは

事実上不可能ですしセキュリティの観点でも

(1)フォーム入力によるタグの利用

(2)クライアントスクリプトによる加工

の2点は非常に危険な行為ですから

学習用途・実験用途であれば今回のようなコードでも結構ですが

実用として利用するのは極力避けてくださいね。


情報流出問題を起こしてしまった機関ですし情報としては古いものですが

情報量が少ないので読みやすいと思います。

http://www.ipa.go.jp/security/awareness/vendor/programming/intro...

余談ですが流出に関するコメントは下記。

http://www.ipa.go.jp/about/press/20090106.html

http://www.ipa.go.jp/about/press/20090119.html

http://www.ipa.go.jp/about/oshirase/20090121.html


では・・・

どうしても一部のタグだけ利用を許可したい場合はどうするのか?

その場合はフォームから送信されたテキストをサーバーサイドで

タグと要素を抜き出して部分的に再構築する事で対応することになりますが

別の話になりますので、また機会があればという事で・・・。

◎質問者からの返答

3パターンとも試しましたが、出来ました!正規表現って難しいですね・・。



セキュリティやエスケープに関してですが、掲示板やユーザコンテンツで利用する為のものではありませんし、その場合でもPHPと連携しますので、サニタイズ等は行います。


ただ、「HTMLを許可する場合のセキュリティ」については勉強が必要ですし、いずれはてなでも質問させていただこうと思います。


コメント欄も含め、貴重なご意見ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ