From ce0c395260ecf7ca18f8044da5b0b66ab50b5740 Mon Sep 17 00:00:00 2001 From: Zilvinas Saltys Date: Tue, 24 Oct 2023 15:59:38 +0100 Subject: [PATCH 1/3] adding a way to define custom env linking prerequisites --- .../views/EnvironmentCreateForm.js | 334 ++++++++++-------- 1 file changed, 178 insertions(+), 156 deletions(-) diff --git a/frontend/src/modules/Environments/views/EnvironmentCreateForm.js b/frontend/src/modules/Environments/views/EnvironmentCreateForm.js index 6519d236d..778106013 100644 --- a/frontend/src/modules/Environments/views/EnvironmentCreateForm.js +++ b/frontend/src/modules/Environments/views/EnvironmentCreateForm.js @@ -52,6 +52,7 @@ import { getCDKExecPolicyPresignedUrl } from '../services'; import { AwsRegions } from 'utils'; +import config from '../../../generated/config.json'; const EnvironmentCreateForm = (props) => { const dispatch = useDispatch(); @@ -298,171 +299,192 @@ const EnvironmentCreateForm = (props) => { - - - 1. (OPTIONAL) As part of setting up your AWS Environment with - CDK you need to specify a IAM Policy that gives permission for - CDK to create AWS Resources via CloudFormation (i.e. CDK - Execution Policy). You optionally can use the below - CloudFormation template to create the custom IAM policy that - is more restrictive than the default{' '} - AdministratorAccess policy. - - - - - - 2. Bootstrap your AWS account with AWS CDK - - - - - - - If Using Default CDK Execution Policy: - - - copyNotification()} - text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`} - > - - - - - {`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`} - - - - - - - - - If Using Custom CDK Execution Policy (From Step 1): - - - copyNotification()} - text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`} - > - - - - - {`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`} - - - - - - - {process.env.REACT_APP_ENABLE_PIVOT_ROLE_AUTO_CREATE === - 'True' ? ( + {config.core.custom_env_linking_text !== undefined ? ( - - 3. As part of the environment CloudFormation stack data.all - will create an IAM role (Pivot Role) to manage AWS - operations in the environment AWS Account. - + ) : ( - + <> - 3. Create an IAM role named {pivotRoleName} using - the AWS CloudFormation stack below + 1. (OPTIONAL) As part of setting up your AWS Environment + with CDK you need to specify a IAM Policy that gives + permission for CDK to create AWS Resources via + CloudFormation (i.e. CDK Execution Policy). You optionally + can use the below CloudFormation template to create the + custom IAM policy that is more restrictive than the + default AdministratorAccess policy. + - - - - - + + + 2. Bootstrap your AWS account with AWS CDK + + + + + + + If Using Default CDK Execution Policy: + + + copyNotification()} + text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`} + > + + + + + {`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::aws:policy/AdministratorAccess aws://ACCOUNT_ID/REGION`} + + + + + + + + + If Using Custom CDK Execution Policy (From Step + 1): + + + copyNotification()} + text={`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`} + > + + + + + {`cdk bootstrap --trust ${trustedAccount} -c @aws-cdk/core:newStyleStackSynthesis=true --cloudformation-execution-policies arn:aws:iam::ACCOUNT_ID:policy/DataAllCustomCDKPolicy aws://ACCOUNT_ID/REGION`} + + + + - - + + {process.env.REACT_APP_ENABLE_PIVOT_ROLE_AUTO_CREATE === + 'True' ? ( + + + 3. As part of the environment CloudFormation stack + data.all will create an IAM role (Pivot Role) to manage + AWS operations in the environment AWS Account. + + + ) : ( + + + + 3. Create an IAM role named {pivotRoleName}{' '} + using the AWS CloudFormation stack below + + + + + + + + + + + )} + + + Make sure that the services needed for the selected + environment features are available in your AWS Account. + + + )} - - - Make sure that the services needed for the selected - environment features are available in your AWS Account. - - From 137aadaa64f0f30f9749c37185d4fbebece2d67a Mon Sep 17 00:00:00 2001 From: Zilvinas Saltys Date: Mon, 18 Dec 2023 14:14:44 +0000 Subject: [PATCH 2/3] adding support for dompurify to sanitize html --- frontend/package.json | 1 + frontend/src/design/components/SanitizedHTML.js | 12 ++++++++++++ frontend/src/design/components/index.js | 1 + .../Environments/views/EnvironmentCreateForm.js | 13 ++++++------- 4 files changed, 20 insertions(+), 7 deletions(-) create mode 100644 frontend/src/design/components/SanitizedHTML.js diff --git a/frontend/package.json b/frontend/package.json index d233f5b2e..155bb027d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -60,6 +60,7 @@ "react-router": "6.0.0", "react-router-dom": "6.0.0", "react-scripts": "^5.0.1", + "dompurify": "^3.0.6", "simplebar": "^5.3.6", "simplebar-react": "^2.3.6", "web-vitals": "^2.1.4", diff --git a/frontend/src/design/components/SanitizedHTML.js b/frontend/src/design/components/SanitizedHTML.js new file mode 100644 index 000000000..a802d9ba0 --- /dev/null +++ b/frontend/src/design/components/SanitizedHTML.js @@ -0,0 +1,12 @@ +import DOMPurify from 'dompurify'; + +export const SanitizedHTML = ({ dirtyHTML }) => { + const defaultOptions = { + ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a'], + ALLOWED_ATTR: ['href'] + }; + + const sanitizedHtml = DOMPurify.sanitize(dirtyHTML, defaultOptions); + + return
; +}; diff --git a/frontend/src/design/components/index.js b/frontend/src/design/components/index.js index 9fcddb9f1..b9c460dd7 100644 --- a/frontend/src/design/components/index.js +++ b/frontend/src/design/components/index.js @@ -28,3 +28,4 @@ export * from './UpVotesReadOnly'; export * from './defaults'; export * from './layout'; export * from './popovers'; +export * from './SanitizedHTML'; diff --git a/frontend/src/modules/Environments/views/EnvironmentCreateForm.js b/frontend/src/modules/Environments/views/EnvironmentCreateForm.js index e5dca2d06..f2c889108 100644 --- a/frontend/src/modules/Environments/views/EnvironmentCreateForm.js +++ b/frontend/src/modules/Environments/views/EnvironmentCreateForm.js @@ -32,6 +32,7 @@ import { Helmet } from 'react-helmet-async'; import { Link as RouterLink, useNavigate, useParams } from 'react-router-dom'; import * as Yup from 'yup'; import { + SanitizedHTML, ArrowLeftIcon, ChevronRightIcon, ChipInput, @@ -306,13 +307,11 @@ const EnvironmentCreateForm = (props) => { {config.core.custom_env_linking_text !== undefined ? ( - + + + ) : ( <> From 7eb0d00bfbd66d867f58831ee1cb8abefd424a0a Mon Sep 17 00:00:00 2001 From: Zilvinas Saltys Date: Mon, 18 Dec 2023 14:26:05 +0000 Subject: [PATCH 3/3] updating package-lock.json because npm ci is failing --- frontend/package-lock.json | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3ce824f4c..d11df928f 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -32,6 +32,7 @@ "classnames": "^2.3.1", "date-fns": "^2.28.0", "dayjs": "^1.11.0", + "dompurify": "^3.0.6", "formik": "^2.2.9", "graphql-tag": "^2.12.6", "json5": "^2.2.2", @@ -16214,6 +16215,11 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz", + "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==" + }, "node_modules/domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", @@ -42347,6 +42353,11 @@ "domelementtype": "^2.2.0" } }, + "dompurify": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.6.tgz", + "integrity": "sha512-ilkD8YEnnGh1zJ240uJsW7AzE+2qpbOUYjacomn3AvJ6J4JhKGSZ2nh4wUIXPZrEPppaCLx5jFe8T89Rk8tQ7w==" + }, "domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",