46

JavaScriptで書かれたシンプルなHTMLサニタイザーを探しています。100％XSSで保護されている必要はありません。

私のウェブサイトにMarkdownとWMDMarkdownエディター（githubのSOマスターブランチ）を実装しています。問題は、ライブプレビューに表示されるHTMLが、ここSOのようにフィルタリングされていないことです。プレビューウィンドウのコンテンツをフィルタリングできるように、JavaScriptで記述されたシンプルでクイックなHTMLサニタイザーを探しています。

完全なXSS保護を備えた完全なパーサーは必要ありません。出力をサーバーに送り返していません。結果をデータベースに保存する前に、適切な完全なHTMLサニタイザーを使用するサーバーにMarkdownを送信しています。

グーグルは私には絶対に役に立たない。あらゆる種類のサーバー側言語でユーザー生成HTMLからJavaScriptを除外する方法について、何百もの（多くの場合正しくない）記事が表示されます。

アップデート

これが必要な理由をもう少し詳しく説明します。私のウェブサイトには、StackOverflowにあるものと非常によく似たエディターがあります。MarkDown構文を入力するためのテキスト領域と、その下に、送信後の外観を示すプレビューウィンドウがあります。

ユーザーが何かを送信すると、MarkDown形式でサーバーに送信されます。サーバーはそれをHTMLに変換し、HTMLサニタイザーを実行してHTMLをクリーンアップします。MarkDownは任意のHTMLを許可するので、クリーンアップする必要があります。たとえば、ユーザーは次のように入力します。

<script>alert('Boo!');</script>

それはHTMLなので、MarkDownコンバーターはそれに触れません。HTMLサニタイザーはそれを取り除き、スクリプト要素がなくなります。

しかし、これはプレビューウィンドウで発生することではありません。プレビューウィンドウはMarkDownをHTMLに変換するだけで、サニタイズはしません。したがって、プレビューウィンドウにはスクリプト要素が含まれます。これは、プレビューウィンドウがサーバー上の実際のレンダリングとは異なることを意味します。

これを修正したいので、手っ取り早いJavaScriptHTMLサニタイザーが必要です。基本的な要素/属性のブラックリストとホワイトリストを使用した単純なもので十分です。XSS保護はサーバー側のHTMLサニタイザーによって行われるため、XSSセーフである必要はありません。

これは、プレビューウィンドウが実際のレンダリングと99.99％の確率で一致することを確認するためのものであり、これで十分です。

手伝ってくれますか？前もって感謝します！

4

4 に答える 4

17

この質問で推奨されているものを確認する必要がありますクライアント側でHTMLをサニタイズ/リライトします

そして、XSSについてこれ以上行う必要がないことを確認するために、これに対する回答を確認してください。ユーザー生成HTML内でJavascriptインジェクション攻撃を防ぐ方法

于 2009-10-28T14:23:57.030 に答える
16

シンプルなHtmlSantizerを開発し、ここでオープンソース化しました：https ://github.com/jitbit/HtmlSanitizer

使用法

var result = HtmlSanitizer.SanitizeHtml(input);

【免責事項！私は著者の一人です！]

于 2019-01-18T14:37:22.613 に答える
5

これは、エスケープされたマークダウンをレンダリングする2kb（1kbのマークダウンレンダラーであるSnarkdownに依存し、必要なものに置き換えます）です。オプションで、B＆Iタグを、フォーマット付きのタグを含む可能性のあるコンテンツに変換します...

<template>
  <div v-html="html">
  </div>
</template>

<script>
import Snarkdown from 'snarkdown'
export default {
  props: ['code', 'bandi'],
  computed: {
    html () {
      // Convert b & i tags if flagged...
      const unsafe = this.bandi ? this.code
        .replace(/<b>/g, '**')
        .replace(/<\/b>/g, '**')
        .replace(/<i>/g, '*')
        .replace(/<\/i>/g, '*') : this.code

      // Process the markdown after we escape the html tags...
      return Snarkdown(unsafe
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;')
      )
    }
  }
}
</script>

比較として、vue-markdownは100kbを超えています。これは数式などをレンダリングしませんが、99.99％の人がそれらの目的でそれを使用しないので、最も人気のあるマークダウンコンポーネントがなぜそれほど肥大化しているのかわかりません:(

これはXSS攻撃に対して安全であり、超高速です。

なぜ使用したのか、使用&#039;しなかったの&apos;ですか？理由：一重引用符をエスケープするために `＆apos;`を使用すべきではないのはなぜですか？

そして今、完全に異なるが関連している何かのために...

なぜこれがまだ言及されていないのかわかりません...しかし、あなたのブラウザはあなたのためにサニタイズすることができます。

これは、ブラウザに付属のアセンブリ言語バージョンを使用することで、JavaScriptバリアントよりも30倍速くサニタイズできる3行のHTMLサニタイザーです...これは、Vue / React/Angularや他の多くのUIフレームワークで使用されます。これはHTMLをエスケープせず、削除することに注意してください。

const decoder = document.createElement('div')
decoder.innerHTML = YourXSSAttackHere
const sanitized = decoder.textContent

この方法が受け入れられ、高速であることを証明するために、同じパターンを使用するVue.jsで使用されるデコーダーへのライブリンクを次に示します：https ：//github.com/vuejs/vue/blob/dev/src/compiler/parser/ entity-decoder.js

于 2020-04-29T23:45:39.087 に答える
3

もう1つのヒント：2021年5月の時点で、Firefoxに次のSanitizerAPIがあります。

// our input string to clean
const stringToClean = 'Some text <b><i>with</i></b> <blink>tags</blink>,, including a rogue script <script>alert(1)</script> def.';

const result = new Sanitizer().sanitizeToString(stringToClean);
console.log(result);
// Logs: "Some text <b><i>with</i></b>, including a rogue script def."

（MDNの例）

参照：https ：//developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API

この機能が他のベンダーにも受け入れられている場合は、JS-sanitizer-implementsを取り除くのに役立つ可能性があります。

于 2021-05-09T13:13:42.787 に答える