右クリック⇒「ソースを表示」でソースが一部しか表示されないように見えるのは何故でしょうか？

2020/05/11 13:56

> 右クリックのソースの表示を行っても、HTMLのソースコードやJavascriptのソースコードが見えない(存在しないように見える)サイトをよく見かけます。対象サイトのURLを掲示下さい。また、何を持って「見えない」と考えたのか、判断要素を示してください。

2020/05/11 14:08

ご回答いただき有難うございます。対象サイトの提示が出来ておらず申し訳ありません。ピンポイントで有名サイトの名前が出せず恐縮なのですが、ある会社様の社内用Webサイトです。 ※公開出来るものではなく申し訳ありません。何を持って見えないと考えたか、でございますが、「画面上にテキストボックスやチェックボックス、テーブルなど表示されているが、右クリックのソースの表示からはmetaタグ、bodyタグ、scriptタグに僅からながらのscriptソース」しか存在しなかった為、「見えない」または「見せないような工夫をしている or そういったフレームワークがあるのか」という疑問に至った次第です。

2020/05/11 14:19

回答に追記しました。＞DOM

2020/05/11 14:29

think49様ありがとうございます。

行動規範の内容に同意します

回答3件

ベストアンサー

HTML/CSS/JavaScriptのソース

ブラウザ上で動く言語なので、[ソースの表示] で閲覧できない現象は原理的にありえません。

サーバサイドスクリプトのソース

サーバで動くので、[ソースの表示] ではどうやっても見れません。
サーバサイドスクリプトが出力したソース(HTML/CSS/JavaScript)は必ず、見えます。

JavaScriptで動的に変更したDOM

JavaScriptで動的に変更したDOMは、元々のHTMLソースではない為、[ソースの表示] からは見えません。
ただし、ブラウザのDevelopper ToolsからDOMツリーを見ることは可能ですので、outerHTML を出力すれば、要素単位でHTMLソースの形式にすることは出来ます。

DOM

何を持って見えないと考えたか、でございますが、
「画面上にテキストボックスやチェックボックス、テーブルなど表示されているが、右クリックのソースの表示からはmetaタグ、bodyタグ、scriptタグに僅からながらのscriptソース」しか存在しなかった為、「見えない」または「見せないような工夫をしている or そういったフレームワークがあるのか」という疑問に至った次第です。

状況から想像するなら、「JavaScriptで動的にDOMを変更している為」ということになります。
HTMLソースはブラウザがダウンロードしたHTMLファイルですが、JavaScriptはHTMLファイルの書き換えを行いません。
ブラウザはHTMLファイルからDOMを生成し、JavaScriptが操作するのはDOMです。

DOM の紹介 - Web API | MDN

Re: the_end さん

投稿2020/05/11 14:05

編集2020/05/11 14:15

総合スコア18162

2020/05/11 14:33

いくつかのパターンのご提示ありがとうございます。「ソースを表示させない」という様々な思惑と手法(そのそれぞれの限界点も)引き続き、調べていこうと思います。 JSでDOMを変更(または生成という理解でも良いと思いますが）しているということで、リンク先を熟読し自作サイトでも試してみようと思います。ありがとうございます。

2020/05/11 14:37

他の回答にあった、document.write, jQuery, Vue.jsは全てDOM APIを使用しています。 DOMは全ての基本なので、覚えておくと、それらを利用する時にもDOMの動作を踏まえて、考えられるようになると思います。

2020/05/11 14:42

承知しました。ご丁寧にありがとうございます。 DOMについても並行して基礎から学びます！

行動規範の内容に同意します

ソースが見えてないのではなくて、見えてる物がHTMLソースのすべてです。

ブラウザ画面あるいはブラウザ画面の開発者ツールに表示されているのは、さらにJavaScriptで要素が追加されたものです。

投稿2020/05/11 13:45

総合スコア84505

2020/05/11 14:02

ご回答ありがとうございます。確かに、開発者ツールで確認するとソースまで見ることが出来ます。が、なぜ右クリックのソースの表示では見えないのか、という疑問でした。お答えいただいた内容ですと、JavaScriptによってdocument.write()をしてHTMLを生成しているという理解で良いでしょうか？(それはそれで素人ながらに非効率な気もしてしまいます）

KoichiSugiyama

2020/05/11 14:13

動的に表示を変更する個所が多い場合や、何らかの理由でHTMLを見せたくないサイトの場合、javascriptでほとんどのHTMLを作成することもあるようです。デベロッパーツールを使うと見えてしまうのですが、完全に隠すのは難しいとしても多少なりともスキルを持っていないとソースを読み取れないようにする、という意図があったりします。

2020/05/11 14:24

document.write()を使うことはまず無いでしょう。タグの要素を作成して、挿入するという事をやります。jQueryとかAngularとかで調べてみてください。 > それはそれで素人ながらに非効率な気もしてしまいます静的なページの作成ならそうですね。ユーザー操作に応じてページの一部だけを書き換えるような場合には多用されます。一般に知られるようになったきっかけのGoogleMapの登場時には、驚きを持って迎えられましたが、今では当たり前の技術になっています。

2020/05/11 14:26

KoichiSugiyama様ご回答ありがとうございます。やはりそういった対処をされているサイトも存在するということですね。大変勉強になりました。特に隠したいのか？と問われればそうではないのですが、勉強用に作成する中でサーバ側へのポストデータの中に「画面に表示されているデータ」を参照して送るように実装してしまった所があります。当然、開発者ツールからの書き換えも可能になるとの理解でおり、右クリックによってscript内のpostパラメータが見えた場合、やろうと思えば悪事が働けてしまうのだろう。という所で疑問が次々と湧いてきた所です。ご教示有難うございます。

2020/05/11 14:28

otn様ご回答ありがとうございます。まだまだWeb側技術に触れ始めたばかりで、初歩レベルから教えて頂き有難うございます。 jQueryに触れていながらもこの疑問、恥ずかしい限りですが、学習を続けたいと思います。

2020/05/11 14:31

再度書いておくと、・右クリックのソースの表示で見える物 ⇒アドレスバーのURLに対してHTTPリクエストを行って、サーバーから返されるデータそのもの・開発者ツールで見える物 ⇒その後で、JavaScriptが動いてHTML構造（DOM）を加工した結果