クロスドメインリクエストとセキュリティ保護に Vue を使用する方法-Vue.js-php.cn

クロスドメインリクエストとセキュリティ保護に Vue を使用する方法

王林

リリース： 2023-08-02 18:25:57

オリジナル

1782 人が閲覧しました

クロスドメインリクエストとセキュリティ保護に Vue を使用する方法

現代の Web アプリケーション開発では、クロスドメインリクエストとセキュリティ保護は非常に重要な機能です。人気のあるフロントエンドフレームワークとして、Vue は、クロスドメインリクエストとセキュリティ保護機能の実装に役立つ一連の便利で使いやすいツールとプラグインを提供します。この記事では、クロスドメインリクエストとセキュリティ保護に Vue を使用する方法を紹介し、関連するコード例を添付します。

1. クロスドメインリクエスト

プロキシの使用

クロスドメインリクエストとは、1 つのドメイン名の Web ページから Ajax リクエストを送信することを指します。別のドメイン名のサーバーに送信します。ブラウザのセキュリティポリシーの制限により、Ajax リクエストは同じドメイン名でのみ許可されます。 Vue は Webpack プロキシ構成を提供しており、プロキシを構成することでクロスドメインリクエストを実装できます。プロジェクトのルートディレクトリの config フォルダーで index.js ファイルを見つけ、dev 属性の下に次のコードを追加します:

proxyTable: {
    '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

ログイン後にコピー

上記のコードは、/api で始まるリクエストを http://api.example.com ドメイン名に転送し、同時に Origin## を変更します。 # リクエストのヘッダー。クロスドメイン制限を回避します。

JSONP はクロスドメインソリューションであり、スクリプトタグの src 属性を通じてクロスドメインリクエストを行うことができます。 Vue は、JSONP リクエストを簡単に実装できる jsonp プラグインを提供します。まず、jsonp プラグインをインストールします:

npm install jsonp --save

ログイン後にコピー

次に、Vue コンポーネントに jsonp プラグインを導入して使用します:

import jsonp from 'jsonp';

export default {
    methods: {
        fetchData() {
            jsonp('http://api.example.com', {param: 'callback'}, (err, data) => {
                if (err) {
                    console.error(err);
                } else {
                    console.log(data);
                }
            });
        }
    }
}

ログイン後にコピー

上記のコードは、jsonp 関数を

http:/ に渡します。 /api.example.comJSONP リクエストを送信し、返されたデータをコールバック関数で処理します。

2. セキュリティ保護

CSRF (クロスサイトリクエストフォージェリ) は、一般的な Web サイトのセキュリティ脆弱性です。他の Web サイトにログイン ID を使用して、被害者の知らないうちに悪意のあるリクエストを送信します。 Vue は、CSRF 攻撃を防御するためにリクエストに CSRF トークンを追加するための CSRFToken プラグインを提供します。まず CSRFToken プラグインをインストールします:

npm install vue-csrf --save

ログイン後にコピー

次に、Vue インスタンスに CSRFToken プラグインを導入して使用します:

import VueCSRF from 'vue-csrf';

Vue.use(VueCSRF);

new Vue({
    el: '#app',
    mounted() {
        this.$csrf.setToken('csrf_token');
    }
});

ログイン後にコピー

上記のコードは

this.$csrf.setToken# を呼び出します。 Vue インスタンスの作成後 ##CSRF トークンを設定する方法。

XSS 保護

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

ログイン後にコピー

上記のコードは、XSS 攻撃を防ぐために、

userInput

内の HTML コンテンツをエスケープします。要約すると、クロスドメインリクエストとセキュリティ保護に Vue を使用することは複雑ではありません。クロスドメイン要求は、プロキシを構成するか JSONP を使用することによって実装でき、セキュリティ保護は、CSRFToken プラグインをインストールし、v-html ディレクティブを使用することによって実現できます。上記は一般的な例の一部であり、実際の使用における特定のニーズに応じて拡張および調整できます。この記事が、クロスドメインリクエストとセキュリティ保護に Vue を使用するのに役立つことを願っています。

以上がクロスドメインリクエストとセキュリティ保護に Vue を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。