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://を付けた絶対パスにした時も変になります。

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

回答の条件
  • 1人2回まで
  • 登録:
  • 終了:2009/01/30 12:37:10
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:kn1967 No.2

回答回数2915ベストアンサー獲得回数301

ポイント100pt

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

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


では・・・

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

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

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

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

id:k27w

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



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


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


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

2009/01/30 12:36:31

その他の回答2件)

id:kn1967 No.1

回答回数2915ベストアンサー獲得回数301

ポイント35pt

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

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

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

id:k27w

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

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

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

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

2009/01/29 20:51:40
id:kn1967 No.2

回答回数2915ベストアンサー獲得回数301ここでベストアンサー

ポイント100pt

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

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


では・・・

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

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

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

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

id:k27w

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



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


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


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

2009/01/30 12:36:31

質問者が未読の回答一覧

 回答者回答受取ベストアンサー回答時間
1 GoldenDawn 426 399 81 2009-01-30 00:15:02
  • id:rouge_2008
    以下のようにしてみてください。

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

    http:で区切られてしまうのは、[^]内に\/を記述しているためです。
    ※[^\s\>\/]は、\sと>と/を除いた文字という意味
    \/の替わりに"を指定して、"で囲まれた部分は置換対象から除外すると大丈夫なはずです。


    以下のように[^]内に'を加えて前後に'*を付けると、'で囲まれた部分も"で統一できます。
    tags = tags.replace(/(\w+)\s*\=\s*'*([^\s>"']+)'*/g,'$1="$2"');
  • id:kn1967
    文章書いている間にコメント欄で・・・。

    違う点といえばセキュリティに関する話を少しと
    width="100" への対応だけでなく
    width="100 や width=100" といった中途半端なものにも
    対応したものを回答してあるという点だけですので
    特に必要無いと思われましたら
    2回目の回答はオープンしなくても結構ですよ。> k27w さん

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません