/electron-toolkit

Tools to make launching Electron apps easier

Primary LanguageVueOtherNOASSERTION

Electron Toolkit

"Command Line Gui Tools" to make launching Electron apps easier, faster and fun

  • GUI for electron-builder - package and build your app
  • App Icon Generator - generate app icons for all platforms
    • .ico for Windows
    • .icns for macOS
    • .png for Linux
  • Screen Capturer - create assets for mockups, store listings, online marketing...
    • Take screenshots
    • Record videos
  • Website Builder - go public and launch a website for your app
    • Lean template for desktop apps
    • Responsive design
    • Custom styling options


Screenshots


Overview
alt text

Electron Builder GUI Icon Generator
alt text alt text

Screen Capturer Website Builder
alt text alt text

Getting Started

  1. Install electron-toolkit inside your Electron app directory
npm install electron-toolkit --save-dev
  1. Add the electron-toolkit script to your package.json file
{
  ...
  "scripts": {
    "electron-toolkit": "electron ./node_modules/electron-toolkit"
  }
}
  1. Make sure Electron and Electron Builder are installed.
npm install electron --save-dev
npm install electron-builder --save-dev
  1. Now you can run electron-toolkit directly from your project directory
npm run electron-toolkit

Supported Platforms

  • Windows (32/64 bit)
  • macOS
  • Linux

Usage

See Wiki


Security Checklist

  • Only display secure (https) content:

<webview :src="'https://' + url" :preload="preloadScript" ></webview>

  • Disable the Node integration in all renderers that display remote content (setting nodeIntegration to false in webPreferences)
  • Enable context isolation in all renderers that display remote content (setting contextIsolation to true in webPreferences)
  • Use ses.setPermissionRequestHandler() in all sessions that load remote content
  • Do not disable webSecurity. Disabling it will disable the same-origin policy.
  • Define a Content-Security-Policy , and use restrictive rules (i.e. script-src 'self')
  • Override and disable eval , which allows strings to be executed as code.
  • Do not set allowRunningInsecureContent to true.
  • Do not enable experimentalFeatures or experimentalCanvasFeatures unless you know what you're doing.
  • Do not use blinkFeatures unless you know what you're doing.
  • WebViews: Do not add the nodeintegration attribute.
  • WebViews: Do not use disablewebsecurity
  • WebViews: Do not use allowpopups
  • WebViews: Do not use insertCSS or executeJavaScript with remote CSS/JS.
  • WebViews: Verify the options and params of all <webview> tags before they get attached using the will-attach-webview event
app.on('web-contents-created', (event, contents) => {
  contents.on('will-attach-webview', (event, webPreferences, params) => {
    // Strip away preload scripts if unused or verify their location is legitimate
    delete webPreferences.preload
    delete webPreferences.preloadURL

    // Disable node integration
    webPreferences.nodeIntegration = false

    // Verify URL being loaded
    if (!params.src.startsWith('https://yourapp.com/')) {
      event.preventDefault()
    }
  })
})

Want to contribute?

We welcome and encourage all sorts of contributions that help us make this project more awesome. Contact me philipplgh@gmail.com.


License

  1. License for electron-toolkit

    MIT License
    Copyright (c) 2017 Philipp Langhans & Alina Sinelnikova / Hytag,inc

  2. License for website template (inside Website Builder)

    Copyright (c) 2017 Hytag, inc

    The License grants you, free of charge, an ongoing, non-exclusive, worldwide license to use, copy, modify, manipulate the template to create a website for your commercial or non-commercial end product. You are not allowed to sublicense, and/or sell the template.