[WIP] ノート埋め込み機能

[kakkokari-gtyih]

Fix #1714

What

• ノート埋め込み機能を追加
• ほかの項目の埋め込み機能の作成に転用できる内部機能（embed向け vite エンドポイント等）を作成

Why

• Misskeyの投稿を埋め込みたい

現状の懸念点

• Content Security Policy (Related to CSPを導入する #9848)
  → Misskey Webと分離（共通部分は最低限にして、本体が読み込まれないように調整。APIリクエストは純粋なfetchを使用し、トークンの取得を回避）
• ノートの埋め込みに iframe-resizer を使用している
  （埋め込む側ではCDNからコードを引っ張るようにしている）
• 埋め込みをカスタマイズできる機能がない（「URLパラメータでカスタマイズ」にすれば、つける必要はないかも…？）
  → URLパラメータでカスタマイズできるようにした
• 長文ノートがフルサイズで表示されるので、大変なことになる

のこり

• メディア表示部分
• MkSparkleに相当する部分の実装

Additional info (optional)

埋め込み

埋め込みコードコピー

生成される埋め込みコード

uuidが生成されて被りができないようにしてある

<iframe src="http://localhost:3000/notes/9d7gxgqey7/embed" title="Misskey Note" style="border:none; width:100%; max-width: 650px; min-height: 300px;" data-msky-embed="1711ffdd-fca3-4144-9dd2-8303df0cfbd4"></iframe>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/iframeResizer.min.js" integrity="sha256-86F9vrEnnd2apFWVo5sNxArab6T8L048fPPkYONBDHY=" crossorigin="anonymous"></script>
<script>iFrameResize({}, 'iframe[data-msky-embed="1711ffdd-fca3-4144-9dd2-8303df0cfbd4"]');</script>

APIリクエストが発生する場面

init.tsでのAPIリクエスト（純粋なfetchオブジェクト使用）

Checklist

• Read the contribution guide
• Test working in a local environment
• (If needed) Update CHANGELOG.md
• (If possible) Add tests

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.37%. Comparing base (8caf2b0) to head (cdd501e).
Report is 1020 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff              @@
##           develop   #10491       +/-   ##
============================================
+ Coverage    79.79%   99.37%   +19.58%     
============================================
  Files          956        4      -952     
  Lines       108800     4476   -104324     
  Branches      8372       58     -8314     
============================================
- Hits         86814     4448    -82366     
+ Misses       21986       28    -21958     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[syuilo]

埋め込みにおいてMisskey Webを呼び出すのは、クリックジャッキング対策が困難であることから現実的ではないと思います。
やるとしたら埋め込み専用の静的なHTMLを何らかの手段(PugなりVueなりReactなり)でSSRする必要があると思います。

[kakkokari-gtyih]

埋め込みにおいてMisskey Webを呼び出すのは、クリックジャッキング対策が困難であることから現実的ではないと思います。 やるとしたら埋め込み専用の静的なHTMLを何らかの手段(PugなりVueなりReactなり)でSSRする必要があると思います。

現在pugによるSSRを行う方向で実装中です

[kakkokari-gtyih]

マージできない

たすけて → できました