mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
2 months ago
9 changed files with 632 additions and 0 deletions
@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Secure Script Executor</title> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.js"></script> |
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> |
||||
<style> |
||||
body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
font-family: 'Arial', sans-serif; |
||||
} |
||||
#editor, #output { |
||||
height: calc(100vh - 7rem); |
||||
} |
||||
.console-line { |
||||
padding: 2px 5px; |
||||
border-bottom: 1px solid #e2e8f0; |
||||
} |
||||
.log { color: #2d3748; } |
||||
.error { color: #e53e3e; } |
||||
.warn { color: #d69e2e; } |
||||
</style> |
||||
</head> |
||||
<body class="bg-gray-100"> |
||||
<nav class="bg-blue-600 text-white p-4 flex justify-between items-center"> |
||||
<h1 class="text-xl font-bold">Secure Script Executor</h1> |
||||
<button onclick="runScript()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105"> |
||||
Run Script |
||||
</button> |
||||
</nav> |
||||
<div class="flex flex-1 overflow-hidden"> |
||||
<div id="editor" class="w-1/2 border-r border-gray-300"></div> |
||||
<div class="w-1/2 flex flex-col"> |
||||
<div class="bg-gray-200 p-2 font-bold">Console Output</div> |
||||
<div id="output" class="flex-1 overflow-auto bg-white p-2"></div> |
||||
</div> |
||||
</div> |
||||
<footer class="bg-gray-200 p-2 text-center text-sm text-gray-600"> |
||||
Secure Script Executor © 2023 |
||||
</footer> |
||||
|
||||
<script> |
||||
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs' } }) |
||||
require(['vs/editor/editor.main'], function () { |
||||
window.editor = monaco.editor.create(document.getElementById('editor'), { |
||||
value: 'console.log("Hello World");', |
||||
language: 'javascript', |
||||
theme: 'vs-dark', |
||||
automaticLayout: true, |
||||
minimap: { enabled: false }, |
||||
}) |
||||
}) |
||||
|
||||
let scriptWorker |
||||
|
||||
function createWorker() { |
||||
const workerCode = ` |
||||
'use strict'; |
||||
// Security restrictions |
||||
const restrictedGlobals = ['window', 'document', 'location', 'top', 'parent', 'frames', 'opener']; |
||||
restrictedGlobals.forEach(name => { |
||||
Object.defineProperty(self, name, { |
||||
get: () => { |
||||
throw new ReferenceError(name + ' is not defined'); |
||||
}, |
||||
configurable: false |
||||
}); |
||||
}); |
||||
|
||||
// Restricted access to APIs |
||||
self.XMLHttpRequest = undefined; |
||||
self.fetch = undefined; |
||||
self.WebSocket = undefined; |
||||
self.localStorage = undefined; |
||||
self.sessionStorage = undefined; |
||||
|
||||
self.console = { |
||||
log: (...args) => self.postMessage({type: 'log', message: args.join(' ')}), |
||||
error: (...args) => self.postMessage({type: 'error', message: args.join(' ')}), |
||||
warn: (...args) => self.postMessage({type: 'warn', message: args.join(' ')}) |
||||
}; |
||||
|
||||
// Importing NocoDB SDK in the worker |
||||
import { Api } from 'https://cdn.jsdelivr.net/npm/nocodb-sdk@0.255.2/+esm'; |
||||
|
||||
// Initialize NocoDB SDK in the worker |
||||
const api = new Api({ |
||||
baseURL: 'http://localhost:8080', |
||||
axiosConfig: { |
||||
headers: { |
||||
'xc-auth': 'undefined', |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
self.onmessage = function(event) { |
||||
const script = event.data.script; |
||||
try { |
||||
eval(script); |
||||
} catch (error) { |
||||
self.console.error(error.toString()); |
||||
} |
||||
self.postMessage({type: 'done'}); |
||||
}; |
||||
` |
||||
|
||||
const blob = new Blob([workerCode], { type: 'application/javascript' }) |
||||
return new Worker(URL.createObjectURL(blob), { type: 'module' }) |
||||
} |
||||
|
||||
function runScript() { |
||||
const script = window.editor.getValue() |
||||
const output = document.getElementById('output') |
||||
output.innerHTML = '' |
||||
|
||||
if (scriptWorker) { |
||||
scriptWorker.terminate() |
||||
} |
||||
|
||||
scriptWorker = createWorker() |
||||
|
||||
scriptWorker.onmessage = function (event) { |
||||
const { type, message } = event.data |
||||
if (type === 'done') { |
||||
scriptWorker.terminate() |
||||
scriptWorker = null |
||||
} else { |
||||
const line = document.createElement('div') |
||||
line.textContent = message |
||||
line.className = `console-line ${type}` |
||||
output.appendChild(line) |
||||
} |
||||
} |
||||
|
||||
scriptWorker.onerror = function (error) { |
||||
const line = document.createElement('div') |
||||
line.textContent = `Worker error: ${error.message}` |
||||
line.className = 'console-line error' |
||||
output.appendChild(line) |
||||
scriptWorker.terminate() |
||||
scriptWorker = null |
||||
} |
||||
|
||||
scriptWorker.postMessage({ script }) |
||||
} |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,148 @@
|
||||
<script setup lang="ts"> |
||||
import { loadPyodide } from 'pyodide' |
||||
|
||||
const props = defineProps<{ |
||||
modalVisible: boolean |
||||
}>() |
||||
|
||||
const emits = defineEmits(['update:modalVisible']) |
||||
|
||||
const modalVisible = useVModel(props, 'modalVisible', emits) |
||||
|
||||
const { execScript } = useScripts() |
||||
|
||||
const script = ref('') |
||||
|
||||
const closeModel = () => { |
||||
modalVisible.value = false |
||||
} |
||||
|
||||
const loading = ref(false) |
||||
|
||||
const response = ref('') |
||||
|
||||
const executeJSScript = async () => { |
||||
loading.value = true |
||||
try { |
||||
const res = await execScript(script.value) |
||||
response.value = JSON.stringify(res, null, 2) |
||||
} catch (e) { |
||||
response.value = e.message |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
const executePythonScript = async () => { |
||||
loading.value = true |
||||
try { |
||||
const pyodide = await loadPyodide() |
||||
const res = await pyodide.runPythonAsync(script.value) |
||||
response.value = JSON.stringify(res, null, 2) |
||||
} catch (e) { |
||||
response.value = e.message |
||||
} finally { |
||||
loading.value = false |
||||
} |
||||
} |
||||
|
||||
const supportedDocs = [ |
||||
{ |
||||
title: 'Scripting Guide', |
||||
href: 'https://docs.nocodb.com/docs/scripting-guide', |
||||
}, |
||||
{ |
||||
title: 'Scripting API', |
||||
href: 'https://docs.nocodb.com/docs/scripting-api', |
||||
}, |
||||
{ |
||||
title: 'Scripting Examples', |
||||
href: 'https://docs.nocodb.com/docs/scripting-examples', |
||||
}, |
||||
] |
||||
</script> |
||||
|
||||
<template> |
||||
<NcModal v-model:visible="modalVisible" :show-separator="true" size="large" wrap-class-name="nc-modal-scripts-create-edit"> |
||||
<template #header> |
||||
<div class="flex w-full items-center p-4 justify-between"> |
||||
<div class="flex items-center gap-3"> |
||||
<GeneralIcon class="text-gray-900 text-2xl" icon="ncScript" /> |
||||
<span class="text-gray-900 font-semibold text-xl"> Scripts Editor </span> |
||||
</div> |
||||
|
||||
<div class="flex justify-end items-center gap-3"> |
||||
<NcButton :loading="loading" type="primary" size="small" data-testid="nc-test-script" @click="executeJSScript"> |
||||
Test JS Script |
||||
</NcButton> |
||||
|
||||
<NcButton :loading="loading" type="primary" size="small" data-testid="nc-test-script" @click="executePythonScript"> |
||||
Test Python Script |
||||
</NcButton> |
||||
|
||||
<NcButton type="text" size="small" data-testid="nc-close-scripts-modal" @click.stop="closeModel"> |
||||
<GeneralIcon icon="close" /> |
||||
</NcButton> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<div class="flex bg-white rounded-b-2xl h-[calc(100%_-_66px)]"> |
||||
<div |
||||
ref="containerElem" |
||||
class="h-full flex-1 flex flex-col gap-8 overflow-y-auto scroll-smooth nc-scrollbar-thin px-12 py-6 mx-auto" |
||||
> |
||||
<iframe |
||||
src="http://localhost:8080/api/v2/scripts" |
||||
class="iframe-container" |
||||
sandbox="allow-scripts allow-forms allow-same-origin allow-modals allow-popups allow-presentation" |
||||
allow="geolocation *; microphone *; camera *; midi *; encrypted-media *;" |
||||
referrerpolicy="no-referrer" |
||||
loading="lazy" |
||||
importance="high" |
||||
height="100%" |
||||
frameborder="0" |
||||
scrolling="no" |
||||
></iframe> |
||||
</div> |
||||
|
||||
<div class="h-full bg-gray-50 border-l-1 w-80 p-5 rounded-br-2xl border-gray-200"> |
||||
<div class="w-full flex flex-col gap-3"> |
||||
<h2 class="text-sm text-gray-700 font-semibold !my-0">{{ $t('labels.supportDocs') }}</h2> |
||||
<div> |
||||
<div v-for="(doc, idx) of supportedDocs" :key="idx" class="flex items-center gap-1"> |
||||
<div class="h-7 w-7 flex items-center justify-center"> |
||||
<GeneralIcon icon="bookOpen" class="flex-none w-4 h-4 text-gray-500" /> |
||||
</div> |
||||
<NuxtLink |
||||
:href="doc.href" |
||||
target="_blank" |
||||
rel="noopener noreferrer" |
||||
class="!text-gray-500 text-sm !no-underline !hover:underline" |
||||
> |
||||
{{ doc.title }} |
||||
</NuxtLink> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</NcModal> |
||||
</template> |
||||
|
||||
<style lang="scss"> |
||||
.nc-modal-scripts-create-edit { |
||||
z-index: 1050; |
||||
a { |
||||
@apply !no-underline !text-gray-700 !hover:text-primary; |
||||
} |
||||
.nc-modal { |
||||
@apply !p-0; |
||||
height: min(calc(100vh - 100px), 1024px); |
||||
max-height: min(calc(100vh - 100px), 1024px) !important; |
||||
} |
||||
|
||||
.nc-modal-header { |
||||
@apply !mb-0 !pb-0; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,17 @@
|
||||
export const useScripts = createSharedComposable(() => { |
||||
const isScriptsEnabled = ref(false) |
||||
|
||||
const { $api } = useNuxtApp() |
||||
|
||||
const execScript = async (code: string) => { |
||||
const data = $api.scripts.scriptExec({ |
||||
body: { code }, |
||||
}) |
||||
|
||||
console.log(data) |
||||
|
||||
return data |
||||
} |
||||
|
||||
return { isScriptsEnabled, execScript } |
||||
}) |
||||
@ -0,0 +1,245 @@
|
||||
import { |
||||
Body, |
||||
Controller, |
||||
Get, |
||||
Post, |
||||
Req, |
||||
Res, |
||||
UseGuards, |
||||
} from '@nestjs/common'; |
||||
import { CodeInterpreter } from '@e2b/code-interpreter'; |
||||
import Sandbox from 'v8-sandbox'; |
||||
import { Response } from 'express'; |
||||
import request from 'supertest'; |
||||
import { GlobalGuard } from '~/guards/global/global.guard'; |
||||
import { MetaApiLimiterGuard } from '~/guards/meta-api-limiter.guard'; |
||||
import { TenantContext } from '~/decorators/tenant-context.decorator'; |
||||
import { NcContext, NcRequest } from '~/interface/config'; |
||||
|
||||
@Controller() |
||||
@UseGuards(MetaApiLimiterGuard, GlobalGuard) |
||||
export class ScriptsController { |
||||
constructor() {} |
||||
|
||||
@Post(['/api/v2/scripts/exec']) |
||||
async scriptExec( |
||||
@TenantContext() context: NcContext, |
||||
@Body() body, |
||||
@Req() req: NcRequest, |
||||
) { |
||||
console.log(body); |
||||
|
||||
const sandbox = new Sandbox(); |
||||
|
||||
const { error, output, value } = await sandbox.execute({ |
||||
code: body.code, |
||||
timeout: 1000, |
||||
}); |
||||
|
||||
console.log(value, output, error); |
||||
|
||||
// return output;
|
||||
|
||||
const sandboxE2b = await CodeInterpreter.create({ |
||||
apiKey: 'e2b_28eedec39c0398d545f5cfa3e2b2332a13d3c4e2', |
||||
}); |
||||
const x = await sandboxE2b.notebook.execCell(body.code); |
||||
|
||||
console.log(x); |
||||
|
||||
return { x, output }; |
||||
} |
||||
|
||||
@Get(['/api/v2/scripts']) |
||||
async scriptHTML(@Res() res: Response, @Req() req: NcRequest) { |
||||
res.setHeader('Content-Type', 'text/html'); |
||||
res.setHeader('Cache-Control', 'no-store, max-age=0'); |
||||
res.setHeader('X-Content-Type-Options', 'nosniff'); |
||||
res.setHeader('Referrer-Policy', 'no-referrer'); |
||||
res.setHeader( |
||||
'Permissions-Policy', |
||||
'geolocation=(), microphone=(), camera=(), midi=(), encrypted-media=()', |
||||
); |
||||
res.setHeader( |
||||
'Strict-Transport-Security', |
||||
'max-age=31536000; includeSubDomains; preload', |
||||
); |
||||
|
||||
const cspDirectives = [ |
||||
"default-src 'none'", |
||||
"script-src 'self' 'unsafe-inline' 'unsafe-eval' blob: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net", |
||||
"style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com", |
||||
`connect-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net http://localhost:8080`, |
||||
"font-src 'self' https://cdnjs.cloudflare.com", |
||||
"worker-src 'self' blob:", |
||||
'child-src blob:', |
||||
"base-uri 'none'", |
||||
"form-action 'none'", |
||||
]; |
||||
|
||||
// res.setHeader('Content-Security-Policy', cspDirectives.join('; '));
|
||||
|
||||
res.send( |
||||
generateHTML({ |
||||
token: req.headers['Xc-Auth'] as string, |
||||
url: 'http://localhost:8080', |
||||
}), |
||||
); |
||||
} |
||||
} |
||||
|
||||
const generateHTML = (config: { token: string; url: string }) => { |
||||
return `<!DOCTYPE html>
|
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8"> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
<title>Secure Script Executor</title> |
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.js"></script> |
||||
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> |
||||
<style> |
||||
body { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: 100vh; |
||||
font-family: 'Arial', sans-serif; |
||||
} |
||||
#editor, #output { |
||||
height: calc(100vh - 7rem); |
||||
} |
||||
.console-line { |
||||
padding: 2px 5px; |
||||
border-bottom: 1px solid #e2e8f0; |
||||
} |
||||
.log { color: #2d3748; } |
||||
.error { color: #e53e3e; } |
||||
.warn { color: #d69e2e; } |
||||
</style> |
||||
</head> |
||||
<body class="bg-gray-100"> |
||||
<nav class="bg-blue-600 text-white p-4 flex justify-between items-center"> |
||||
<h1 class="text-xl font-bold">Secure Script Executor</h1> |
||||
<button onclick="runScript()" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out transform hover:scale-105"> |
||||
Run Script |
||||
</button> |
||||
</nav> |
||||
<div class="flex flex-1 overflow-hidden"> |
||||
<div id="editor" class="w-1/2 border-r border-gray-300"></div> |
||||
<div class="w-1/2 flex flex-col"> |
||||
<div class="bg-gray-200 p-2 font-bold">Console Output</div> |
||||
<div id="output" class="flex-1 overflow-auto bg-white p-2"></div> |
||||
</div> |
||||
</div> |
||||
<footer class="bg-gray-200 p-2 text-center text-sm text-gray-600"> |
||||
Secure Script Executor © 2023 |
||||
</footer> |
||||
|
||||
<script> |
||||
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs' } }) |
||||
require(['vs/editor/editor.main'], function () { |
||||
window.editor = monaco.editor.create(document.getElementById('editor'), { |
||||
value: 'console.log("Hello World");', |
||||
language: 'javascript', |
||||
theme: 'vs-dark', |
||||
automaticLayout: true, |
||||
minimap: { enabled: false }, |
||||
}) |
||||
}) |
||||
|
||||
let scriptWorker; |
||||
|
||||
function createWorker() { |
||||
const workerCode = \` |
||||
'use strict'; |
||||
// Security restrictions
|
||||
const restrictedGlobals = ['window', 'document', 'location', 'top', 'parent', 'frames', 'opener']; |
||||
restrictedGlobals.forEach(name => { |
||||
Object.defineProperty(self, name, { |
||||
get: () => { |
||||
throw new ReferenceError(name + ' is not defined'); |
||||
}, |
||||
configurable: false |
||||
}); |
||||
}); |
||||
|
||||
// Restricted access to APIs
|
||||
self.XMLHttpRequest = undefined; |
||||
self.fetch = undefined; |
||||
self.WebSocket = undefined; |
||||
self.localStorage = undefined; |
||||
self.sessionStorage = undefined; |
||||
|
||||
self.console = { |
||||
log: (...args) => self.postMessage({type: 'log', message: args.join(' ')}), |
||||
error: (...args) => self.postMessage({type: 'error', message: args.join(' ')}), |
||||
warn: (...args) => self.postMessage({type: 'warn', message: args.join(' ')}) |
||||
}; |
||||
|
||||
// Importing NocoDB SDK in the worker
|
||||
import { Api } from 'https://cdn.jsdelivr.net/npm/nocodb-sdk@0.255.2/+esm'; |
||||
|
||||
// Initialize NocoDB SDK in the worker
|
||||
const api = new Api({ |
||||
baseURL: '${config.url}', |
||||
axiosConfig: { |
||||
headers: { |
||||
'xc-auth': '${config.token}', |
||||
}, |
||||
}, |
||||
}); |
||||
|
||||
self.onmessage = function(event) { |
||||
const script = event.data.script; |
||||
try { |
||||
eval(script); |
||||
} catch (error) { |
||||
self.console.error(error.toString()); |
||||
} |
||||
self.postMessage({type: 'done'}); |
||||
}; |
||||
\`;
|
||||
|
||||
const blob = new Blob([workerCode], { type: 'application/javascript' }); |
||||
return new Worker(URL.createObjectURL(blob), { type: 'module' }); |
||||
} |
||||
|
||||
function runScript() { |
||||
const script = window.editor.getValue(); |
||||
const output = document.getElementById('output'); |
||||
output.innerHTML = ''; |
||||
|
||||
if (scriptWorker) { |
||||
scriptWorker.terminate(); |
||||
} |
||||
|
||||
scriptWorker = createWorker(); |
||||
|
||||
scriptWorker.onmessage = function (event) { |
||||
const { type, message } = event.data; |
||||
if (type === 'done') { |
||||
scriptWorker.terminate(); |
||||
scriptWorker = null; |
||||
} else { |
||||
const line = document.createElement('div'); |
||||
line.textContent = message; |
||||
line.className = 'console-line ' + type; |
||||
output.appendChild(line); |
||||
} |
||||
}; |
||||
|
||||
scriptWorker.onerror = function (error) { |
||||
const line = document.createElement('div'); |
||||
line.textContent = 'Worker error: ' + error.message; |
||||
line.className = 'console-line error'; |
||||
output.appendChild(line); |
||||
scriptWorker.terminate(); |
||||
scriptWorker = null; |
||||
}; |
||||
|
||||
scriptWorker.postMessage({ script }); |
||||
} |
||||
</script> |
||||
</body> |
||||
</html> |
||||
`;
|
||||
}; |
||||
Loading…
Reference in new issue