猫と遊ぶ 見習いプログラマーの備忘録

日々の学んだ事を随時更新。主にプログラム。その他いろいろ

よくわからん!innerHTML、textContent と innerText

タイトル通り、innerHTML、textContent、innerTextのちがいがよくわからなかったので、Google先生から色々調べてみた。

なんでこんなに似たようなのがあるんだ~~

しかも調べてみたらこのブラウザでは使えないとか制限とかあるみたいで…
わからんなので、自分なりにちょっとまとめてみました。

innerHTML

この名の通り、HTMLをブラウザに表示
文字列も返す
CSSもタグ内に入れたら認識してくれる
全ブラウザ対応

textContent

基本文字列で返すので、HTMLも文字列で返す
なのでHTMLのタグは働かない
IEでは動かない

innerText

textContentと同様に、タグがそのまま表示される
IE独自で作成されたモノっぽい
FireFoxでは動作しない


となるので、難しく考えなければinnerHTMLオールマイティーかと。

ただ調べてみると、「XSS」というなぞの単語が出てきてですね…
調べてみました。
XSSとはすなわち脆弱性のこと。
脆弱性があると、ハッキングされる可能性が高くなります。
XSSクロスサイトスクリプティングといって、簡単にいうと、悪いデータが埋め込まれてしまい、そのままHTMLが表示され悪意あるスクリプトが実行されてしまうこと。


こちらに、XSSを回避する方法がありました。
qiita.com

プラス、悪意あるデータがきても、ページをリロードしてあげればもとの正常なHTMLに戻るみたい。


でも誰がどのブラウザ使ってもいいようにするには、やっぱinnerHTMLがいいよなあ…なんて思ったりする。笑



にほんブログ村 IT技術ブログ プログラム・プログラマーへ
にほんブログ村