チャットアプリの会話のように、テキスト内にURLが貼られた場合にアンカーリンクをつける方法と手順メモ【Vue.js】
Vue.jsで初心者向けに出てくる定番のチャットアプリのように、テキスト内にURLのリンクを貼りたい時があります。
こんな感じでhttps://www.katonobo.com/ 途中でリンクを貼る感じですね
方法
この場合は、3つの処理を行う必要があります。
- テキスト内からURLを正規表現で抽出して、その箇所に「<a href></a>」を付与する
- Vue.jsのテンプレートの「mastache構文{{これ}}」だとそのまま文字で出力されてしまいますので、「v-html」で生のHTMLとして描写する
- ユーザーが入力できるデータに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の詳しい記事はこちら
Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ
手順
１.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）はもともと「消毒する」「無害化する」などの意味を持つ英語である。
自分でサニタイズを全て設定するのは大変なので、sanitize-htmlを利用しました。
素晴らしくまとまっている記事が以下にありました。
こちらを参考にしてください。
