テキスト内のハッシュタグやURLをリンクにする

この記事ではコメントなどのテキスト内の任意の文字列をリンクに変換する方法をサンプルコード付きでご紹介します。
テキスト内の任意の文字列とは具体的に

  • URL
  • ハッシュタグ(#hogehoge)
  • メンション(@hogehoge)

です。
これらの文字列をテキストリンクすることによってクリックしたユーザーに任意の挙動をさせることができます。
また、ユーザビリティが向上します。

後述するサンプルコードは以下のように動作します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • こんにちは。
    これだとクロスサイトスクリプティング(XSS)になりませんか?以下の文字列で攻撃が可能だと思います。単なるtextareaだと外部から攻撃ができせんが、その内容を外部から操作できるとクロスサイトスクリプティング攻撃が可能です。(WAF避けに一部全角にしています)

    <img src=1 onerror=alert(1) >

    • こんにちは、コメントありがとうございます。
      ご指摘の通り、プレビュー表示時にXSSになっていましたので、サニタイジングを追加してXSS対策を追加しました。
      ご指摘いただきましてありがとうございました。

コメントする

目次