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: {
|
||||
nodeIntegrationInWorker: true
|
||||
},
|
||||
useContentSize: true
|
||||
useContentSize: true,
|
||||
show: false
|
||||
}
|
||||
if (process.platform === 'linux') {
|
||||
options.icon = path.join(__dirname, 'icon.png')
|
||||
}
|
||||
|
||||
mainWindow = new BrowserWindow(options)
|
||||
|
||||
mainWindow.on('ready-to-show', () => mainWindow.show())
|
||||
|
||||
mainWindow.loadURL(appUrl)
|
||||
mainWindow.focus()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,165 +2,13 @@
|
|||
|
||||
<head>
|
||||
<title>Electron</title>
|
||||
<style>
|
||||
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: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>
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; img-src 'self'" />
|
||||
<link href="./styles.css" type="text/css" rel="stylesheet" />
|
||||
<link href="./node_modules/octicons/build/build.css" type="text/css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.css">
|
||||
<ul class="versions code">
|
||||
<li class="electron-version"></li>
|
||||
<li class="chrome-version"></li>
|
||||
|
|
@ -236,9 +84,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<script>
|
||||
require('./renderer')
|
||||
</script>
|
||||
<script src="./renderer.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
const {remote, shell} = require('electron')
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const URL = require('url')
|
||||
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('.v8-version').innerText = `v8 v${process.versions.v8}`
|
||||
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/package.json',
|
||||
'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': [
|
||||
'atom/app/atom_content_client.cc',
|
||||
|
|
|
|||
27
package-lock.json
generated
27
package-lock.json
generated
|
|
@ -5,9 +5,9 @@
|
|||
"requires": true,
|
||||
"dependencies": {
|
||||
"@types/node": {
|
||||
"version": "7.0.65",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.65.tgz",
|
||||
"integrity": "sha512-iUdyWWikcQnGvIZnYh5ZxnxeREykndA9+iGdo068NGNutibWknDjmmNMq/8cnS1eaTCcgqJsPsFppw3XJWNlUg==",
|
||||
"version": "7.0.66",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.66.tgz",
|
||||
"integrity": "sha512-W11u5kUNSX2+N6bJ7rPyLW4N98/xzrZg8apRoTwC0zbFjIie//oxgKAvqkQNQ97KVchB49ost74kgzoeDiE+Uw==",
|
||||
"dev": true
|
||||
},
|
||||
"JSONStream": {
|
||||
|
|
@ -2517,9 +2517,9 @@
|
|||
}
|
||||
},
|
||||
"electron-typescript-definitions": {
|
||||
"version": "1.3.4",
|
||||
"resolved": "https://registry.npmjs.org/electron-typescript-definitions/-/electron-typescript-definitions-1.3.4.tgz",
|
||||
"integrity": "sha512-/JI+ifj/Q4wtUTdsheACQS8fBIQ/eGvpLnmWCRpzZHl648gk4PxtsrrrnQYF5ZajSx9SXUTSq5UgfDt9Bq7Bhg==",
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/electron-typescript-definitions/-/electron-typescript-definitions-1.3.5.tgz",
|
||||
"integrity": "sha512-7Ryb7AN0Re63oeX3wHytjX0ScVlDcgj+GSBi6Q8aSNpo4B/sffAgZK6P/b4idqF26hp2jPJWcjBMizUb0VNfAQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/node": "^7.0.18",
|
||||
|
|
@ -6248,6 +6248,15 @@
|
|||
"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": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
|
||||
|
|
@ -9417,9 +9426,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"typescript": {
|
||||
"version": "2.8.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.3.tgz",
|
||||
"integrity": "sha512-K7g15Bb6Ra4lKf7Iq2l/I5/En+hLIHmxWZGq3D4DIRNFxMNV6j2SHSvDOqs2tGd4UvD/fJvrwopzQXjLrT7Itw==",
|
||||
"version": "2.9.2",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz",
|
||||
"integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==",
|
||||
"dev": true
|
||||
},
|
||||
"uc.micro": {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"lint": "^1.1.2",
|
||||
"minimist": "^1.2.0",
|
||||
"nugget": "^2.0.1",
|
||||
"octicons": "^7.3.0",
|
||||
"remark-cli": "^4.0.0",
|
||||
"remark-preset-lint-markdown-style-guide": "^2.1.1",
|
||||
"request": "^2.68.0",
|
||||
|
|
|
|||
|
|
@ -16,14 +16,18 @@ def main():
|
|||
source_files = sys.argv[3:]
|
||||
|
||||
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))
|
||||
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:
|
||||
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))
|
||||
shutil.copy2(source_file, output_path)
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue