HTML5セキュリティの質問

2023/09/06 04:25

このQ&Aのポイント

HTML5セキュリティに関する質問についての要約文です。
HTML5のボタン要素に関するセキュリティリスクや対策について説明します。
ホームページ作成やボタン要素の使用におけるセキュリティ対策について詳しく解説します。

ベストアンサー

HTML5セキュリティの質問です。

2015/01/19 13:57

PHPを埋め込む、HTML5の質問です。下記サイト（PDF）の４１ページの質問です。 http://www.ospn.jp/osc2013.enterprise/pdf/osc2013_enterprise_jpcert.pdf HTML新要素・属性：<button formaction> 生成する HTML へのイベントハンドラの挿入を禁ずるために、on で始まる属性を検出する対策をとる場合があったが、このような対策では不十分従来は onmouseover, onclickといったユーザの操作が必要な属性が攻撃に使われたが、autofocus 属性と組み合わせることで、ユーザの操作なしに攻撃可能になった <form> <button formaction="javascript:alert(1)">text</button> </form> （https://www.jpcert.or.jp/research/html5.htmlからの引用と思われる。）上記の意味がわかりません。ホームページ作成でまだ、button要素は使うなという事でしょうか？どのような対策をとるべきでしょうか？引用元の https://www.jpcert.or.jp/research/html5.html <input>要素と共に、はっきりとクロスサイトスクリプティングの危険とあるのですが、どうエスケープするのでしょうか？ phpのhtmlspecialcharsでは対応できないのでしょうか？ onclickは使用してはならないという事でしょうか？（<video>, <audio>はまだ使用してはいけないのは理解できるのですが・・・・）それも変な解釈と思い質問しました。どうしてもBootstrapでbuttonを使用したいのですが、セキュリティ的にまだ使用してはいけないのでしょうか？教えてください。補足非同期通信のAjax使わなければいいのでしょうか？

shousen412
お礼率87% (35/40)

JavaScript
回答数2
ありがとう数9

みんなの回答 （2）
専門家の回答

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

ベストアンサー

noname#212058

2015/01/19 22:30 回答No.2

要は『HTML で入力規則を設定しているから』『Javascript で入力チェックしているから』と言って、『サーバ側でのPHPでのデータ受け取り時の入力チェック』を省略するのはダメですよ、ということです。 HTMLの入力規則や Javascript の入力チェックは、質問者さんが質問文に書かれているような「抜け道」があるため、これだけに頼るのはセキュリティ上大変危険です。必ずサーバ側 (PHP) で入力チェックを実施して、チェック漏れが発生しないようにしなくてはなりません。チェック漏れさえ発生しないようにシステムを作れば、ボタンなどを使用するのは問題ありません。

質問者

お礼 2015/01/20 11:22

大変勉強になりました、丁寧なご回答ありがとうございました！！

その他の回答 (1)

b0a0a
ベストアンサー率49% (156/313)

2015/01/19 19:45 回答No.1

何も高度なことを言われているわけではありません。 Aというユーザーの入力がBというユーザーの表示される場合は、注意が必要ということです。特にタグの入力を許可する場合は、最新の注意が必要だよということです。

質問者

お礼 2015/01/20 11:21

そうなのですか、安心しました。ご回答ありがとうございました！！

関連するQ&A

HTMLの記述について
下記HTMLにおいて <IMG NAME="slideshow" id="SLIDESHOW" SRC="image/B.jpeg" BORDER="0" alt="ロゴ"> <IMG> の NAME 属性の値 `slideshow` と ID 属性の値 `SLIDESHOW` は、同一タグ中では同じでなければないとは？（１） <FORM> <INPUT TYPE=button VALUE="自動" onClick ="if (timeout_id == null) animate()"> <INPUT TYPE=button VALUE="停止" onClick ="if (timeout_id) clearTimeout(timeout_id); timeout_id=null;"> <INPUT TYPE=button VALUE="前へ" onClick ="if (timeout_id) clearTimeout(timeout_id); timeout_id=null; showFrame(1);"> <INPUT TYPE=button VALUE="次へ" onClick="if (timeout_id) clearTimeout(timeout_id); timeout_id=null; showFrame(0);"> </FORM> <FORM> には ACTION 属性が必要とは？（２） ONCLICK 属性を使うときは ONKEYPRESS 属性も指定とは？（３） (<INPUT TYPE="BUTTON"> には TABINDEX 属性を指定するとは？（４） (<INPUT> には ACCESSKEY 属性を指定するとは？（５） HTMLを教えて下さい。
- ベストアンサー
- HTML
XHTMLとHTMLの違いについて
XHTMLのHTMLの違いについて教えてください。勉強するものの、これといった違いが判らずにこまってます。（今のところ、HTMLとは記述方式が違うんだよ～とか、XMLの宣言が必要なんだよ～、ということはわかったのですが）（参考したＵＲＬ） http://www.atmarkit.co.jp/fxml/askxmlexpert/022xhtml/22xhtml.html HTMLとXHTMLの違いとして以下の点が挙げられていることがわかりました。 ----------------------------------------------------------------- １．文書は整形式でなければならない２．要素名及び属性名は小文字でなければならない３．非空要素には終了タグが必要である４．属性値は常に引用符で括られなければならない５．属性の省略化はしてはならない６．meta、hr、br、img などは、空要素として書く７．属性値内での改行を含む複数の空白は１つと見なす８．スクリプトおよびスタイル要素の定義が異なる９．要素の入れ子などSGMLの排除機能を再現できない１０．‘id’および‘name’属性をもつ要素は、‘id’属性を使用する ----------------------------------------------------------------- とあるのですが、違う部分っていうのは「こういった定義部分だけ」であって、動作として大きな違い「ここが違うんだ」といった部分はないのでしょうか？「書式が厳密になっています。」言葉から、XHTMLは「HTMLをより厳密に書くもの」ということなのでしょうか？また、１０番目の、「‘id’および‘name’属性をもつ要素は、‘id’属性を使用する」について、イメージできなかったのですが、一体何のことを言っているのでしょうか？例えば、JavaScriptを使用して、要素を操作する場合は、 getElementById("ID名")にて、操作を行うべきである、と言っているのでしょうか？
- ベストアンサー
- HTML
HTML の BUTTON タグの VALUE で指定した値を取得できません
BUTTON タグは、NAME で変数名、VALUE でその値を指定してプログラムから参照できることになっていますね。「value属性を使用すると、ボタンがクリックされたときに、<form>タグのaction属性で指定されたプログラムに渡す値を指定することができます。 <input>でボタンを定義する際のvalue属性は、ボタンに表示されるラベルを変更するものでしたが、<button>タグのvalue属性は、ラジオボタンやチェックボックスのvalue属性と同様、プログラムが参照する値を指定するものですので、間違わないように気をつけてください。」引用元：http://w-d-l.net/html__tags__body__form__button/ これを参考に、HTML で次のように書きました。 <button type="submit" name = "Number" value="1" style="..."><div style="...">表示内容</div></button> それを PHP プログラムで参照して出力しました。 print $_POST["Number"]; インターネットエクスプローラー（バージョン６ＳＰ３）では、<div>～</div>が表示されてしまいます。 Firefox では値（1）が表示されています。（これが正しい振る舞いと思います。）ブラウザにより振る舞いが異なっているので、とても困っています。これは、インターネットエクスプローラー特有の症状でしょうか？また、回避策があればぜひ教えてください。
- ベストアンサー
- HTML
formボタンにAction属性を入れる
formボタンにAction属性を入れるにはどうすればよろしいでしょうか(更新ボタン) <form> <input type=button value=" 　更新　 " onclick="location.reload()"> </form>
- ベストアンサー
- その他（インターネット・Webサービス）
HTML、Javascriptでトグルボタンを作成する方法について質問
HTML、Javascriptでトグルボタンを作成する方法について質問です。自分が考えた動作としてはひとつのform内に複数のボタンを設置　初期値(表示)は"有効" ボタンを押すと値(表示)が"無効"に変わるもう一度押すと"有効"に変わるこれの繰り返しがしたいというものです。書いたコードは <javascript部分> function dspmsg(btnObject){ status = btnObject.value; if(status=="有効"){ document.btnObject.value = "無効"; }else{ document.btnObject.value = "有効"; } } <html部分> <form> <input type="button" name="yuko_FLG1" value="有効" onclick="dspmsg(this)" /> <input type="button" name="yuko_FLG2" value="有効" onclick="dspmsg(this)" /> ・・・・・ </form> 当然のことながら動きませんでした。自分でも間違っていることはわかるのですが、修正の仕方がわかりません。よろしくお願いします。
- 締切済み
- JavaScript
JavaScriptで電卓を作って一応完成はした
のですが、分からないコードがあります。以下のコードです。～HTML～ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="Ｃ" onclick="cl()"> <input type="button" value=" ７ " onclick="val(7)"> <input type="button" value=" ８ " onclick="val(8)"> <input type="button" value=" ９ " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" ４ " onclick="val(4)"> <input type="button" value=" ５ " onclick="val(5)"> <input type="button" value=" ６ " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" １ " onclick="val(1)"> <input type="button" value=" ２ " onclick="val(2)"> <input type="button" value=" ３ " onclick="val(3)"> <input type="button" value="－" onclick="keisan('-')"> <input type="button" value=" ０ " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" ＋ " onclick="keisan('+')"> <input type="button" value="＝" onclick="keisan('=')"> </form> ～JavaScript～ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか？特にonclickをボタンの数だけ書くのは手間です。
- ベストアンサー
- JavaScript
ボタンをファイルにリンクさせたい
お世話になります。 HTMLで <button type="button" name="button" value="button"> <font size="3"><b>テスト</b></font></button> <br><br> 上記のような感じでボタンを作りました。このボタンをあるファイルにリンクさせたい（URLでなくてファイル）のですが、できますか？ネットで検索すると、URLの場合ですが <Form><Input type="button" value="テスト" onClick="location.href='http://test.jp/'"></Form> 上のように出ていますが、どこにどのようなタグを打てばいいのでしょうか？宜しくお願いします。
- ベストアンサー
- HTML
formの送信ボタンクリック後、別ウインドウ表示
お世話になります。現在下記の指定でPDFを表示しています。 <INPUT type="submit" name="submit" value="送信" onClick="form.action='tcpdf/pdf.php';return true" class="button_order"> これをクリック後、別ウインドウでPDFを表示したいのですが、 onClick="form.action='tcpdf/pdf.php';return true"の部分を onClick="form.action='tcpdf/pdf_sample.php';target='_blank'"とかにしてもうまくいきせん。ボタンはもう一つあるので、 <INPUT type="submit" name="submit" value="戻る" onClick="form.action='201504_1_2.php';return true" class="button_re-selection"> 出来れば、送信ボタンのみの設定を別ウインドウ表示にしたいです。よろしくお願いいたします。
- ベストアンサー
- HTML
HTML文書のタグの属性をjavascriptで抜き出す。
はじめまして。現在javascriptでHTML文書にある要素の属性名を抜き出すロジックを考えているのですが、詰まっています。例えば＜form name="A" action="B"＞という要素があった場合にその属性名「name」「action」を抜き出したいのです。ＨＴＭＬ文書にある要素名を抜き出すロジックは何とか出来ました。以下がその関数です。 -------ここから------- function test() { kazu=document.all.length //文書の要素数を設定 var tagname='' for(i=0; i<kazu; i++){ tagname=tagname+document.all(i).nodeName+'\n' //要素名を抜き出す。 } document.send.aa.value=tagname //フォーム部品に結果をセットする。 } ------ここまで----------- 要素名を抜き出している部分は document.all(i).nodeName とかけましたが属性名を抜き出すのは document.all(i).attributes… のように書くんだろうな… と予測して実行したのですがエラーがでました。 DOM文書を読んでみたのですがいまいちピンときません。どなたが教えていただけませんか？使用しているブラウザはWindowsのIE5.5です。
- 締切済み
- JavaScript
複数ボタンを制御出来る2度押し防止ボタン
HTML5+CSS3でゲームを作っています。フォームがあり、ボタンが複数並んでいます。 <SCRIPT TYPE="text/javascript">  </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" name="d4_buy" value="300 onclick="sendform()">300購入</button> <button class="button8" type="submit" name="d4_buy" value="400" onClick="sendform()">400購入</button> </FORM> 上記で正常に作動しますが、3G環境など通信状態の悪い時に、「300購入ボタンを押した直後に400購入ボタンを押す」と700購入が出来てしまいます。【希望事項】 2つのボタンを連続して押しても2つ目が無効になるようにしたいというのが希望です。ネットで調べたところ ****************************************** http://okwave.jp/qa/q627484.html ****************************************** <HTML><BODY> <FORM method="get" action="http://www.google.com/search"> <INPUT type="submit" value="submit1" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="submit" value="submit2" onclick="this.form.q.value=this.value;this.disabled=true;this.form.submit()"> <INPUT type="hidden" name="q" value="" > </FORM></BODY></HTML> ****************************************** という例があったため、この例に従って <SCRIPT TYPE="text/javascript">  </SCRIPT> <FORM action="buy.cgi" method="post" name="form1" id="form1"> <button class="button8" type="submit" value="300 onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">300購入</button> <button class="button8" type="submit" value="400" onclick="this.form.q.value=this.value;this.disabled=true;this.form.sendform()">400購入</button> <INPUT type="hidden" name="d4_buy" value="" > </FORM> としてみたのですが、うまく数値の引き渡しが出来ません。(NULL となります) どのように改造すればいいか教えてください。よろしくお願いいたします。
- 締切済み
- JavaScript

HTML5セキュリティの質問

HTML5セキュリティの質問です。