19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Electronで手軽にSkyWayを使う

Last updated at Posted at 2017-11-29

ElectronでSkyWayを使うときの問題点

ElectronでSkyWayを使う場合、問題になるのがXHR等でリクエストを投げる時、リクエストヘッダーにOriginフィールドがないまたはOriginフィールドの値が"file://"(WebSocket)になるということ。
SkyWayでは(APIキーごとに)登録したドメインからしか接続が行えない仕組みとなっていますが、ドメインの判定をこのリクエストヘッダーのOriginフィールドで行っているため、なんの対処をせずにSkyWayのプログラムを組んだElectronアプリで接続しようとするとどうしてもはじかれてしまいます。

1つの解決方法

すでに、Qiitaにこの問題の1つの解決方法が上がっております。
Electronでskyway.ioを使う
こちらの解決方法は、前段のXHR及びWebSocketをoriginキーの追加/変更が行えるisomorphic-fetchおよびwsに書き換えるという方法をとっています。
私も、同様のアプローチしか思いつきませんでした。

もっと手軽に解決する方法

ちょっと前置きが長くなりましたが、本題へ。
ElectronのGitHubのissuesにこんな投稿がありました。(スレッドの最後の投稿)

Originフィールド追加/変更コード
electron.session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
  details.requestHeaders['Origin'] = 'electron://graphiql-app';
  callback({ cancel: false, requestHeaders: details.requestHeaders });
});

おお!?っと思いこのコードを組み込んでみたら、XHR / fetch / WebSocket すべてにおいてOriginフィールド(が追加され)値が、"electron://graphiql-app"になりました。
Originフィールド追加/変更コードは、メインプロセスのコードに追加します。
ただし、アプリの'ready'イベントが発生する前にこのコードを実行すると、'ready'になる前ではダメ的なエラーを吐くため、'ready'イベントハンドラー内にOriginフィールド追加/変更コードを追加します。

//...
app.on('ready', _ => {
    electron.session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
        details.requestHeaders['Origin'] = 'electron://localhost';
        callback({
            cancel: false,
            requestHeaders: details.requestHeaders
        });
    });
    //...
});
//...

これだけで、ElectronでSkyWayが使えるようになりました。

Originフィールドの値

Originフィールドの値は、URI(scheme+host)を設定するのですが、"sss://hhh"の形式でscheme,hostがそれぞれイリーガルなものでなければ自由に設定してもSkyWayからはじかれることはないようです。あと、大文字小文字の区別はしていないようで、SkyWayには"hoge"で登録していて、Originフィールドの値を"HOGE://HOGE"としても接続することができました。

##サンプルアプリ
サンプルアプリのソースをGitHubに上げましたので、cloneしてサクッと検証することができます。
Electron_SkyWay
electron_skyway_ss.png

19
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?