Electron에서 간편하게 SkyWay 사용

Electron에서 SkyWay를 사용할 때의 문제점

Electron에서 SkyWay를 사용하는 경우 문제가 되는 것이 XHR 등에서 요청을 던질 때 요청 헤더에 Origin 필드가 없거나 Origin 필드의 값이 "file://"(WebSocket)이 된다는 것.
SkyWay에서는 (API 키마다) 등록한 도메인에서 밖에 접속을 할 수 없는 구조로 되어 있습니다만, 도메인의 판정을 이 리퀘스트 헤더의 Origin 필드로 실시하고 있기 때문에, 아무런 대처를 하지 않고 SkyWay의 프로그램 을 접한 Electron 앱으로 연결하려고 하면 아무래도 시작됩니다.

한 가지 해결책

이미 Qiita에이 문제의 한 가지 해결책이 올라가고 있습니다.
Electron에서 skyway.io 사용
이 해결 방법은 이전 단계의 XHR 및 WebSocket을 origin 키를 추가/변경할 수 있는 isomorphic-fetch 및 ws로 다시 쓰는 방법을 취하고 있습니다.
저도 비슷한 접근법만 생각해 냈습니다.

더 쉽게 해결하는 방법

조금 전치가 길어졌습니다만, 본제에.
Electron의 GitHub 이슈에 이런 게시물이있었습니다. (스레드의 마지막 게시물)

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