From b2baa1e48d4cb31d87c6f5a6220afd79deda0c73 Mon Sep 17 00:00:00 2001 From: Anoop M D Date: Sat, 10 Aug 2024 21:59:13 +0530 Subject: [PATCH] feat: safe mode updates --- .../AppModeModal/StyledWrapper.js | 22 ++++ .../AppModeModal/index.js | 112 +++++++++--------- .../SecuritySettings/StyledWrapper.js | 39 ------ .../src/components/SecuritySettings/index.js | 4 +- ...bundle-libraries.js => bundleLibraries.js} | 0 5 files changed, 79 insertions(+), 98 deletions(-) create mode 100644 packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/StyledWrapper.js rename packages/bruno-js/src/sandbox/isolatedvm/utils/{bundle-libraries.js => bundleLibraries.js} (100%) diff --git a/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/StyledWrapper.js b/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/StyledWrapper.js new file mode 100644 index 000000000..ecaab4ff1 --- /dev/null +++ b/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/StyledWrapper.js @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +const StyledWrapper = styled.div` + max-width: 800px; + + span.beta-tag { + display: flex; + align-items: center; + padding: 0.1rem 0.25rem; + font-size: 0.75rem; + border-radius: 0.25rem; + color: ${(props) => props.theme.colors.text.green}; + border: solid 1px ${(props) => props.theme.colors.text.green} !important; + } + + span.developer-mode-warning { + font-weight: 400; + color: ${(props) => props.theme.colors.text.yellow}; + } +`; + +export default StyledWrapper; diff --git a/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/index.js b/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/index.js index 5206a3dc4..f208a08e7 100644 --- a/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/index.js +++ b/packages/bruno-app/src/components/SecuritySettings/SecurityIconWithModal/AppModeModal/index.js @@ -2,8 +2,9 @@ import { saveCollectionSecurityConfig } from 'providers/ReduxStore/slices/collec import { useDispatch } from 'react-redux'; import toast from 'react-hot-toast'; import { useState } from 'react'; -import Portal from 'components/Portal/index'; -import Modal from 'components/Modal/index'; +import Portal from 'components/Portal'; +import Modal from 'components/Modal'; +import StyledWrapper from './StyledWrapper'; const AppModeModal = ({ collection, onClose }) => { const dispatch = useDispatch(); @@ -31,7 +32,7 @@ const AppModeModal = ({ collection, onClose }) => { { disableCloseOnOutsideClick={true} disableEscapeKey={true} > -
-
Choose a app mode for this collection.
-
-
- - - -
- {/* */} + +
+ The collection might include JavaScript code in Variables, Scripts, Tests, and Assertions.
-
+ +
+ Please choose the security level for the JavaScript code execution. +
+ +
+ +

+ JavaScript code is executed in a secure sandbox and cannot excess your filesystem or execute system commands. +

+ + +

+ JavaScript code has access to the filesystem, can execute system commands and access sensitive information. +

+ + * SAFE mode has been introduced v1.25 onwards and is in beta. Please report any issues on github. + +
+ ); diff --git a/packages/bruno-app/src/components/SecuritySettings/StyledWrapper.js b/packages/bruno-app/src/components/SecuritySettings/StyledWrapper.js index 62777f75b..ecaab4ff1 100644 --- a/packages/bruno-app/src/components/SecuritySettings/StyledWrapper.js +++ b/packages/bruno-app/src/components/SecuritySettings/StyledWrapper.js @@ -17,45 +17,6 @@ const StyledWrapper = styled.div` font-weight: 400; color: ${(props) => props.theme.colors.text.yellow}; } - - div.tabs { - div.tab { - padding: 6px 0px; - border: none; - border-bottom: solid 2px transparent; - margin-right: 1.25rem; - color: var(--color-tab-inactive); - cursor: pointer; - - &:focus, - &:active, - &:focus-within, - &:focus-visible, - &:target { - outline: none !important; - box-shadow: none !important; - } - - &.active { - color: ${(props) => props.theme.tabs.active.color} !important; - border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important; - } - } - } - table { - thead, - td { - border: 1px solid ${(props) => props.theme.table.border}; - - li { - background-color: ${(props) => props.theme.bg} !important; - } - } - } - - .muted { - color: ${(props) => props.theme.colors.text.muted}; - } `; export default StyledWrapper; diff --git a/packages/bruno-app/src/components/SecuritySettings/index.js b/packages/bruno-app/src/components/SecuritySettings/index.js index 4ab3f2c02..587db0996 100644 --- a/packages/bruno-app/src/components/SecuritySettings/index.js +++ b/packages/bruno-app/src/components/SecuritySettings/index.js @@ -30,7 +30,7 @@ const SecuritySettings = ({ collection }) => {
Scripting Sandbox
- Bruno allows JavaScript code to be executed within Variables, Scripts, Tests, and Assertions.
+ The collection might include JavaScript code in Variables, Scripts, Tests, and Assertions.
@@ -70,7 +70,7 @@ const SecuritySettings = ({ collection }) => {

- JavaScript code has access to the filesystem, execute system commands and access sensitive information. + JavaScript code has access to the filesystem, can execute system commands and access sensitive information.