feat: 対応外の投稿を iframe で埋込む（#157） (#199)

#157

#157 対応外の投稿を iframe で埋込む

Co-authored-by: miteruzo <miteruzo@naver.com>
Reviewed-on: https://git.miteruzo.com/miteruzo/btrc-hub/pulls/199

frontend/src/components/PostEmbed.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import YoutubeEmbed from 'react-youtube'
 
 import NicoViewer from '@/components/NicoViewer'
@@ -39,10 +40,28 @@ export default (({ post }: Props) => {
     }
   }
 
+  const [framed, setFramed] = useState (false)
+
   return (
-      <a href={post.url} target="_blank">
-	<img src={post.thumbnailBase || post.thumbnail}
-	     alt={post.url}
-	     className="mb-4 w-full"/>
-      </a>)
+      <>
+	{framed
+	 ? (
+	    <iframe
+		src={post.url}
+		title={post.title || post.url}
+		width={640}
+		height={360}/>)
+	 : (
+	    <div>
+	      <a href="#" onClick={e => {
+		e.preventDefault ()
+		setFramed (confirm ('未確認の外部ページを表示します。\n'
+				    + '悪意のあるスクリプトが実行される可能性があります。\n'
+				    + '表示しますか?'))
+		return
+	      }}>
+		外部ページを表示
+	      </a>
+	    </div>)}
+      </>)
 }) satisfies FC<Props>