ReactJS - Ajaxコールで返されたときにキャリッジリターンを正しくレンダリングする方法

Question

ReactJSでは、textarea controlでユーザーが提出する可能性があるキャリッジリターンをレンダリングする方法は可能ですか？キャリッジリターンを含むコンテンツは、\r\n文字を<br>などに変換する必要があるAPIを呼び出すAjax呼び出しによって取得されます。そして、私はコンテンツがレンダリングされるべきであるdiv要素を持っています。

{ 
    "Comment" : "Some stuff followed by line breaks<br/><br/><br/><br/>And more stuff.", 
} 

と

{ 
    "Comment" : "Some stuff followed by line breaks\n\n\nAnd more stuff.", 
} 

しかし、その代わりに、ブラウザで改行をレンダリングする、それが最初のケースと\ nの文字などでプレーンテキストとして、BRタグをレンダリング：私は、次のAjaxレスポンスを試してみました2番目のケースのスペース。

ここで推奨されるアプローチは何ですか？私は怖いのdangerouslySetInnerHTMLのプロパティをクリアする必要があります推測している？例えば以下は、実際に動作しますが、改行を処理するより安全な方法がなければなりません。

<div className="comment-text" dangerouslySetInnerHTML={{__html: comment.Comment}}></div> 

Answer 1

dangerouslySetInnerHTMLです。名前はそれを使用すると、XSS攻撃のためのリスクが伴うので、怖いことをを意味しますが、基本的にそれはあなたがユーザー入力サニタイズする必要があるだけのリマインダーです（あなたがとにかく行う必要があります！）

XSS攻撃を確認するにはdangerouslySetInnerHTMLを使用しているアクションで、ユーザーがそのテキストでコメントを保存した試してみてください。

Just an innocent comment.... <script>alert("XSS!!!")</script>

このコメントは、実際に警告ポップアップを作成することを確認するために驚くかもしれません。誰かがコメントを見たときに、さらに悪意のあるユーザーがJSを挿入してウイルスをダウンロードする可能性があります。明らかにそれを許すことはできません。

しかし、XSSからの保護はかなり簡単です。サニタイズはサーバー側で行う必要がありますが、考えられるサーバー側のセットアップに対してこの正確なタスクを実行できるパッケージがたくさんあります。ここで

は、たとえば、Railsのための良いパッケージの例です：https://github.com/rgrove/sanitize

はちょうどあなたが「ホワイトリスト」消毒方法ではなく、「ブラックリスト」1を使用して選ぶ消毒何れで確認してください。

Answer 2

あなたはDOMを使用している場合は、テキストを追加するinnerHTMLプロパティを使用していることを確認します。しかし、反応の世界では、もっと好都合です。https://www.npmjs.com/package/html-to-react

また、ブラウザはHTMLのみを認識し、\ nは改行として解釈しません。レンダリングする前にそれを<br/>に置き換える必要があります。