LLM注意
Claude Opus 4.6のチャットさんとの雑談まとめです。
OGP的なやつを取得して埋め込むことの難しさ
かつて手打ちサイトをHTMLとCSSだけで頑張っていた時に、どうしても実現できなくて泣いたのが、「SNSみたいに、埋め込んだサイトのOGP的なやつを表示する」機能。
確か当時は、それを取得して一定の形式の不変なコードとして吐いてくれるサイトを見つけて何度かしたのだけれど、都度都度の取得ではなくてその瞬間のOGPを取得するだけだから、当時のOGP魚拓をサイトで表示しているということに……。
というのをクロードさんに伝えてみたら、
OGP取得、メモアプリやブックマーク系で「あったら最高」だけど実装すると地味に厄介な機能の代表格。
って返ってきました。
やっぱり地味に実装が面倒な機能なんだ……！
CORS（Cross-Origin Resource Sharing）の壁
現在勉強中のJavaScript、大変に便利で万能な言語らしいのですが、万能すぎて悪用されたときが恐ろしくヤバいとのこと。
ブラウザ内にあるクッキーやログイン情報を、別のサイトから無断でくすねて、閲覧者の意図しない形で勝手に利用して悪さをする、これがCSRF（クロスサイトリクエストフォージェリ）と呼ばれる攻撃の基本構造。
なので、サーバーではなくクライアント（ブラウザ）から接続しているとき、そのクライアントはJavaScriptの動きを見張っているのだそう。
具体的には、「お前、どこの所属？ 勝手に他のお宅に情報盗みに行ってない？」ってやつを。
JavaScriptの所属
オリジン と呼ぶらしいJavaScriptの所属確認は、 プロトコル＋ドメイン＋ポートが完全一致 しているかどうか。
で、このオリジンの外（別ドメイン、別ポートなど）に影響を及ぼそうとすると、クライアントから「余計なこと禁止」とエラーを出されるのだそう。
1つのドメインの背後で複数のサーバーに分業していても大丈夫ではあるけれど、サブドメインは別ドメイン。
Fediverseで自鯖立ててたらよく分かるかもしれない、この感覚。
オブジェクトストレージと本体が物理的に別鯖で動いていても同じサービス、でもサブドメインでは別サービスやってる場合があるね！というやつですね。
別のオリジンだけど、指定したこのオリジンから来たJavaScriptには情報共有をしても良いよ！と許可を見せること、これがCORS（Cross-Origin Resource Sharing）の仕組み。
なお、 別ポートも別オリジン扱い なのがバグの原因になりやすいポイントなのだとか。
クロードさん曰く、
ローカル開発でフロントとバックエンドを別ポートで動かしてる時にCORSエラーが出るやつ、ほぼこれが原因です。
まだ実感湧かないけれど、よく見る可能性のあるバグとして記憶の片隅に放り込めたら良い、な……！
OGP取得関連のよくある流れ
たとえクライアントから動かすとCORSエラーになったとしても、サーバー同士だと比較的スムーズに情報のやり取りができることが多いため、サーバー（自前サーバーかOGP取得を代行してくれるAPIサービス）を間に仲介人として挟むのが、よくあるOGP取得のギミックだそうな。
これだから好奇心ってやつは！
というわけで、本来まだまだ先で学ぶ可能性のあった話について、メモが爆誕しました。
OGP取得って実はJavaScriptの中でもちょっと応用入る話だったのかもしれません。