Electron 사용 방법 및 측정 프로토콜

추상적인

Bonb는 Electron 기반의 브라우저입니다. 소규모 국제 팀에서 개발 중입니다. 오픈 소스이며 github에서 다운로드할 수 있습니다: https://github.com/danielfebrero/bonb-browser

이 기사에서는 Main 또는 Renderer 프로세스와 같은 용어를 사용합니다. Electron에 대한 최소한의 기본 지식이 있다고 가정합니다.

또한 베타 테스터와 공동 창립자를 찾고 있습니다.

Electron Webview 태그 확보

스크립트 미리 로드

렌더러 프로세스에서 태그에 사전 로드 속성을 설정하는 대신 기본 프로세스에서 직접 값을 강제 적용합니다. 공격 벡터를 줄이고 사전 로드 파일 가져오기를 용이하게 합니다.

app.on('web-contents-created', (_event, contents) => {
  contents.on('will-attach-webview', (_wawevent, webPreferences, _params) => {
    webPreferences.preloadURL = `file://${__dirname}/webview-preload.js`;
  });
}); 

팝업 열기

브라우저는 팝업과 새 창을 지원해야 합니다. 우리가 한 일은 adblocker로 URL을 필터링한 후 'new-window' 이벤트를 가로채고 맞춤 메소드 'addBrowser'를 사용하는 것입니다.

렌더러에서:

webview.addEventListener('new-window', (e) => {
    if (!isBlockedUrl(e.url)) addBrowser({ url: e.url });
});

또한 Main 프로세스에서 새 창이 열리는 것을 방지하기 위해 이벤트를 가로채고 기본값을 방지합니다.

app.on('web-contents-created', (_event, contents) => {
  contents.on('new-window', (e) => {
    e.preventDefault();
  });
});

권한 요청

아직 권한 요청(웹캠, 마이크...) 구현을 완료하지 않았습니다. 그동안 다음과 같은 모든 요청을 거부합니다.

session
      .fromPartition('user-partition')
      .setPermissionRequestHandler((webContents, permission, callback) => {
        callback(false);
      });

Electron에서 Google 애널리틱스 구현

기본적으로 Gtag는 앱을 제공하는 데 사용되는 파일 프로토콜 때문에 전자와 호환되지 않습니다. Electron에서 Gtag를 구현하는 방법이 아니라 Google Analytics의 측정 프로토콜을 사용하는 방법을 배우겠습니다.

측정 프로토콜

측정 프로토콜은 https 요청을 통해 분석 데이터 수집을 허용합니다. 속성에 대한 'api_secret'을 생성해야 합니다.

메인 또는 렌더러 프로세스?

CORS 정책으로 인해 렌더러에서 Google Analytics를 구현하는 것은 덜 안전합니다. 렌더러 프로세스에서 이벤트를 수신한 후 기본 프로세스에서 요청을 보내는 것이 좋습니다.

예를 들어 기본 프로세스에서 다음을 수행합니다.

const sessionId = v4();

const makePayload = (eventName: string, params?: Record<string, unknown>) => {
  return {
    client_id: machineIdSync(),
    events: [
      {
        name: eventName,
        params: {
          app_is_packaged: app.isPackaged ? 'true' : 'false',
          engagement_time_msec: 1,
          app_name: 'Bonb',
          app_version: appPackageJson.default.version,
          session_id: sessionId,
          ...params,
        },
      },
    ],
  };
};

export const event = (eventName: string, params?: Record<string, unknown>) => {
  const payload = makePayload(eventName, params);
  axios
    .post(
      'https://google-analytics.com/mp/collect?api_secret=&measurement_id=G-',
      payload
    )
    .catch(console.log);
};


ipcMain.on('analytics', async (_event, args) => {
  event(args.eventName, args.params);
});

그리고 렌더러 프로세스에서:

window.electron.ipcRenderer.sendMessage('analytics', {
    eventName: 'browser_navigate',
 });

사용자 로깅

문서에 지정된 대로 이벤트는 Google 애널리틱스에서 사용자를 트리거하지 않습니다. 측정 프로토콜을 사용할 때 한 명의 사용자를 계산하려면 페이로드에 'engagement_time_msec' 및 'session_id'라는 두 개의 매개변수를 추가해야 합니다.