Vue.js でカスタム ディレクティブを使用して URL クリーナーを作成する方法

カスタム ディレクティブの作成方法を学ぶ: 安全な URL サニタイズ ディレクティブを構築する

始まり

Vue.js には、一般的なユースケースにとって重要なデフォルトのディレクティブのセットが付属しています。これらのデフォルトのディレクティブには、v-for、v-html、および v-text が含まれます。さらに、Vue.js では、特定のニーズを満たすためにカスタム ディレクティブを登録する機能も提供されます。

カスタム ディレクティブにはライフサイクル フックが含まれることが多く、「マウント」、「更新」、「前アンマウント」などの段階で動作できます。これらのフックは、アプリケーション ディレクティブの要素とそれに関連付けられた値を受け取り、入力に対して特定のアクションを実行できるようにします。

さらに、「onUpdated」や「beforeUnmount」などの特定のライフサイクルフックに基づいて関数を選択的にトリガーできます。

登録手順をカスタマイズする方法を確認する

指示は 3 つの異なる方法で登録できます。これらは、スクリプト セットアップの内部 (setup 関数) またはセットアップ関数の外部 (setup 関数) に登録できます。また、アプリケーションの初期化中にグローバルに登録することもできます。

1. 機能内部登録

Vue.js では、キャメルケースで宣言され、接頭辞「v」が付いた変数は、ディレクティブとして自動的に認識されます。上の例では、バインドされた要素を受け入れ、指定された値に基づいてテキストの色を設定する v-text-color ディレクティブを定義しました。

<script setup>
import { ref } from 'vue'

const msg = ref('Hello World!')

const vTextColor = {
  mounted: (el,binding) => el.style.color = binding.value
}
</script>

<template>
  <h1 v-text-color="`green`">{
    
    { msg }}</h1>
  <input v-model="msg">
</template>

2. 機能外部登録

ディレクティブ API オプションを使用して、セットアップ関数の外でディレクティブを登録することもできます。以下のコード スニペットは、これを実現する方法を示しています。

export default {
  setup() {
    /*...*/
  },
  directives: {
    // enables v-textcolor in template
    textcolor: {
      /* ... */
    }
  }
}

3. グローバル登録

アプリケーション全体で頻繁に再利用する予定のディレクティブについては、次のようにグローバルに登録することをお勧めします。

const app = createApp({})

// make v-textcolor usable in all components
app.directive('textcolor', {
  /* ... */
})

カスタム URL サニタイズ ディレクティブを作成する

Vue.js にカスタム ディレクティブを登録するさまざまな方法を調べたので、提供された URL を安全にサニタイズするディレクティブの作成に進みましょう。車輪の再発明を避け、URL 解析の堅牢性を確保するために、@braintree/sanitize-url パッケージを利用します。このパッケージは広範囲にテストされており、開発者の間で広く採用されており、積極的にメンテナンスされています。

基本的に、このディレクティブの目的は、バインドされた要素の値 (URL) を取得し、それをサニタイズしてセキュリティを確保することです。好みのパッケージ マネージャーに応じて、「@braintree/sanitize-url」をインストールできます。この例では npm を使用します。

npm install -S @braintree/sanitize-url

安全でない URL

以下は、駆除の対象となる安全でない URL の例です。

http://example.com/login?redirect=http://malicious-site.com/attack?payload=<script>alert('XSS Attack');</script>

この例では:

• URL は、リダイレクトされたクエリ パラメータを含むログイン ページ (http://example.com/login) のように見えます。

• リダイレクト パラメーターは、悪意のある可能性のある Web サイト (http://malicious-site.com/攻撃) を指しており、クロスサイト スクリプティング攻撃 (XSS) を実行する可能性のあるペイロードが含まれています。

カスタム URL クリーナー

<script setup>
import { ref } from 'vue'
import { sanitizeUrl } from '@braintree/sanitize-url'

const  msg = ref('Hello World!')
const url = ref('http://example.com/login?redirect=http://malicious-site.com/attack?payload=<script>alert('XSS Attack');</script>
')

const vSafeUrl = {
  mounted:(el,binding)=> {
    el.setAttribute('href', sanitizeUrl(binding.value))
    }
}
</script>

<template>
  <h1>{
    
    { msg }}</h1>
  <a v-safe-url="`url`">Safe url</a>
</template>

仕上げる

Vue.js のカスタム ディレクティブを調べると、アプリケーションを特定のニーズに合わせて調整する際のその優れた適応性と有用性がわかります。この記事では、さまざまなディレクティブの登録方法についても検討し、範囲と再利用性を定義する際の Vue の柔軟性を示しました。

記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。より多くの人が困っている人に届けるために、「いいね！」をして転送してください。同時に、フロントエンド テクノロジーについてさらに知識を深めたい場合は、私をフォローしてください。あなたのサポートが共有の最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。