質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • PHP

    20856questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    9290questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4181questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTMLの各属性に対する正しいエスケープ方法について教えて下さい。

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,021

misak1

score 12

HTMLの各属性に対する正しいエスケープ方法について教えて下さい

正しいエスケープの方法とその辺りの仕様を紹介しているWEBページがありましたら
URLを教えて下さい。

会社の先輩にhref属性にはkey,valueにurlencodeを掛けるだけではダメで更に全体をhtmlspeciarlcharsがあると言われました。

href="<?= htmlspeciarlchars( 'http://hoge.com/fuga/?'.urlencode('key1').'='.urlencode('val1').'&'.urlencode('key2').'='.urlencode('val2') ) ?>"

発生している問題

value、name、alt、title属性にはhtmlspeciarlchars
href、srcなどURLが入る属性にはurlencode
onclickなどにはaddslashesではダメらしいということ。

試したこと

WEB制作会社のHP(IMJ,メンバーズ、カヤック)を見てみると代替hrefはhtmlspeciarlcharsされているようでした。

補足情報

URLエンコード(パーセントエンコード)
HTMLエンコード
など各エンコードの仕様。
XSSに対する問題、回避策など基本的なことは理解しているつもりです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

なかなか、正しいエスケープの方法というのを、決めるのは難しいかと思います。

静的パラメータであれば、別にエスケープする必要も無い場合が多いですし、
逆に動的パラメータで、かつ、ユーザが任意入力した値が反映されるのであれば、何らかエスケープをしておかないと、SQLインジェクションなどの原因となります。

よって、どのようなパラメータが渡されるのかによって、その都度、どこまでエスケープしたら安全か、どの方法がよいのか、(htmlspeciarlcharsで明示的に「<」とか「>」を排除とか)考察する必要があるかと思います。

ただ、それ以上に、サーバ側の変数の受けを気をつけるべきだと思います。

どんなに、クライアント側でエスケープをしたところで、結果としてAPI(REST API)側が、受けた引数をそのまま処理してしまっては、APIが何らかでばれた場合(HTMLソースを見られれば分かってしまいます)に、
悪意のあるユーザーが、エスケープ無しで、いろいろなパラメータを投げ込んでくる可能性があります。

その時に正しく、対応できるようにする必要がありますので、
クライアントのエスケープもある程度は気にする必要がありますが、
基本は、サーバ側で、受けた変数をどのようにエスケープをするか、という方が重要な気がします。

もっと言えば、クライアントから、どのような形で引数を受けても、安全に処理が進み、また処理できないと判断されるパラメータならきちんとエラーを戻す、(例えば)さらに不正パラメータと思われたら思い切って404を戻す、などなど。

よって、クライアント側のエスケープは、サーバサイドのAPIの動作と合わせて、最適な方法を模索することが大切かと思います。

論点がずれてしまい、申し訳ございませんが、
ツラツラと書かせて頂きました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/19 16:35

    回答ありがとうございます。
    サーバーサイド側に応じて、処理すればいいと思いますが、正しいエスケープをしないと、サーバー側で処理するのが大変になりそうですね。

    キャンセル

  • 2016/04/23 15:10

    正しいエスケープの方法というのを、使う対象に応じてエスケープすべきというのが一番納得できる回答でしたのでベストアンサーとさせていただきました。

    キャンセル

0

「正しいURLをどう書くか」と「正しいHTMLをどう書くか」がごっちゃになってる気がします。
両者は全く別の物で、それを「エスケープ」とひとくくりにしてはいけません。

会社の先輩にhref属性にはkey,valueにurlencodeを掛ける

これは、正しいURLの書き方の話で、

更に全体をhtmlspeciarlcharsがあると言われました。 

こっちは、正しいHTMLの書き方の話です。

以下、不正確かも知れません。ごめんなさい。

正しいURLの書き方としては、
クエリー文字列を、「名前=値」の形式で書くなら、(名前と)値は、urlencodeが必要で、名前と値を区切る=や、次の「名前=値」と区切る&は、urlencodeしちゃ駄目です。

正しいHTMLの書き方としては、テキストや属性の場所では、URLであろうがなかろうが、< > & " を書いちゃ駄目で、htmlspecialcharsする必要があります。htmlspecialcharsするときはオプション引数でENT_QUOTESや文字エンコーディングを指定した方が良いです。
正しいURLであれば、「名前=値」を区切る&以外の禁止文字は出てこないはずなので、htmlspecialcharsを呼ばずに、「名前=値」を&amp;で区切るという事でも良いかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/19 16:46


    >正しいURLの書き方としては、
    >クエリー文字列を、「名前=値」の形式で書くなら、(名前と)値は、urlencodeが必要>で、名前と値を区切る=や、次の「名前=値」と区切る&は、urlencodeしちゃ駄目です。

    ここまでは理解できています。
    問題はhrefの中の&も&amp;にしないとダメなのかというところです。
    &はパラメータの区切り文字で、html表示するわけじゃないので、実体参照する必要もないし、"amp;"という名前か値があったとしてもurlencodeされるから"amp%3B"になって問題にならないような気がします。

    キャンセル

  • 2016/04/22 09:06

    > html表示するわけじゃないので
    表示しようが表示しまいが、HTMLの中に書く時は、&は、&amp; と書きます。
    「この属性の時はこれこれの理由で大丈夫」とか「この属性の時は大丈夫じゃない」とかの区別はありません。

    キャンセル

0

あなたがディレクトリ名、ファイル名に :/?&# 等の予約文字を使用したならURLエスケープ(パーセントエンコード)しなければなりません。
a要素のhref属性値に <>"' を含むならHTMLエスケープしなければなりません。
次のHTMLは不正にhref属性値を閉じます。

<a href="http://example.com/"test".html">sample</a>
<a href='http://example.com/'test'.html'>sample</a>
<a href=http://example.com/<test>.html>sample</a>

次のHTMLは意図せず、HTML文字実体参照として機能します。

<a href="http://example.com/?a=1&amp;=2">sample</a>
<a href="http://example.com/?a=1&#160;=2">sample</a>

次のHTMLは意図せず、HTML文字実体参照として機能します。
http://d.hatena.ne.jp/think49/touch/20110216/1297852052
https://html.spec.whatwg.org/multipage/syntax.html#named-character-references

<a href="http://example.com/?a=1&amp=2">sample</a>
<a href="http://example.com/?a=1&copy=2">sample</a>

Re: misak1 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/04/22 10:25 編集

    私の質問が良くなかったのでしょうね。
    一番知りたいことはパラメータ区切り文字の&を&amp;としているのは何故かということが知りたいのです。

    ```html
    <a class="next" href="/index?page=2&amp;per_page=10">
    ```

    残念ながら、私には、あなたの示してくれたサンプルの示したいことが理解できません。
    ```html
    <a href="http://example.com/?a=1&amp;=2">sample</a>
    ```
    パラメータ1: a=1
    パラメータ2: amp;=2

    キャンセル

  • 2016/04/22 21:07

    リンク先を比較してみれば一目瞭然だと思います。
    https://jsfiddle.net/6qw8zbc8/

    キャンセル

関連した質問

同じタグがついた質問を見る

  • PHP

    20856questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    9290questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • HTML5

    4181questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。