feat(playground): support safe-mode script libraries in the quickjs sandbox #56
+1,455
−78
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { test, expect } from '../../playwright'; | ||
| import type { Page } from '@playwright/test'; | ||
| import type { CodeEditorComponent } from '../../components/code-editor/code-editor.component'; | ||
|
|
||
| const LIBRARY_TESTS_SCRIPT = ` | ||
| const moment = require('moment'); | ||
| const CryptoJS = require('crypto-js'); | ||
| const { v4, validate } = require('uuid'); | ||
| const { nanoid } = require('nanoid'); | ||
| const tv4 = require('tv4'); | ||
|
|
||
| test('moment formats a date', function () { | ||
| expect(moment('2026-01-02').format('YYYY-MM-DD')).to.equal('2026-01-02'); | ||
| }); | ||
|
|
||
| test('crypto-js hashes and uuid validates', function () { | ||
| expect(CryptoJS.SHA256('abc').toString()).to.equal('ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad'); | ||
| expect(validate(v4())).to.equal(true); | ||
| expect(nanoid(10)).to.have.lengthOf(10); | ||
| }); | ||
|
|
||
| test('tv4 validates against a schema', function () { | ||
| expect(tv4.validate({ a: 1 }, { type: 'object' })).to.equal(true); | ||
| }); | ||
| `; | ||
|
|
||
| const setEditorScript = async (page: Page, editor: CodeEditorComponent, script: string): Promise<void> => { | ||
| await editor.focus(); | ||
| await page.keyboard.press('ControlOrMeta+a'); | ||
| await page.keyboard.insertText(script); | ||
| }; | ||
|
|
||
| test.describe('playground script execution', () => { | ||
| test.use({ viewport: { width: 1280, height: 900 } }); | ||
|
|
||
| test('runs a tests script using the safe-mode libraries on Send', async ({ page, playground, responsePane }) => { | ||
| await page.route('**/api/users**', (route) => | ||
| route.fulfill({ | ||
| status: 200, | ||
| headers: { 'content-type': 'application/json', 'access-control-allow-origin': '*' }, | ||
| body: JSON.stringify({ users: [{ id: 1, name: 'Ada' }] }) | ||
| }) | ||
| ); | ||
|
|
||
| await page.goto('/#/?pg=1&dock=bottom'); | ||
| await playground.openSidebarItem('get users'); | ||
|
|
||
| await playground.selectTab('tests'); | ||
| await setEditorScript(page, playground.testsEditor, LIBRARY_TESTS_SCRIPT); | ||
|
|
||
| await responsePane.send(); | ||
| await responsePane.switchToTab('tests'); | ||
|
|
||
| await expect(page.getByText(/Passed: [1-9]\d*, Failed: 0/).first()).toBeVisible(); | ||
| await expect(page.getByText(/Failed: [1-9]/)).toHaveCount(0); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,43 @@ | ||
| import { expect, assert } from 'chai'; | ||
| import { Buffer } from 'buffer'; | ||
| import moment from 'moment'; | ||
| import btoa from 'btoa'; | ||
| // import atob's node file directly: the default 'atob' import is a browser build that | ||
| // reads window, and window does not exist inside the QuickJS sandbox | ||
| import atob from 'atob/node-atob'; | ||
| import CryptoJS from 'crypto-js'; | ||
| import tv4 from 'tv4'; | ||
| import Ajv from 'ajv'; | ||
| import addFormats from 'ajv-formats'; | ||
| import * as uuid from 'uuid'; | ||
| import * as nanoid from 'nanoid'; | ||
| import path from 'path-browserify'; | ||
|
|
||
| (globalThis as any).expect = expect; | ||
| (globalThis as any).assert = assert; | ||
| (globalThis as any).moment = moment; | ||
| (globalThis as any).btoa = btoa; | ||
| (globalThis as any).atob = atob; | ||
| (globalThis as any).Buffer = Buffer; | ||
| (globalThis as any).tv4 = tv4; | ||
| (globalThis as any).Ajv = Ajv; | ||
| (globalThis as any).addFormats = addFormats; | ||
| (globalThis as any).uuid = uuid; | ||
| (globalThis as any).nanoid = nanoid; | ||
| (globalThis as any).path = path; | ||
|
|
||
| (globalThis as any).requireObject = { | ||
| ...((globalThis as any).requireObject || {}), | ||
| 'chai': { expect, assert }, | ||
| 'moment': moment, | ||
| 'buffer': { Buffer }, | ||
| 'btoa': btoa, | ||
| 'atob': atob, | ||
| 'crypto-js': CryptoJS, | ||
| 'tv4': tv4, | ||
| 'ajv': Ajv, | ||
| 'ajv-formats': addFormats, | ||
| 'uuid': uuid, | ||
| 'nanoid': nanoid, | ||
| 'path': path | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
sundram-bruno marked this conversation as resolved.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { describe, it, expect, beforeAll } from 'vitest'; | ||
| import { newQuickJSWASMModule } from 'quickjs-emscripten'; | ||
| import addCryptoUtilsShimToContext from './shims/lib/crypto-utils'; | ||
| import addAxiosShimToContext from './shims/lib/axios'; | ||
| import { getRequireCode } from './shims/require'; | ||
| import { getBundledCode } from './bundled-libraries.iife.js'; | ||
|
|
||
| const SUPPORTED_MODULES = [ | ||
| 'ajv', 'ajv-formats', 'atob', 'axios', 'btoa', 'buffer', 'chai', 'crypto-js', | ||
| 'moment', 'nanoid', 'path', 'tv4', 'uuid' | ||
| ]; | ||
|
|
||
| let vm: any; | ||
|
|
||
| const inVm = (expression: string) => { | ||
| const result = vm.evalCode(expression); | ||
| if (result.error) { | ||
| const error = vm.dump(result.error); | ||
| result.error.dispose(); | ||
| throw new Error(error.message); | ||
| } | ||
| const value = vm.dump(result.value); | ||
| result.value.dispose(); | ||
| return value; | ||
| }; | ||
|
|
||
| const errorMessageOf = (expression: string) => | ||
| inVm(`(() => { try { ${expression}; return 'NO-THROW'; } catch (e) { return e.message; } })()`); | ||
|
|
||
| describe('sandbox library parity with desktop safe mode', () => { | ||
| beforeAll(async () => { | ||
| const module = await newQuickJSWASMModule(); | ||
| vm = module.newContext(); | ||
| addCryptoUtilsShimToContext(vm); | ||
| const boot = vm.evalCode( | ||
| `(${getBundledCode.toString()})(); ${getRequireCode()}; ` | ||
| + `globalThis.console = { log() {}, debug() {}, info() {}, warn() {}, error() {} };` | ||
| ); | ||
| expect(boot.error).toBeUndefined(); | ||
| boot.value.dispose(); | ||
| addAxiosShimToContext(vm); | ||
| }); | ||
|
|
||
| it('exposes exactly the supported safe-mode modules', () => { | ||
| expect(inVm('Object.keys(globalThis.requireObject).sort()')).toEqual(SUPPORTED_MODULES); | ||
| }); | ||
|
|
||
| it('exposes the supported safe-mode globals', () => { | ||
| const globals = ['expect', 'assert', 'moment', 'btoa', 'atob', 'Buffer', 'tv4', 'Ajv', 'addFormats', 'crypto', 'axios', 'path', 'require', 'uuid', 'nanoid']; | ||
| for (const name of globals) { | ||
| expect(inVm(`typeof globalThis['${name}']`), name).not.toBe('undefined'); | ||
| } | ||
| }); | ||
|
|
||
| it('every module does real work inside the VM', () => { | ||
| expect(inVm(`require('moment')('2026-08-20T10:00:00Z').utc().format('YYYY-MM-DD')`)).toBe('2026-08-20'); | ||
| expect(inVm(`require('crypto-js').SHA256('abc').toString()`)).toBe('ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad'); | ||
| expect(inVm(`require('uuid').validate(require('uuid').v4())`)).toBe(true); | ||
| expect(inVm(`require('nanoid').nanoid(10).length`)).toBe(10); | ||
| expect(inVm(`require('buffer').Buffer.from('hello').toString('base64')`)).toBe('aGVsbG8='); | ||
| expect(inVm(`require('btoa')('hello')`)).toBe('aGVsbG8='); | ||
| expect(inVm(`require('atob')('aGVsbG8=')`)).toBe('hello'); | ||
| expect(inVm(`require('tv4').validate({ a: 1 }, { type: 'object' })`)).toBe(true); | ||
| expect(inVm(`new (require('ajv'))().compile({ type: 'number' })(5)`)).toBe(true); | ||
| expect(inVm(`(() => { const Ajv = require('ajv'); const ajv = new Ajv(); require('ajv-formats')(ajv); return ajv.compile({ type: 'string', format: 'email' })('a@b.co'); })()`)).toBe(true); | ||
| expect(inVm(`require('path').resolve('/a/b', '../c')`)).toBe('/a/c'); | ||
| expect(inVm(`(() => { const { expect } = require('chai'); expect(1).to.eql(1); return 'ok'; })()`)).toBe('ok'); | ||
| expect(inVm(`typeof require('axios').get`)).toBe('function'); | ||
| }); | ||
|
|
||
| it('gives explanatory errors for developer-mode-only and node builtin modules', () => { | ||
| expect(errorMessageOf(`require('lodash')`)).toContain('only available in the Bruno desktop app\'s developer mode'); | ||
| expect(errorMessageOf(`require('fs')`)).toContain('is a Node.js builtin'); | ||
| expect(errorMessageOf(`require('node:fs')`)).toContain('is a Node.js builtin'); | ||
| expect(errorMessageOf(`require('./helper.js')`)).toContain('Local file require'); | ||
| expect(errorMessageOf(`require('./helper.js')`)).toContain('is not available in the docs playground'); | ||
| expect(inVm(`typeof require('node:buffer').Buffer`)).toBe('function'); | ||
| expect(inVm(`typeof require('node:path').resolve`)).toBe('function'); | ||
| expect(errorMessageOf(`require('node:chai')`)).toContain('Cannot find module node:chai'); | ||
| expect(errorMessageOf(`require('left-pad-9000')`)).toBe('Cannot find module left-pad-9000'); | ||
| expect(errorMessageOf(`require('jsonwebtoken')`)).toBe('\'jsonwebtoken\' is not currently supported in the docs playground. Please use the Bruno desktop app.'); | ||
| expect(errorMessageOf(`require('crypto')`)).toContain('use the crypto global instead'); | ||
| expect(errorMessageOf(`require('constructor')`)).toBe('Cannot find module constructor'); | ||
| expect(errorMessageOf(`require('__proto__')`)).toBe('Cannot find module __proto__'); | ||
| expect(errorMessageOf(`require('toString')`)).toBe('Cannot find module toString'); | ||
| }); | ||
|
|
||
| it('generates randomness for supported typed arrays and rejects unsupported ones', () => { | ||
| expect(inVm(`crypto.getRandomValues(new Uint8Array(4)).length`)).toBe(4); | ||
| expect(inVm(`crypto.getRandomValues(new Uint32Array(2)).length`)).toBe(2); | ||
| expect(inVm(`crypto.randomBytes(8).length`)).toBe(8); | ||
| expect(errorMessageOf(`crypto.getRandomValues(new BigInt64Array(2))`)).toBe('getRandomValues: unsupported typed array type: BigInt64Array'); | ||
| expect(errorMessageOf(`crypto.getRandomValues(new Float32Array(2))`)).toBe('getRandomValues: unsupported typed array type: Float32Array'); | ||
| }); | ||
| }); |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.