Goで理解するJSONP(JSON with Padding)

こちらのイベントでLTをさせていただきました。
https://kyotogo.connpass.com/event/369601/

以下の記事をコンパクトにしたものです。
https://qiita.com/yamatai12/items/68630a4e6139eee4b681

## まとめ
クロスオリジンリソース共有（CORS）ができる前は同一生成元（オリジン）ポリシーにより、HTTP通信をする際は基本的には同じ生成元（ドメイン）にしかアクセスできないです。
これを解消する為に当時JSONPが生まれました。
基本的には今はCORSがあるのでクロスオリジンの場合はCORSで許可するのが安全だなと思いました。

Transcript

1. Goで理解するJSONP(JSON with Padding) yamatai12 1
2. 自己紹介 yamatai12（Webエンジニア） SNS X(taiyama1212) Qiita(yamatai12) Zenn(yamatai12) 好きなこと ジム 2
3. 背景 こちらの「Web API: The Good Parts」を読んでいてJSONPについて知った為 3
4. なぜJSONPが生まれたのか クロスオリジンリソース共有（CORS）ができる前は同一生成元（オリジン）ポリシー により、HTTP通信をする際は基本的には同じ生成元（ドメイン）にしかアクセスでき ない。 これを解消する為にJSONPが生まれた。 4
5. script要素は同一生成元ポリシーの対象外。 例）CodePen CodePen上の作品を、他のページに<iframe>として埋め込むことができる。 5
6. JSONPの技術はフロントエンドでは以下のように実現する。 <script> function myFunction(data){ console.log(data) } </script> <script src="https://api.test.com/uers/?callback=myFunction"></script> バックエンドはhttps://api.test.com/uers/?callback=myFunction で以下のようにjavascriptファイルを返す。 myFunction({ "id": 42, "name": "Alice" }); 6
7. JSONP対応したAPIを実装する func (s *Server) JSONPHandler(w http.ResponseWriter, r *http.Request) { // Parse the callback parameter callback := r.URL.Query().Get("callback") if callback == "" { callback = "callback" // Default callback name if not provided } // Create the JSON response resp := map[string]string{"message": "Hello JSONP"} jsonResp, err := json.Marshal(resp) if err != nil { http.Error(w, "Failed to marshal response", http.StatusInternalServerError) return } // Write the JSONP response w.Header().Set("Content-Type", "application/javascript") if _, err := w.Write([]byte(callback + "(" + string(jsonResp) + ");")); err != nil { log.Printf("Failed to write response: %v", err) } } 7
8. エンドポイントhttp://localhost:8080/jsonpにリクエストを送ると、jsonpが返される。 curl http://localhost:8080/jsonp callback({"message":"Hello JSONP"}); 実際に作ったAPIは以下。 https://github.com/yamatai12/golang-jsonp 8
9. フロントエンドからfetchでjsonpにリクエストを送る https://codepen.ioのページから異なるオリジンであるhttp://localhost:8080にリクエス トを送ったのでCORSエラーになる。 9
10. フロントエンドからscriptタグを置いて実行する 以下のようにscriptタグを置くことで確かに同一生成元（オリジン）ポリシーを回避で きた。 <script> function myFunction(data){ console.log(data) } </script> <script src="http://localhost:8080/jsonp?callback=myFunction"></script> 以下がconsoleに表示される。 { "message": "Hello JSONP" } 10
11. 注意点 このような同一生成元（オリジン）ポリシーというセキュリティに関する制限を回避 するテクニックは必要な時のみに使用することをお勧めする。 JSONPを利用する場合 JavaScriptを返すAPIが信頼できるか確認する JSONPを公開する場合 外部から利用されて問題ないことを確認する 11
12. まとめ jsonpの技術がわかった クロスオリジンポリシーを回避したいときは外部サイトから埋め込んで表示した い時が例としてあるなと改めて思った JSONPに対応したAPIを使ったり、公開する場合はセキュリティに気をつけないと いけない 12
13. 参考 https://qiita.com/yamatai12/items/68630a4e6139eee4b681 https://memo.ag2works.tokyo/post-4424/ https://www.oreilly.co.jp/books/9784873116860/ https://bob.ippoli.to/archives/2005/12/05/remote-json-jsonp/ https://gihyo.jp/dev/serial/01/crossbrowser-javascript/0011#sec5 13