web-dev-qa-db-ja.com

異なるブラウザによって異なる方法で変更されたユーザー生成HTMLを処理するための一般的な手法は何ですか？

私はウェブサイトアップデーターを開発しています。フロントエンドはHTML、CSS、JavaScriptを使用し、バックエンドはPythonを使用します。

それが機能する方法は、<p/>、<b/>、およびその他のいくつかのHTML要素をユーザーが更新できることです。これを有効にするには、Webページをロードし、JQueryを使用して、これらすべての要素を<textarea/>要素に変換します。テキスト領域のコンテンツが変更されたら、元の要素に変更を適用し、それをPythonスクリプトに送信して、新しいコンテンツを保存します。

問題は、ブラウザが異なれば元のHTMLが変わることに気付いたことです。

  • この問題をどのように回避しますか？
  • どのPythonライブラリを使用していますか？
  • この問題を回避または克服するために、どのような手法またはアプリケーション設計を使用していますか？

私が見つけた問題は次のとおりです。

  • IEは、classおよびid属性を囲む引用符を削除します。たとえば、<img class='abc'/>は<img class=abc/>になります。
  • Firefoxは、改行から円記号を削除します。<br \>は<br>になります。
  • 一部のウェブサイトには非常に特殊な表示技術があるため、単純な「\ n」（IE）を挿入するとウェブサイトの表示に影響する可能性があります。例：<img class='headingpic' /><div id="maincontent">を<img class='headingpic'/>\n <div id="maincontent">に変更すると垂直方向のギャップが挿入されますIEで。

私がこれらの問題を克服しようとして失敗したこと：

  • JQueryまたはPythonを使用して、すべての>\n<オカレンス、<br>などを削除します。しかし、IEで異なるパターン、場合によっては∙\n、場合によっては\n∙∙∙を取得するため、これは失敗します。
  • Pythonで、新しいHTMLを解析し、新しいテキスト/コンテンツを抽出して、古いHTMLに挿入します。これにより、要素と形式が変更されることはなく、コンテンツのみが変更されます。これは非常に難しく、やり過ぎのようです。
pythonalgorithmstechnique
6
Jakie

Web開発の最初のルールの1つは、クライアントを決して信頼しないことです。悪意のあるユーザーまたはバグのあるクライアントは、Javascriptで行うことをすべてバイパスし、サーバー側にフィードする可能性がありますPython不正な形式で有害な可能性があるHTMLなので、サーバー側Pythonそれが得るものは何でも標準化してクリーンアップする必要があります。

サーバー側でいくつかの作業を行う必要がある限り、Webブラウザーの気まぐれを完全に回避して、すべてをサーバー側で実行してみませんか？ textareaの内容をサーバーに送信し、サーバー上で BeautifulSoup を使用してクリーンアップすることをお勧めします。

必要に応じて、クライアント側でtextareaからHTMLへの変換を実行して、変更のプレビューをユーザーに表示し、textareaのコンテンツをサーバーに送信することもできます。

2
Josh Kelley

あなたの目標は何ですか？

まず、なぜあなたはそれをしているのですか？顧客がWebページのコンテンツを変更する可能性を提供する場合、次の2つのケースがあります。

  • Stack Exchangeのユーザーのように、顧客には十分な技術的バックグラウンドがあります。この場合、Markdownを使用しないのはなぜですか？ユーザーフレンドリーで入力がはるかに簡単です。
  • あなたの顧客は十分な技術的背景を持っていません。この場合、HTMLを手動で処理する可能性を提供することは、ISPがインターネットに接続するには、まず自宅からセンターまで独自の配線を行い、次に彼らに一致する独自のルーターを構築する必要があると言ったようなものです。プロトコルを作成してから、すべての構成を自分で行います。それはあなたの顧客があなたのビジネスをどのように認識するかです。

覚えておいてください、それはHTMLです

直接HTML編集機能を使用する正当な理由がまだある場合は、HTMLを扱っていることを覚えておく必要があります。つまり、string.replaceはなく、正規表現はありません（太字で示していますが、Arial Black 200の太字で赤く点滅していると想像してください）。

入力を解析する必要があります。

プライマリ、フォーマットを正規化するためにそれを解析する必要があります。ここで、終了行を削除したり、<br>を<br />に置き換えたりします（質問のバックスラッシュについて話しているのですが、これはタイプミスですか？）。

また、それが有効なHTMLであることを確認する必要があります。ユーザーが開始タグと一致しない</div>を追加した場合はどうなりますか？はい、おそらくページのレイアウトが崩れるでしょう。

覚えておいてください、それはユーザー入力です

最後に、入力をHTMLとして解析する最も重要な理由：検証する必要があります。

厄介なJavaScriptコードを含む<script/>タグを追加するとどうなりますか？あなたを困らせるためだけにあなたのレイアウトを壊したい場合はどうなりますか？または、ユーザーをあなたのWebサイトから自分のWebサイトにリダイレクトしますか？仮に...

信頼できないソースによって変更されるHTMLコードを開いた場合は、遅かれ早かれ傷つくことを覚悟してください（ページのコンテンツに次の内容が含まれているため、Googleの結果によって禁止されていることを確認するのは決して楽しいことではありません。ウイルス）とあなたの顧客、二度と戻らない。

1
Arseni Mourzenko