アプリの要件上、色々試しましたがこれが一番手っ取り早そうだったので導入しました。
React で a タグなどの HTML タグを有効にする方法です。
プロパティ名は「dangerouslySetInnerHTML」です。
ただし、プロパティ名からも察せられるように、XXS（クロスサイトスクリプティング）の危険性などから、使わないで済むなら使わないほうが良いとのこと。
また、プロパティ名は故意に怖がらせるような名付けをしているそうです。
注意して使う必要があることが分かりやすくていいですね。
ですが、ちゃんと中身のチェックをすればとても便利なプロパティです。
導入には、下記のページを参考にしました。
2つ目の記事では、XXS 対策について詳しく書かれているので、参考になるかと思います。
さて、実装方法ですが、サンプルはこちら。
import React, { Component } from 'react';
class SamplePage extends Component {
render() {
const html = '<a href="[URL]">ページを開く</a>'
return
<div className='main' dangerouslySetInnerHTML={{__html : html}} />;
}
}
変数 html に、有効にしたい HTML タグが含まれた文字列を定義し、それを dangerouslySetInnerHTML で指定した親要素の子要素として追加しています。
基本的な作業としてはこれだけ。
ただし、利用者が入力した情報など、どんな値が入ってくるかわからない場合は、きちんと内容のチェックを行いましょう。
script タグについては XSS の対処はできているとのことですが、a タグや iframe タグを利用する場合については、値は要チェックです。
以上、React で HTML タグを有効にする方法でした。
便利ですが、使用の際には十分ご注意ください。
