refactor: clean up the default app, add CSP (#13437)
* refactor: clean up the default app, add CSP * chore: appease the linter * refactor: make js2asar more generic, dont assume default_app as target
This commit is contained in:
Samuel Attard
GitHub
parent
6045d1218a
commit
12fcac59a2
8 changed files with 226 additions and 170 deletions
|
|
@ -18,13 +18,17 @@ exports.load = (appUrl) => {
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegrationInWorker: true
|
nodeIntegrationInWorker: true
|
||||||
},
|
},
|
||||||
useContentSize: true
|
useContentSize: true,
|
||||||
|
show: false
|
||||||
}
|
}
|
||||||
if (process.platform === 'linux') {
|
if (process.platform === 'linux') {
|
||||||
options.icon = path.join(__dirname, 'icon.png')
|
options.icon = path.join(__dirname, 'icon.png')
|
||||||
}
|
}
|
||||||
|
|
||||||
mainWindow = new BrowserWindow(options)
|
mainWindow = new BrowserWindow(options)
|
||||||
|
|
||||||
|
mainWindow.on('ready-to-show', () => mainWindow.show())
|
||||||
|
|
||||||
mainWindow.loadURL(appUrl)
|
mainWindow.loadURL(appUrl)
|
||||||
mainWindow.focus()
|
mainWindow.focus()
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -2,165 +2,13 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>Electron</title>
|
<title>Electron</title>
|
||||||
<style>
|
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'" />
|
||||||
body {
|
<link href="./styles.css" type="text/css" rel="stylesheet" />
|
||||||
color: #86a5b1;
|
<link href="./node_modules/octicons/build/build.css" type="text/css" rel="stylesheet" />
|
||||||
background-color: #2f3241;
|
|
||||||
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
margin: 15px 30px 30px 30px;
|
|
||||||
background-color: #2f3241;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-stroke {
|
|
||||||
stroke: #9feaf9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.svg-fill {
|
|
||||||
fill: #9feaf9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-middle {
|
|
||||||
vertical-align: middle !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2, h4, p {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-icons {
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hero-icon.loop-3 {
|
|
||||||
transform: translate(79px, 21px);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-icon {
|
|
||||||
fill: #c2f5ff;
|
|
||||||
opacity: 1;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-app {
|
|
||||||
fill: #71abb7;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #86a5b1;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: #c2f5ff;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre, code, .code {
|
|
||||||
font-family: "Menlo", "Lucida Console", monospace;
|
|
||||||
color: #c2f5ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
background-color: #26282E;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
line-height: 2.5;
|
|
||||||
overflow: auto;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 15px;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre.with-prompt:before {
|
|
||||||
content: "$ ";
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
padding: 1px 4px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.versions {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0;
|
|
||||||
float: none;
|
|
||||||
clear: both;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.versions li {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
border-right: 1px solid rgba(194, 245, 255, 0.4);
|
|
||||||
padding: 0 20px;
|
|
||||||
font-size: 13px;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.versions li:last-child {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
margin: 40px 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.linkcol {
|
|
||||||
width: 19%;
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-octicon {
|
|
||||||
display: block;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 42px !important;
|
|
||||||
color: #9feaf9;
|
|
||||||
text-align: center;
|
|
||||||
background-color: rgba(194, 245, 255, 0.1);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-octicon:before {
|
|
||||||
display: block;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.octicon-gist:before { padding-left: 10px; }
|
|
||||||
.octicon-gear:before { padding-left: 5px; }
|
|
||||||
.octicon-star:before { padding-left: 6px; }
|
|
||||||
.octicon-gift:before { padding-left: 2px; }
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
|
|
||||||
<ul class="versions code">
|
<ul class="versions code">
|
||||||
<li class="electron-version"></li>
|
<li class="electron-version"></li>
|
||||||
<li class="chrome-version"></li>
|
<li class="chrome-version"></li>
|
||||||
|
|
@ -236,9 +84,7 @@
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<script>
|
<script src="./renderer.js"></script>
|
||||||
require('./renderer')
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
const {remote, shell} = require('electron')
|
const {remote, shell} = require('electron')
|
||||||
|
const fs = require('fs')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const URL = require('url')
|
const URL = require('url')
|
||||||
const electronPath = path.relative(process.cwd(), remote.process.execPath)
|
const electronPath = path.relative(process.cwd(), remote.process.execPath)
|
||||||
|
|
@ -20,3 +21,32 @@ document.querySelector('.chrome-version').innerText = `Chromium v${process.versi
|
||||||
document.querySelector('.node-version').innerText = `Node v${process.versions.node}`
|
document.querySelector('.node-version').innerText = `Node v${process.versions.node}`
|
||||||
document.querySelector('.v8-version').innerText = `v8 v${process.versions.v8}`
|
document.querySelector('.v8-version').innerText = `v8 v${process.versions.v8}`
|
||||||
document.querySelector('.command-example').innerText = `${electronPath} path-to-app`
|
document.querySelector('.command-example').innerText = `${electronPath} path-to-app`
|
||||||
|
|
||||||
|
function getOcticonSvg (name) {
|
||||||
|
const octiconPath = path.resolve(__dirname, 'node_modules', 'octicons', 'build', 'svg', `${name}.svg`)
|
||||||
|
if (fs.existsSync(octiconPath)) {
|
||||||
|
const content = fs.readFileSync(octiconPath, 'utf8')
|
||||||
|
const div = document.createElement('div')
|
||||||
|
div.innerHTML = content
|
||||||
|
return div
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSVG (element) {
|
||||||
|
for (const cssClass of element.classList) {
|
||||||
|
if (cssClass.startsWith('octicon-')) {
|
||||||
|
const icon = getOcticonSvg(cssClass.substr(8))
|
||||||
|
if (icon) {
|
||||||
|
icon.classList = element.classList
|
||||||
|
element.parentNode.insertBefore(icon, element)
|
||||||
|
element.remove()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const element of document.querySelectorAll('.octicon')) {
|
||||||
|
loadSVG(element)
|
||||||
|
}
|
||||||
|
|
|
||||||
155
default_app/styles.css
Normal file
155
default_app/styles.css
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
body {
|
||||||
|
color: #86a5b1;
|
||||||
|
background-color: #2f3241;
|
||||||
|
font-family: Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 15px 30px 30px 30px;
|
||||||
|
background-color: #2f3241;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-stroke {
|
||||||
|
stroke: #9feaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-fill {
|
||||||
|
fill: #9feaf9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-middle {
|
||||||
|
vertical-align: middle !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2, h4, p {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-weight: normal;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-icons {
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
hero-icon.loop-3 {
|
||||||
|
transform: translate(79px, 21px);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-icon {
|
||||||
|
fill: #c2f5ff;
|
||||||
|
opacity: 1;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-app {
|
||||||
|
fill: #71abb7;
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #86a5b1;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #c2f5ff;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre, code, .code {
|
||||||
|
font-family: "Menlo", "Lucida Console", monospace;
|
||||||
|
color: #c2f5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background-color: #26282E;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
line-height: 2.5;
|
||||||
|
overflow: auto;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 15px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre.with-prompt:before {
|
||||||
|
content: "$ ";
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
padding: 1px 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.versions {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
float: none;
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.versions li {
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
border-right: 1px solid rgba(194, 245, 255, 0.4);
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.versions li:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
margin: 40px 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.linkcol {
|
||||||
|
width: 19%;
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-octicon {
|
||||||
|
display: block;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 42px !important;
|
||||||
|
color: #9feaf9;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(194, 245, 255, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-octicon svg {
|
||||||
|
display: block;
|
||||||
|
padding-top: 20px;
|
||||||
|
height: 42px;
|
||||||
|
width: 42px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.octicon-gist:before { padding-left: 10px; }
|
||||||
|
.octicon-gear:before { padding-left: 5px; }
|
||||||
|
.octicon-star:before { padding-left: 6px; }
|
||||||
|
.octicon-gift:before { padding-left: 2px; }
|
||||||
|
|
@ -98,6 +98,13 @@
|
||||||
'default_app/main.js',
|
'default_app/main.js',
|
||||||
'default_app/package.json',
|
'default_app/package.json',
|
||||||
'default_app/renderer.js',
|
'default_app/renderer.js',
|
||||||
|
'default_app/styles.css',
|
||||||
|
'node_modules/octicons/build/build.css',
|
||||||
|
'node_modules/octicons/build/svg/gist.svg',
|
||||||
|
'node_modules/octicons/build/svg/mark-github.svg',
|
||||||
|
'node_modules/octicons/build/svg/gear.svg',
|
||||||
|
'node_modules/octicons/build/svg/star.svg',
|
||||||
|
'node_modules/octicons/build/svg/gift.svg',
|
||||||
],
|
],
|
||||||
'lib_sources': [
|
'lib_sources': [
|
||||||
'atom/app/atom_content_client.cc',
|
'atom/app/atom_content_client.cc',
|
||||||
|
|
|
||||||
27
package-lock.json
generated
27
package-lock.json
generated
|
|
@ -5,9 +5,9 @@
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "7.0.65",
|
"version": "7.0.66",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.65.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.66.tgz",
|
||||||
"integrity": "sha512-iUdyWWikcQnGvIZnYh5ZxnxeREykndA9+iGdo068NGNutibWknDjmmNMq/8cnS1eaTCcgqJsPsFppw3XJWNlUg==",
|
"integrity": "sha512-W11u5kUNSX2+N6bJ7rPyLW4N98/xzrZg8apRoTwC0zbFjIie//oxgKAvqkQNQ97KVchB49ost74kgzoeDiE+Uw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"JSONStream": {
|
"JSONStream": {
|
||||||
|
|
@ -2517,9 +2517,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"electron-typescript-definitions": {
|
"electron-typescript-definitions": {
|
||||||
"version": "1.3.4",
|
"version": "1.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/electron-typescript-definitions/-/electron-typescript-definitions-1.3.4.tgz",
|
"resolved": "https://registry.npmjs.org/electron-typescript-definitions/-/electron-typescript-definitions-1.3.5.tgz",
|
||||||
"integrity": "sha512-/JI+ifj/Q4wtUTdsheACQS8fBIQ/eGvpLnmWCRpzZHl648gk4PxtsrrrnQYF5ZajSx9SXUTSq5UgfDt9Bq7Bhg==",
|
"integrity": "sha512-7Ryb7AN0Re63oeX3wHytjX0ScVlDcgj+GSBi6Q8aSNpo4B/sffAgZK6P/b4idqF26hp2jPJWcjBMizUb0VNfAQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/node": "^7.0.18",
|
"@types/node": "^7.0.18",
|
||||||
|
|
@ -6248,6 +6248,15 @@
|
||||||
"is-extendable": "^0.1.1"
|
"is-extendable": "^0.1.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"octicons": {
|
||||||
|
"version": "7.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/octicons/-/octicons-7.3.0.tgz",
|
||||||
|
"integrity": "sha512-UVjlkmUL15Ef/7Rd72Io634Bdl61QgSMasAZpvXPoR2XNFj1RelAyhl4QJuR1hBGlPWFDR7KFj2jEzsFax2IUg==",
|
||||||
|
"dev": true,
|
||||||
|
"requires": {
|
||||||
|
"object-assign": "^4.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"on-finished": {
|
"on-finished": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
|
||||||
|
|
@ -9417,9 +9426,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"typescript": {
|
"typescript": {
|
||||||
"version": "2.8.3",
|
"version": "2.9.2",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.3.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
|
||||||
"integrity": "sha512-K7g15Bb6Ra4lKf7Iq2l/I5/En+hLIHmxWZGq3D4DIRNFxMNV6j2SHSvDOqs2tGd4UvD/fJvrwopzQXjLrT7Itw==",
|
"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"uc.micro": {
|
"uc.micro": {
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@
|
||||||
"lint": "^1.1.2",
|
"lint": "^1.1.2",
|
||||||
"minimist": "^1.2.0",
|
"minimist": "^1.2.0",
|
||||||
"nugget": "^2.0.1",
|
"nugget": "^2.0.1",
|
||||||
|
"octicons": "^7.3.0",
|
||||||
"remark-cli": "^4.0.0",
|
"remark-cli": "^4.0.0",
|
||||||
"remark-preset-lint-markdown-style-guide": "^2.1.1",
|
"remark-preset-lint-markdown-style-guide": "^2.1.1",
|
||||||
"request": "^2.68.0",
|
"request": "^2.68.0",
|
||||||
|
|
|
||||||
|
|
@ -16,14 +16,18 @@ def main():
|
||||||
source_files = sys.argv[3:]
|
source_files = sys.argv[3:]
|
||||||
|
|
||||||
output_dir = tempfile.mkdtemp()
|
output_dir = tempfile.mkdtemp()
|
||||||
copy_files(source_files, output_dir)
|
copy_files(source_files, output_dir, folder_name)
|
||||||
call_asar(archive, os.path.join(output_dir, folder_name))
|
call_asar(archive, os.path.join(output_dir, folder_name))
|
||||||
shutil.rmtree(output_dir)
|
shutil.rmtree(output_dir)
|
||||||
|
|
||||||
|
|
||||||
def copy_files(source_files, output_dir):
|
def copy_files(source_files, output_dir, folder_name):
|
||||||
for source_file in source_files:
|
for source_file in source_files:
|
||||||
output_path = os.path.join(output_dir, source_file)
|
output_path = os.path.join(output_dir, source_file)
|
||||||
|
# Files that aren't in the default_app folder need to be put inside
|
||||||
|
# the temp one we are making so they end up in the ASAR
|
||||||
|
if not source_file.startswith(folder_name + "/"):
|
||||||
|
output_path = os.path.join(output_dir, folder_name, source_file)
|
||||||
safe_mkdir(os.path.dirname(output_path))
|
safe_mkdir(os.path.dirname(output_path))
|
||||||
shutil.copy2(source_file, output_path)
|
shutil.copy2(source_file, output_path)
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue