かとのぼのマイコード・マイライフ

プログラミング初心者とアプリの個人開発者向けのブログ。たまに銭湯

チャットアプリの会話のように、テキスト内にURLが貼られた場合にアンカーリンクをつける方法と手順メモ【Vue.js】

この記事をシェアする

Vue.jsで初心者向けに出てくる定番のチャットアプリのように、テキスト内にURLのリンクを貼りたい時があります。

 

こんな感じでhttps://www.katonobo.com/ 途中でリンクを貼る感じですね

 方法

この場合は、3つの処理を行う必要があります。

  1. テキスト内からURLを正規表現で抽出して、その箇所に「<a href></a>」を付与する
  2. Vue.jsのテンプレートの「mastache構文{{これ}}」だとそのまま文字で出力されてしまいますので、「v-html」で生のHTMLとして描写する
  3. ユーザーが入力できるデータにv-htmlの処理だと簡単にXSS(Cross-site scripting)されちゃうので、サニタイズの処理をする

1は、テキストからhttpかhttpsで始まるデータを正規表現で抽出し、アンカーリンクをくっつけるという処理です。 

2は、Vue.jsのマスタッシュ構文だとリンクの文字もそのままで出力されるので、マスタッシュでなく「v-html」にします。ただし注意がいるのは、このv-htmlは基本的にユーザーがデータを入力する場合の仕様は推奨されていません。悪意のあるユーザーによってXSSという悪さができてしまうからです。

そのため、3でサニタイズという対策をとります。

 

XSSって何だろうと言う方はこちらを参照

http://gihyo.jp/dev/serial/01/javascript-security/0002

 

Vue.jsとXSSの詳しい記事はこちら

jp.vuejs.org

Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ

 

手順

1.URLの抽出の正規表現

「url 正規表現」で検索すればいくらでも出てきますので、検索して自分の条件にあった正規表現をチョイスしてください。実際のデータの処理はこちらが参考になりました。

JavaScript - 正規表現で文字列中のURLをaタグに置き換えしたい|teratail

 

2.v-html

これは先ほどの

https://jp.vuejs.org/v2/api/#v-html

で書いてあります。

要するに普段なら

<p>{{ hoge }}</p>

としているところを

<p v-html="hoge"></p>

に変えるだけです。

 

3.サニタイズ

サニタイズの説明はこちらです。

サニタイジングとは、テキストデータ上の「&」や「>」など特殊文字を一般的な文字列に変換する処理のことである。サニタイジング(sanitizing)はもともと「消毒する」「無害化する」などの意味を持つ英語である。

サニタイズとは何? Weblio辞書

自分でサニタイズを全て設定するのは大変なので、sanitize-htmlを利用しました。

 素晴らしくまとまっている記事が以下にありました。

Vueのv-htmlでXSSを回避する - Qiita

こちらを参考にしてください。