Electron에서 iframe 사용하기(?)

Electron에서 iframe 태그를 사용할...수 없다.

이 무슨 시작부터 글 제목이랑 반대되는 이야기를 하는 건가 싶을 텐데, 사실 Electron이 보안상의 문제로 iframe을 이용한 외부 사이트 접근을 기본적으로 차단하고 있다고 보면 된다. 외부 사이트에서 내 로컬에서 돌아가는 Electron 앱의 node.js 환경을 그대로 사용할 수 있게 되기 때문이다.

물론 대안은 있다

iframe 대신 사용할 수 있는 대안으로 Electron은 webview 태그를 지원한다. 별도의 크로미움 프로세스로 동작하는 웹 뷰를 앱 내부에 넣을 수 있게 해주는 마법이다.

그런데 이 webview는 기본적으론 비활성화 상태이기 때문에 우선 설정에서 열어줘야 한다. Electron 앱의 시작 스크립트에서 BrowserWindow 인스턴스를 생성하는 곳에서 설정이 가능하다.

window = new BrowserWindow({
    ...
    webPreferences: {
        ...
        webviewTag: true,
        ...
    }
});

webPreferences 항목의 webviewTag 옵션을 true로 세팅하면 webview를 사용할 수 있게 된다.

이제 원하는 곳에 아래와 같은 webview 태그를 넣어보자.

<webview src="https://foo.bar/page" style="width: 100%; height: 100%"></webview>

이렇게하면 webview를 이용해 iframe과 비슷한 기능을 붙일 수 있다.

구글을 구겨넣은 Electron 앱

참고로 스타일은 필수는 아니다. 하지만 저게 없으면 아마 크기가 작아서 제대로 안 보일 테니까 예시로 넣어놓은 거라 생각하자.

관련된 글들

Electron + Svelte로 데스크톱 앱 개발 시작해보기

Electron의 app 정보를 얻기 위한 삽질기

Electron에서 타이틀 바 숨기기 및 창 이동 문제