こんにちは、YOUTRUST Webエンジニアの寺井(YOUTRUST / Twitter)です。
YOUTRUSTでは募集という機能によってメンバーの求人とカジュアル面談を作成することができるのですが、最近この募集をnoteに埋め込めるように実装しました！
そこで今回は、どのようにして募集をnoteに埋め込めるようにしたかの過程を記事にしたいと思います。
1. 埋め込みイメージ画像の審査
まず前提として、note社は埋め込み(embed)機能の開発ガイドラインを出してくださっているので、基本的にはそのガイドラインに従って進めていきました。
最初にやったことは、YOUTRUSTの募集をnoteに埋め込んだときのイメージ画像の審査です。
YOUTRUSTではnoteへの埋め込み対応前からiframeによるサイトへの埋め込みはできており、その時にコンポーネントを作成していたのでそちらを使いました。PMMがnote社にイメージ画像を提出し、数日後に無事審査が通りました。
2. エンドポイントの実装
次に行ったのはnote上でYOUTRUSTの募集をペーストしたときにアクセスされるエンドポイントの実装です。
noteの埋め込み機能はoEmbedという標準仕様に基づいて設計されており、何らかのリソースをnote上でペーストするとhttps://example.com/○○○?url=埋め込みたいページのURLにリクエストが送信される仕組みになっています。
ここでhttps://example.com/○○○は事前に申請したドメインとパスであり、パスは自由に決められます。
今回は、今後note以外のoEmbedに従った別サービスへの埋め込みにも対応できるように、note個別用のエンドポイントではなくoEmbedに対応していることが分かるエンドポイントにしました。
noteに募集を埋め込んだときの流れを整理すると、
- ユーザーが募集のURL(
https://youtrust.jp/recruitment_posts/2b3e4bb3e05f5b2359f088dbea2402f1)をnoteにペーストする - noteからYOUTRUSTへ
https://youtrust.jp/dummy_about_oembed?url=https://youtrust.jp/recruitment_posts/2b3e4bb3e05f5b2359f088dbea2402f1というリクエストが送られる (ここで、https://youtrust.jp/dummy_about_oembedは架空のエンドポイント名です。) - YOUTRUSTからnoteへ、widthやheightなどの情報を含んだレスポンスを返す
となっています。
また、埋め込もうとしているURLがYOUTRUSTの募集でない場合は404 Not Foundを返すようにしています。
3. X-Frame-Optionsの設定
これで無事noteへの埋め込みの実装が完了したと思ってnote上で動作確認していたところ、埋め込みが表示されていませんでした…！
エラーメッセージを読むと、X-Frame-Optionsがsameoriginとなっているため、同一オリジン以外のページでの表示が許可されていないようでした。
そこで、note詳細ページとnote編集ページでのみ表示を許可するように修正を行いました。
このとき、X-Frame-OptionsのALLOW-FROMディレクティブは廃止されて現在使用が非推奨*1であるため、Content-Security-Policyレスポンスヘッダを利用してnote上での表示を許可するようにしました。
これでnote以外のページでは埋め込みを許可せずに、クリックジャッキングなどの攻撃への耐性を保ちながら募集の埋め込みを実現することができました！
終わりに
いかがでしたでしょうか？
私は外部サービスへの埋め込み機能を実装するのは初めてだったため、今回の実装を通してとても勉強になりました。
この記事が、oEmbedに基づいた外部サービスへの埋め込み実装の役に立つと嬉しいです。
今後は、noteに埋め込んだ募集をアプリで閲覧した際に現状少しだけ見切れてしまっているのでそこを修正し、YOUTRUSTのコンテンツがnoteで当たり前のように使われるようにさらに実装を進めていきたいです。
ぜひカジュアル面談を！
YOUTRUSTの開発に興味がある方は、ぜひお気軽にカジュアル面談にご応募ください！
転職意欲がなくても大丈夫です🙆♂️
お待ちしております！
