バーチャル MixJuice で Kidspod のプログラムを取得する

3856 ワード
CORS IchigoJam CORS テキストリンク

この記事は、IchigoJam Advent Calendar 2020 の 7 日目です。

(2020年12月10日 加筆修正)

登場人物

IchigoJam web で利用できる「バーチャル MixJuice」については、今年のアドベントカレンダー 1 日目の記事で詳しく書かれています。

問題

2020年12月現在、以下の理由により IchigoJam web のバーチャル MixJuice で Kidspod のプログラムを取得できません。

  • Kidspod のウェブサーバが http しかサポートしていない
    • https な IchigoJam web からアクセスするのは Mixed content となり、昨今のブラウザはこのようなアクセスを拒否するようになっています。
  • Kidspod のウェブサーバが Access-Control-Allow-Origin の設定をしていない
    • 昨今のブラウザは、異なるオリジンにあるリソースへのアクセスを基本的に拒否するようになっています。
    • 福野氏も、この記事やこの記事で CORS の設定が必要なことに言及しています。
    • CORS とは

解決策

CORS Anywhere

CORS Anywhere is a NodeJS proxy which adds CORS headers to the proxied request.

これを組み込んだウェブサーバのデモが Heroku 上で動作しており、このサーバを経由して Kidspod にアクセスすることで、上述の問題を二つともクリアできます。

Usage にあるように、ウェブサイトの URL https://cors-anywhere.herokuapp.com/ の末尾に本来アクセスしたい URL を付け足すだけで良くて、例えば、Kidspod のプログラム参照用 URL が http://kidspod.club/mj/976 であるならば、アクセスすべき URL は https://cors-anywhere.herokuapp.com/http://kidspod.club/mj/976 となります。
これを踏まえ、IchigoJam web で以下のように入力することで、Kidspod のプログラムを取得できます。(MixJuice のチェックを入れておくのを忘れずに)

?"MJ GETS cors-anywhere.herokuapp.com/http://kidspod.club/mj/976"

実行結果はこんな感じです。

あくまでこのサーバはデモとして提供されているものなので、ちょっと試す分には問題ないでしょうけど、常識の範囲内で利用し、やりすぎに注意しましょう。
あと、第三者のサーバを経由する以上、アクセスした URL などがログとして記録されている可能性も否定できないので、その辺りのリスクを承知の上で試してください。

要望

IchigoJam web に CORS Anywhere を組み込んでくれれば…などというのは筋違いで、そもそも昨今のセキュリティ事情からブラウザがこのような挙動をするようになったわけで、この解決策はその流れに逆らっていると言えます。
まずは Kidspod がさっさと https に対応し、fukuno.jig.jp からのアクセスを許可する設定をするのを期待してます。

追加情報 (2020年12月10日 追記)

イチゴジャム レシピが管理運用している MixJuice 短縮 URL サービスにて、Kidspod のプログラムを取得するための対応が入ったようです。Kidspod の作品 ID が分かっていれば、https://15jm.li/K/(作品 ID) にアクセスすることでプログラムを取得できます。
具体的には IchigoJam web で以下のように入力します。

?"MJ GETS 15jm.li/K/976"