e9e0001ef8
Enable `contextIsolation` in Electron to securely expose a limited set of Node.js APIs to the renderer process. It: 1. Isolates renderer and main process contexts. It ensures that the powerful main process functions aren't directly accessible from renderer process(es), adding a security boundary. 2. Mitigates remote exploitation risks. By isolating contexts, potential malicious code injections in the renderer can't directly reach and compromise the main process. 3. Reduces attack surface. 4. Protect against prototype pollution: It prevents tampering of JavaScript object prototypes in one context from affecting another context, improving app reliability and security. Supporting changes include: - Extract environment and system operations classes to the infrastructure layer. This removes node dependencies from core domain and application code. - Introduce `ISystemOperations` to encapsulate OS interactions. Use it from `CodeRunner` to isolate node API usage. - Add a preloader script to inject validated environment variables into renderer context. This keeps Electron integration details encapsulated. - Add new sanity check to fail fast on issues with preloader injected variables. - Improve test coverage of runtime sanity checks and environment components. Move validation logic into separate classes for Single Responsibility. - Improve absent value test case generation.
69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<template>
|
|
<div id="app">
|
|
<div class="app__wrapper">
|
|
<TheHeader class="app__row" />
|
|
<TheSearchBar class="app__row" />
|
|
<TheScriptArea class="app__row" />
|
|
<TheCodeButtons class="app__row app__code-buttons" />
|
|
<TheFooter />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
import TheHeader from '@/presentation/components/TheHeader.vue';
|
|
import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
|
|
import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
|
|
import TheScriptArea from '@/presentation/components/Scripts/TheScriptArea.vue';
|
|
import TheSearchBar from '@/presentation/components/TheSearchBar.vue';
|
|
import { buildContext } from '@/application/Context/ApplicationContextFactory';
|
|
import { validateRuntimeSanity } from '@/infrastructure/RuntimeSanity/SanityChecks';
|
|
import { provideDependencies } from '../bootstrapping/DependencyProvider';
|
|
|
|
const singletonAppContext = await buildContext();
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
TheHeader,
|
|
TheCodeButtons,
|
|
TheScriptArea,
|
|
TheSearchBar,
|
|
TheFooter,
|
|
},
|
|
setup() {
|
|
provideDependencies(singletonAppContext); // In Vue 3.0 we can move it to main.ts
|
|
validateRuntimeSanity({
|
|
validateMetadata: true,
|
|
validateEnvironment: true,
|
|
});
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use "@/presentation/assets/styles/main" as *;
|
|
|
|
#app {
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
max-width: 1600px;
|
|
.app__wrapper {
|
|
margin: 0% 2% 0% 2%;
|
|
background-color: $color-surface;
|
|
color: $color-on-surface;
|
|
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
|
|
padding: 2%;
|
|
display:flex;
|
|
flex-direction: column;
|
|
.app__row {
|
|
margin-bottom: 10px;
|
|
}
|
|
.app__code-buttons {
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|