CodeSenseiCodeSensei
コードレビュー上級約18分

レビュー: XSS脆弱性

typescriptsecurityxssreact

コードレビュー課題

以下のTypeScriptコードをレビューしてください。

背景

ユーザーのコメントを表示するReactコンポーネントです。セキュリティの観点でレビューしてください。

レビュー観点

  • XSS(クロスサイトスクリプティング)脆弱性
  • ユーザー入力のサニタイゼーション
  • dangerouslySetInnerHTMLの使用
  • セキュリティベストプラクティス

あなたの回答

CommentList.tsxtypescript
import React from 'react';
 
interface Comment {
  id: number;
  author: string;
  content: string;
  createdAt: string;
}
 
interface CommentListProps {
  comments: Comment[];
}
 
function CommentList({ comments }: CommentListProps) {
  return (
    <div>
      {comments.map(comment => (
        <div key={comment.id} className="comment">
          <h4>{comment.author}</h4>
          <div dangerouslySetInnerHTML={{ __html: comment.content }} />
          <span>{comment.createdAt}</span>
        </div>
      ))}
    </div>
  );
}
 
export default CommentList;
行番号をクリックしてコメントを追加（Shift+クリックで範囲選択）

最低100文字必要です

0

コメントを追加し、サマリーを100文字以上入力してください

模範解答

回答を送信するか、「表示する」をクリックすると模範解答が表示されます。