easy-notion-blog バージョン0.11 では主に表示できなくなっていたブックマークコンポーネントを自前で再実装し、Notionらしい見た目に整えました。
アップデート内容の詳細は下記をご覧ください。
この記事ではブックマークコンポーネントが表示できなくなっていた原因と再実装の内容を簡単に紹介します。
ブックマークコンポーネントには @dhaiwat10/react-link-preview というライブラリを使用していました。
GitHub スター数は100を超えており、多くの人に使われているライブラリです。
easy-notion-blog でブックマークブロックをサポートしたのはバージョン 0.20 で、このときはライブラリは問題なく動いていました。
しかし、最近 Issue で報告があり、ブックマークコンポーネントが正常に動作していないことが発覚しました。
easy-notion-blog ではブックマークコンポーネントを実装してからずっとこの辺りには手を入れていなかったので、すぐにライブラリ側の問題だと推測しました。
ここで一度、ブックマークコンポーネントの挙動を説明します。
Notion API の Bookmark ブロックから与えられる情報は、ブックマークした Web ページの URL のみです。
ブックマークコンポーネントは、与えられたURLを使って Web ページにアクセスし、Webページのタイトルや description や image といったメタ情報を取得し、CSSで綺麗にスタイルして表示します。
ブックマークコンポーネントは React、つまりフロントエンドのコンポーネントです。
つまり、フロントから異なるドメインのURLにリクエストしているということです。
以前書いた「easy-notion-blogにいいねボタンを追加してNotion DBを更新する」を読んだ人はお気付きのはずです。
そう、フロント（ブラウザ）の JavaScript から別ドメインに直接リクエストすることは Same-Origin Policy 違反となるのでできないのでした。
ではなぜこのライブラリはもともと動いていたのでしょうか？
Same-Origin Policy はセキュリティのリスクを減らすための仕組みです。
しかし、場合によっては自社の異なるドメインの Web ページ同士を連携したいというニーズがあるでしょう。
このニーズに応えるために、CORS（Cross-Origin Resource Sharing: オリジン間リソース共有）という仕組みがあります。
CORS を利用するには、リクエストを受け付けるサーバーが CORS に対応している必要があります。
CORS に対応するとは、簡単に言うと、HTMLや画像といったWebページのリソースをレスポンスするサーバーが「私は○○ドメインからのリクエストには返事できますよ」という情報を添えてレスポンスしてあげることになります。
CORS について詳しく知りたい方は下記の MDN ドキュメントをお読みください。
フロントから直接別ドメインにリクエストするには、リクエストに返事をするサーバーの方が CORS に対応している必要があることがわかりました。
ここでひとつ疑問が湧いてきます。
私たちが Notion にブックマークするあらゆるサイト全てが、CORS に対応しているのでしょうか？
前述したように、CORS は限定的に Same-Origin Policy を緩めるものです。
世の中の Web ページの管理者に「私の easy-notion-blog のドメインに対して CORS を許可してください」と言って回れば可能性はあるかもしれません。
が、基本的には未知のドメインに対して CORS を許可するということは、普通はあまりしません。
ではなぜ、react-link-preview ライブラリは CORS を使って別ドメインの Web ページを取得できていたのでしょうか？
それはプロキシサーバーの存在です。
プロキシ(proxy) とは「代理」という意味で、「easy-notion-blogにいいねボタンを追加してNotion DBを更新する」で easy-notion-blog のサーバーサイドを介して Notion API にアクセスしたように、react-link-preview ライブラリはフロントからのリクエストを CORS 対応で受け付け、代理でリクエストするサーバー（プロキシサーバー）を用意していたのです。
ソースコードの下記の箇所で、CORSに対応したプロキシサーバーのURLを指定しているのがわかります。
const proxyLink = 'https://rlp-proxy.herokuapp.com/v2?url=';
そして、最近 react-link-preview ライブラリが動かなくなったのは、ライブラリのユーザーが多くなったことによってリクエストが増え、作者が用意してくれていた上記のプロキシサーバーがダウンしてしまっていたためでした。
作者は下記の Issue で、継続してライブラリを使用したいなら自前でプロキシサーバーを立ててくれと説明しています。
「easy-notion-blogにいいねボタンを追加してNotion DBを更新する」を読んだ人はもう察しているでしょう。
easy-notion-blog はフロントは React でありつつも、サーバーサイドを備えている Next.js です。
すなわち、今回の解決策としても同様に Next.js のサーバーサイドに別ドメインの Web ページへリクエストする API を実装して対応しています。
以上です。この記事ではブックマークコンポーネントが表示できなくなっていた原因と再実装の内容を簡単に紹介しました。
コメントを送る
コメントはブログオーナーのみ閲覧できます