フロントエンドセキュリティとそれを防ぐ方法の詳細な紹介

インターネットの発展に伴い、ユーザーの多様なニーズに応えるため、さまざまなWEBアプリケーションはますます複雑化していますが、それに伴いネットワークセキュリティにもさまざまな問題が生じています。フロントエンド開発業界として、この問題から逃れることはできません。そこで今日は、WEBフロントエンドのセキュリティとその対策について簡単にお話します。

#まず第一に、フロントエンド攻撃とはどのようなもので、どのように防ぐべきでしょうか?

1. XSS 攻撃

XSS は、Web アプリケーションでよく発生するコンピューター セキュリティの脆弱性で、悪意のある Web ユーザーが他のユーザーが利用できるページにコードを挿入できるようになります。たとえば、これらのコードには HTML コードとクライアント側スクリプトが含まれます。攻撃者は XSS の脆弱性を利用して、同一生成元ポリシー (same origin policy) などのアクセス制御をバイパスします。このタイプの脆弱性は、ハッカーがより有害なフィッシング (Phishing) 攻撃を作成するために使用するため、広く知られるようになりました。

XSS 攻撃の危険性は次のとおりです。

1. マシンのログイン アカウント、ユーザーのオンライン バンキング アカウント、さまざまな管理者アカウントなど、さまざまなユーザー アカウントを盗みます

2. 制御エンタープライズ データ (機密性の高いエンタープライズ データの読み取り、改ざん、追加、削除を含む)

# 3. 商業的価値のある重要な企業情報の盗難

## 4. 違法な転送

5. 電子メールの送信を強制される

# 6. Web サイトの吊り下げ馬

# 7. 被害者のマシンを制御して他の Web サイトに攻撃を開始する

#XSS 攻撃の具体的な兆候:

1. JavaScript コードインジェクション

以下はコードページです:

このコードの機能は、最初の部分に文字列を挿入することです。入力ボックス。2 番目の入力ボックスに出力し、1 を入力すると、2 番目の入力の値は 1 になります。以下は、ページとソース コードのスクリーンショットです (ここでは、テストするために次のコードを入力します)

<SCRIPT>alert(&#39;xss&#39;)</SCRIPT>

ポップアップ ダイアログ ボックスがないことがはっきりとわかります。なぜポップアップ ウィンドウがないのか疑問に思われるかもしれません。ソースコード

入力した文字列が15行目のinputタグのvalue属性に出力され、valueに値として表示されていることがわかります。ポップアップ ウィンドウがありません。この時点ではどうすればよいでしょうか? 賢い人は、

<SCRIPT>alert(&#39;xss&#39;)</SCRIPT>

の前に "> を追加して入力タグを閉じることができることを発見しました。したがって、得られる結果は # です。

##ウィンドウが正常にポップアップします。この時点でページを見ています。

あることがわかります。 2 番目の入力ボックスの後に "> 文字列が続きます。なぜこれが起こっているのでしょうか? ソース コードを見てみましょう。

解決策: 現時点で最も簡単な防止方法は次のとおりです。すべてのフロントエンド出力データをエスケープします。安全ですが、script タグがあるように示されていますが、実際には、script タグの左と右の山かっこ (>2. append の利用

前のセクションでは、script タグの左山括弧と右山括弧を警戒しましたが、賢明なハッカーは依然としてそれを解読する良い方法を見つけ出しました。 js を innerHTML に割り当てることは実行できません。例:

<br/>

ただし、jQuery の append ではこれが可能です。これは、jQuery が append 要素をフラグメントに変更するときにその中の script タグを見つけて、eval を使用して再実行するためです。 jqueryのappendで使われるメソッドもinnerHTMLです。 InnerHTML は Unicode コードを文字エンティティに変換します。

これら 2 種類の知識を組み合わせると、Web サイトは追加を使用して dom 操作を実行すると結論付けることができます。追加で決定できるフィールドであれば、Unicode を使用して左山括弧と右山括弧を偽装できます。コードは、「\u003cscript\u003ealert('xss');」のようなものです。次にエスケープすると、\u003 として偽装された

3. img タグの再利用

img タグは、イメージのロードが失敗したときに要素の onerror イベントを呼び出します。これで攻撃できるようになります。

しかし、この画像のアドレスを別の書き方にしたらどうなるでしょうか?

この時点でソースコードが変更されています--src の場合は空ですが、onerror が発生すると、挿入されたコードが実行されます。ページを更新すると、コードの挿入が成功しており、引き続きエスケープする必要があることがわかります。

2. CSRF 攻撃

CSRF 攻撃とは?

CSRF(Cross-site##) #request forgery クロスサイト リクエスト フォージェリ。「One Click Attack」または ## とも呼ばれます。 # Session Riding (通常は CSRF または XSRF と略されます) は、Web サイトの悪意のある使用です。実際、Web サイト内の送信動作の一部はハッカーによって使用されています。ハッカーの Web サイトにアクセスすると、 1. ポストを利用して合理的に取得します。通常は手間を省くために行います。, いくつかのデータを作成します。誰もが知っているように、これは http の標準に違反するだけでなく、ハッカーによっても使用される可能性があります。

たとえば、開発した Web サイトには、次の操作があります。次のように開発しました:

## 次に、ハッカーの Web サイトは次のように開発できます:

この場合、ユーザーはハッカーの Web サイトに 1 回アクセスするだけでよく、これは実際にはあなたの Web サイトで 1 回操作するのと同じですが、ユーザーには認識されません。 したがって、私たちの日々の開発では、依然として送信ビジネスに従い、投稿リクエストに厳密に従う必要があります。送信インターフェースの作成に jsonp を使用しないでください。これは非常に危険です。

2 .xsrf 攻撃のアップグレード

ポスト リクエストを使用して重要なビジネスを処理する場合でも、それをクラックする方法はまだあります。私たちのビジネス コードは次のとおりです:

ハッカー コードは次のとおりです:

クリック後、ユーザーは気付かないうちに送信しました。この状況から防御するにはどうすればよいですか?

最も簡単な方法は、ユーザー以外はハッカーの Web サイトがこのセッションのユーザーの確認コードを取得できないように確認コードを追加することです。ただし、これにより、特に頻繁に送信するユーザーの送信エクスペリエンスも低下します。ユーザーが常に検証コードの入力を求められる場合、ユーザーは非常にイライラするでしょう。

もう 1 つの方法は、ユーザーがアクセスしたページに検証トークンを埋め込むことです。このページで生成されるトークンは、基本的に検証コードを使用するのと同じです。ただし、この方法では、ページ全体のすべてのセッションに同じトークンを使用できます。多くのポスト操作では、開発者は現在のトークンを自動的に持ち込むことができます。ページのトークン。トークンの検証が失敗した場合、投稿はこのサイトから送信されたものではないことが証明され、投稿プロセスは終了します。トークンが実際にこの Web サイト用に生成されたものであれば、通過する可能性があります。

コードは次のとおりです。

には、このサイトの各セッションによって生成されたトークンが含まれていないため、送信は失敗します。

このサイトの Web サイト フォームには、このサイトによって生成されたトークンが自動的に送信されます。

このサイトの Web ページを使用して再送信する場合は、 use

もちろん、上記は単なる例です。特定のトークンの生成は、セッションとユーザー ID に応じて変更する必要があります。Web サイトにもトークンを追加する必要があると思われる場合は、Baidu で詳しく調べてください。 。

3. ネットワークハイジャック攻撃

多くの場合、当社の Web サイトは当社のサーバーに直接アクセスするのではなく、多くのプロキシ層を経由します。特定のリンクでデータが中間プロキシ層でハイジャッカーによって傍受されると、データが取得される可能性があります。 Web サイトのユーザーのパスワード。たとえば、ユーザーはさまざまなレストランの奇妙な Wi-Fi に接続することがよくありますが、この Wi-Fi がハッカーによって確立されたホットスポット Wi-Fi である場合、ハッカーはユーザーが送受信するすべてのデータにアクセスできます。ここで、ウェブマスターはウェブサイトの暗号化に https を使用することをお勧めします。このようにして、Web サイトのデータを取得できたとしても、ハッカーはそれを解読できません。

Web サイトが https によって暗号化されていない場合は、フォーム送信部分で非対称暗号化、つまりサーバーによってのみ復号化できるクライアント側の暗号化を使用するのが最善です。このようにして、中間にいるハイジャッカーは、暗号化されたコンテンツの実際の情報を取得できなくなります。

4. コンソール インジェクション コード

読者の皆さんは、図 4.1 に示すように、Tmall 公式 Web サイトのコンソールに警告メッセージが表示されていることにお気づきでしょうか? これはなぜでしょうか? ハッカーが騙すためです。ユーザーにコンソールに何かを貼り付けるよう強要する (コードを理解していない初心者ユーザーをいじめる) たとえば、「Tmall にアクセスしている限り、F12 キーを押して次のコンテンツを貼り付けてください」という記事を友達のサークルに投稿することができます。 、「○○元プレゼント」などをもらえると、一部のユーザーが実際に操作してしまい、プライバシーが公開されているとは気づかないでしょう。

Tmall のこのアプローチは、ユーザーにこれを行わないよう警告するものでもあり、Tmall のフロントエンドのセキュリティも非常に優れているようです。ただし、この種の攻撃は結局のところ少数派なので、様子見するだけでよく、一部のユーザーがこのような攻撃を受けることが本当にわかった場合は、Tmall のソリューションを忘れずに考えてください。

5. フィッシング

フィッシングも非常に古い攻撃方法ですが、実際にはフロントエンド攻撃ではありません。しかし、結局のところ、これはページレベルの攻撃なので、一緒に話しましょう。そういった経験のある方も多いと思いますが、QQグループの方が、アルバイトの話、海外旅行に行って家や車を売った話などを投稿されており、詳細は私のQQスペースなどに掲載しています。開いてみると、QQ ログイン ボックスが見つかりました。実際、ドメイン名を見ると、QQ ではないことはわかっていましたが、QQ ログインに非常によく似ていました。何が起こっているのか分からないユーザーは、実際に自分のアカウントを入力しました。ユーザー名とパスワード。その結果、ユーザーは QQ にログインできず、名前とパスワードが誰かに送信されました。

実はこの方法はフロントエンドでも使われています。次はフロントエンドを使ってリアルな釣りをしてみます。

1. まず、xx スペースで記事を共有し、他の人がクリックするように誘導します。

#2 次に、cheat.php Web サイト上のリダイレクトされたソース Web ページのアドレスを静かに変更します。

したがって、ユーザーが当社の詐欺的な Web サイトにアクセスした後、以前のタブは静かに変更され、ユーザーをだましてユーザー名やパスワードなどを入力させるフィッシング Web サイトに静かに置き換えられました。

3 弊社のフィッシング Web サイトは XX スペースに偽装されており、ユーザーにユーザー名とパスワードの入力を許可しています。

このフィッシング手法はさらに興味深いもので、重要な点は次のとおりです。この種の攻撃を防ぐことは困難であり、js を使用しているページのリンクをすべて開くことはできません。したがって、外部リンクのジャンプ リンクを現在のページ ジャンプに変更するか、ページがアンロードされるときにユーザーにプロンプ​​トを表示するか、すべてのページ ジャンプを window.open に変更し、開くときに次の手順に従います。同じ目標: ネチズンのセキュリティ意識を向上させる必要があります。

6. 日々の開発で注意すべきことは何ですか?

開発時には、ユーザーが作成したコンテンツに注意し、レイヤーごとに作業を行う必要があります。ユーザーが入力した情報のレイヤー検出。ユーザーの出力コンテンツのフィルタリング (エスケープなど) に注意し、送信用に重要なコンテンツを暗号化することを忘れないでください (https を使用するか自分で暗号化するかにかかわらず)

リクエストの取得と投稿仕様を厳密に遵守する必要があります。これらを混合したり、危険な送信を完了するために jsonp を使用したりしないでください。

URL に含まれる情報には注意してください。あなたのウェブサイトがどこに危険を及ぼす可能性があるかを常に念頭に置いてください。

上記はすべてフロントエンドのセキュリティに関するものです。その他のフロントエンドの問題については、PHP 中国語 Web サイトを参照してください: https://www.php.cn/

以上がフロントエンドセキュリティとそれを防ぐ方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。