From 48e4d0d54be55cd8e7f7a94e308ae8775d8912df Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Sat, 21 Sep 2024 06:14:59 +0800 Subject: [PATCH 1/6] chore: create reusable modal components --- docs/components/AnchorModal.jsx | 34 ++++++++++++++++++++++++++++ docs/components/Modal/index.jsx | 39 +++++++++++++++++++++++++++++++++ docs/components/Modal/modal.css | 19 ++++++++++++++++ 3 files changed, 92 insertions(+) create mode 100644 docs/components/AnchorModal.jsx create mode 100644 docs/components/Modal/index.jsx create mode 100644 docs/components/Modal/modal.css diff --git a/docs/components/AnchorModal.jsx b/docs/components/AnchorModal.jsx new file mode 100644 index 00000000..a346b454 --- /dev/null +++ b/docs/components/AnchorModal.jsx @@ -0,0 +1,34 @@ +import { useState } from 'react' +import Modal from '@/components/Modal' + +function AnchorModal({ + anchorText = 'Click Me', + modalTitle, + children +}) { + const [isModalOpen, setModalOpen] = useState(false) + + return ( + <> + { + e.preventDefault() + setModalOpen(prev => !prev) + }}> + {anchorText} + + + setModalOpen(prev => !prev)} + > + {children} + + + ) +} + +export default AnchorModal diff --git a/docs/components/Modal/index.jsx b/docs/components/Modal/index.jsx new file mode 100644 index 00000000..a06def28 --- /dev/null +++ b/docs/components/Modal/index.jsx @@ -0,0 +1,39 @@ +import { useMemo } from 'react' +import { useTheme } from 'next-themes' + +function Modal({ title, children, isOpen, onClose }) { + const { resolvedTheme } = useTheme() + + if (!isOpen) return null + + const modalBgStyle = useMemo(() => { + const bg = resolvedTheme === 'dark' + ? 'bg-neutral-800' + : 'bg-neutral-50' + + return `${bg} rounded-lg shadow-lg p-6 max-w-md w-full` + }, [resolvedTheme]) + + return ( +
+
+

+ {title} +

+ + {children} + +
+ +
+
+
+ ) +} + +export default Modal \ No newline at end of file diff --git a/docs/components/Modal/modal.css b/docs/components/Modal/modal.css new file mode 100644 index 00000000..8ac81db5 --- /dev/null +++ b/docs/components/Modal/modal.css @@ -0,0 +1,19 @@ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.modal-content { + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + text-align: center; +} \ No newline at end of file From 082e5946f1cd184980d3ba60ba7a604677470e1d Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Sat, 21 Sep 2024 06:16:29 +0800 Subject: [PATCH 2/6] docs: mention private xss demo video --- docs/pages/changelog.mdx | 19 +++++++++++++------ docs/pages/security.mdx | 11 ++++++++++- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/docs/pages/changelog.mdx b/docs/pages/changelog.mdx index 8ed74989..21b83832 100644 --- a/docs/pages/changelog.mdx +++ b/docs/pages/changelog.mdx @@ -12,8 +12,8 @@ export function FAQBoxError({ title, children, open = false }) { const detailsBgStyle = useMemo(() => { const bg = resolvedTheme === 'dark' - ? 'nx-bg-red-900/30' - : 'nx-bg-red-100' + ? 'nx-bg-red-900/30' + : 'nx-bg-red-100' return { details: `nx-overflow-x-auto nx-mt-6 nx-flex nx-rounded-lg nx-border nx-py-2 ltr:nx-pr-4 rtl:nx-pl-4 contrast-more:nx-border-current contrast-more:dark:nx-border-current nx-border-red-200 nx-bg-red-100 nx-text-red-900 dark:nx-border-red-200/30 dark:nx-bg-red-900/30 dark:nx-text-red-200`, @@ -59,13 +59,20 @@ Version 2.0 and later versions may have new requirements that will thrive on new -1. **Lenient use of the Firestore database:** Inadvertently allows unvalidated input in new collections via Firestore REST APIs outside the front end, bypassing the intended front-end controls. This issue, not present in Version 1.0, began with Version 2.0 using methods to speed up the development process and feature delivery. We are addressing this in future updates. -2. **Validation of crop recommendations WYSIWYG HTML input:** This is necessary to mitigate Cross-Site Scripting (XSS) attacks (related to the above issue), which also arose from new development approaches in Version 2.0. Enhancements to security will be implemented in future releases. -3. **Crop recommendations data integrity:** Ensuring unaltered data presentation in PDF bulletins, resulting from the issues identified in items 1 and 2. +1. **Flexible Firestore Database Use:** Version 2.0+ adopted a more flexible approach for handling data management, facilitating faster feature development. However, this shift also introduced the potential for data to enter the database without the usual front-end controls through the Firestore REST APIs. While this was not an issue in Version 1.0, it emerged as part of the effort to enhance development speed and feature delivery starting with Version 2.0. +2. **Cross-Site Scripting (XSS) Vulnerability in Crop Recommendations:** Related to item 1, the new process for editing WYSIWYG HTML-form crop recommendations input may allow unsafe or inaccurate content due to limited validation. Risks associated with this were recognized early in the process, but the focus on delivering core features led to a delay in integrating security measures. Additionally, the smaller scope of the project contributed to a perception that it might not require the same level of thorough security measures typically expected in larger-scale projects. +3. **Crop recommendations data integrity:** Ensuring that data presentations in PDF bulletins remain unaltered, trustworthy, and accurate is crucial for users and future developers. This priority stems from the concerns identified in items 1 and 2. -> These issues, brought to the attention of the current active ACAP Maintainer during the early stages of 2.0 development, are to be resolved and addressed within their available time and schedule in the current ACAP timeline or the new ACAP iterations. +> These issues, raised during the early 2.0 development phase, have been communicated to the new main ACAP Maintainer, who is also the primary developer leading the creation and enhancement of new features for Version 2.0. The Maintainer has made decisions for balancing development speed with feature delivery, reflecting their understanding of the project's scope and the perceived security needs. They are open to addressing these issues as time and priorities allow within the ACAP project timeline. +## XSS Vulnerability Awareness in ACAP 2.0 + +A YouTube video detailing steps for exploiting XSS vulnerabilities in the ACAP 2.0 crop recommendations system has been made private to limit exposure. This video serves as a critical resource for understanding the potential risks associated with these vulnerabilities. + +For ACAP Maintainers or developers interested in studying the content, please reach out to the current active ACAP Maintainer(s) for an invitation to access the video. Engaging with this material can provide valuable insights into the security challenges faced and inform future improvements to the system's security measures. + +
diff --git a/docs/pages/security.mdx b/docs/pages/security.mdx index f5817bba..cda94919 100644 --- a/docs/pages/security.mdx +++ b/docs/pages/security.mdx @@ -1,4 +1,6 @@ +import { useEffect, useState } from 'react' import { Callout, Steps } from 'nextra/components' +import AnchorModal from '@/components/AnchorModal' # Security Guidelines @@ -13,7 +15,14 @@ ACAP adheres to strict security practices as defined by its technology stack, st 1. Manually test and ensure using the [Firestore Web API](https://firebase.google.com/docs/firestore/quickstart) and [Firestore REST APIs](https://firebase.google.com/docs/firestore/use-rest-api) that: - (a) Signed-in users cannot perform **CREATE/EDIT/DELETE** operations in the Firestore collections and documents defined in the Firestore Rules. - NOTE: If there is a need to perform **CREATE/EDIT/DELETE** operations _**"directly"**_ in the Firestore collections or documents using the [Firestore Web API](https://firebase.google.com/docs/firestore/quickstart) or [Firestore REST APIs](https://firebase.google.com/docs/firestore/use-rest-api), please ensure the creation and testing of robust, new [Firestore Rules](https://firebase.google.com/docs/firestore/security/get-started) that will meet the "new" requirements (ACAP 1.0 only performs such operations thru the [backend NodeJS REST APIs](/directories/server), **Database #2**, **Database #3**). This ensures manageable security and safety, preventing security breaches like the cross-site scripting (XSS) attack example detailed [here](https://www.youtube.com/watch?v=b9UZ6_OCTaY). + NOTE: If there is a need to perform **CREATE/EDIT/DELETE** operations _**"directly"**_ in the Firestore collections or documents using the [Firestore Web API](https://firebase.google.com/docs/firestore/quickstart) or [Firestore REST APIs](https://firebase.google.com/docs/firestore/use-rest-api), please ensure the creation and testing of robust, new [Firestore Rules](https://firebase.google.com/docs/firestore/security/get-started) that will meet the "new" requirements (ACAP 1.0 only performs such operations thru the [backend NodeJS REST APIs](/directories/server), **Database #2**, **Database #3**). This ensures manageable security and safety, preventing security breaches like the cross-site scripting (XSS) attack example detailed at:

+ + A YouTube video detailing steps for exploiting XSS vulnerabilities in the ACAP 2.0 crop recommendations at https://www.youtube.com/watch?v=b9UZ6_OCTaY has been set to private permissions to limit exposure. This video is a resource for understanding the security challenges associated with these vulnerabilities and ACAP, which occurred starting on version 2.0 due to new development approaches and priorities. + + For ACAP Maintainers or developers interested in exploring the content, please contact the current active ACAP Maintainer(s) for an invitation to access the video. Engaging with this material can provide insights into the security considerations that have been acknowledged and inform future enhancements to the system's security measures. + - (b) Signed-in users cannot **CREATE** new Firestore collections and documents - (c) Public users without sign-in authentication cannot **VIEW** sensitive information such as phonebook contacts and email information From 54559ffec372f4edcda49decdea33a27466720eb Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Sat, 21 Sep 2024 06:18:35 +0800 Subject: [PATCH 3/6] fix: lint errors --- docs/components/AnchorModal.jsx | 16 ++++++++-------- docs/components/Modal/index.jsx | 4 ++-- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/components/AnchorModal.jsx b/docs/components/AnchorModal.jsx index a346b454..32e6ccf1 100644 --- a/docs/components/AnchorModal.jsx +++ b/docs/components/AnchorModal.jsx @@ -2,21 +2,21 @@ import { useState } from 'react' import Modal from '@/components/Modal' function AnchorModal({ - anchorText = 'Click Me', - modalTitle, - children + anchorText = 'Click Me', + modalTitle, + children }) { const [isModalOpen, setModalOpen] = useState(false) - return ( + return ( <> { - e.preventDefault() - setModalOpen(prev => !prev) - }}> + e.preventDefault() + setModalOpen(prev => !prev) + }}> {anchorText} @@ -28,7 +28,7 @@ function AnchorModal({ {children} - ) + ) } export default AnchorModal diff --git a/docs/components/Modal/index.jsx b/docs/components/Modal/index.jsx index a06def28..8f537fee 100644 --- a/docs/components/Modal/index.jsx +++ b/docs/components/Modal/index.jsx @@ -8,8 +8,8 @@ function Modal({ title, children, isOpen, onClose }) { const modalBgStyle = useMemo(() => { const bg = resolvedTheme === 'dark' - ? 'bg-neutral-800' - : 'bg-neutral-50' + ? 'bg-neutral-800' + : 'bg-neutral-50' return `${bg} rounded-lg shadow-lg p-6 max-w-md w-full` }, [resolvedTheme]) From b54d6f56e8a82265b1dc197992bc8ca30be09bae Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Sat, 21 Sep 2024 06:21:02 +0800 Subject: [PATCH 4/6] chore: remove extra text --- docs/pages/changelog.mdx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/docs/pages/changelog.mdx b/docs/pages/changelog.mdx index 21b83832..7034130f 100644 --- a/docs/pages/changelog.mdx +++ b/docs/pages/changelog.mdx @@ -66,13 +66,6 @@ Version 2.0 and later versions may have new requirements that will thrive on new > These issues, raised during the early 2.0 development phase, have been communicated to the new main ACAP Maintainer, who is also the primary developer leading the creation and enhancement of new features for Version 2.0. The Maintainer has made decisions for balancing development speed with feature delivery, reflecting their understanding of the project's scope and the perceived security needs. They are open to addressing these issues as time and priorities allow within the ACAP project timeline. -## XSS Vulnerability Awareness in ACAP 2.0 - -A YouTube video detailing steps for exploiting XSS vulnerabilities in the ACAP 2.0 crop recommendations system has been made private to limit exposure. This video serves as a critical resource for understanding the potential risks associated with these vulnerabilities. - -For ACAP Maintainers or developers interested in studying the content, please reach out to the current active ACAP Maintainer(s) for an invitation to access the video. Engaging with this material can provide valuable insights into the security challenges faced and inform future improvements to the system's security measures. - -
From 4e2cd17296ec364a5bc0eabb0d0379fdb17ed6ac Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Sat, 21 Sep 2024 06:29:55 +0800 Subject: [PATCH 5/6] fix: use prop-types on components --- docs/components/AnchorModal.jsx | 12 ++++++++++-- docs/components/Modal/index.jsx | 16 ++++++++++++---- docs/pages/articles/provinces-municipalities.mdx | 4 ++-- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/docs/components/AnchorModal.jsx b/docs/components/AnchorModal.jsx index 32e6ccf1..a12f01e5 100644 --- a/docs/components/AnchorModal.jsx +++ b/docs/components/AnchorModal.jsx @@ -1,10 +1,12 @@ import { useState } from 'react' +import PropTypes from 'prop-types' + import Modal from '@/components/Modal' function AnchorModal({ + children, anchorText = 'Click Me', - modalTitle, - children + modalTitle }) { const [isModalOpen, setModalOpen] = useState(false) @@ -31,4 +33,10 @@ function AnchorModal({ ) } +AnchorModal.propTypes = { + children: PropTypes.node, + anchorText: PropTypes.string, + modalTitle: PropTypes.string +} + export default AnchorModal diff --git a/docs/components/Modal/index.jsx b/docs/components/Modal/index.jsx index 8f537fee..9e5bcb50 100644 --- a/docs/components/Modal/index.jsx +++ b/docs/components/Modal/index.jsx @@ -1,11 +1,10 @@ import { useMemo } from 'react' import { useTheme } from 'next-themes' +import PropTypes from 'prop-types' -function Modal({ title, children, isOpen, onClose }) { +function Modal({ children, title, isOpen = false, onClose }) { const { resolvedTheme } = useTheme() - if (!isOpen) return null - const modalBgStyle = useMemo(() => { const bg = resolvedTheme === 'dark' ? 'bg-neutral-800' @@ -14,6 +13,8 @@ function Modal({ title, children, isOpen, onClose }) { return `${bg} rounded-lg shadow-lg p-6 max-w-md w-full` }, [resolvedTheme]) + if (!isOpen) return null + return (
@@ -36,4 +37,11 @@ function Modal({ title, children, isOpen, onClose }) { ) } -export default Modal \ No newline at end of file +Modal.propTypes = { + children: PropTypes.node, + title: PropTypes.string, + isOpen: PropTypes.bool, + onClose: PropTypes.func +} + +export default Modal diff --git a/docs/pages/articles/provinces-municipalities.mdx b/docs/pages/articles/provinces-municipalities.mdx index 1d6ed3a0..ee714874 100644 --- a/docs/pages/articles/provinces-municipalities.mdx +++ b/docs/pages/articles/provinces-municipalities.mdx @@ -12,8 +12,8 @@ export function FAQBox({ title, children, open = false }) { const detailsBgStyle = useMemo(() => { const bg = resolvedTheme === 'dark' - ? 'bg-neutral-800' - : 'bg-neutral-50' + ? 'bg-neutral-800' + : 'bg-neutral-50' return `last-of-type:mb-0 rounded-lg ${bg} p-2 mt-4` }, [resolvedTheme]) From 41b7bf94190109ad6949f342184bca3507d4f450 Mon Sep 17 00:00:00 2001 From: acaptutorials Date: Sat, 21 Sep 2024 06:36:47 +0800 Subject: [PATCH 6/6] chore: bold text --- docs/pages/security.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/pages/security.mdx b/docs/pages/security.mdx index cda94919..4bdf5756 100644 --- a/docs/pages/security.mdx +++ b/docs/pages/security.mdx @@ -19,7 +19,7 @@ ACAP adheres to strict security practices as defined by its technology stack, st - A YouTube video detailing steps for exploiting XSS vulnerabilities in the ACAP 2.0 crop recommendations at https://www.youtube.com/watch?v=b9UZ6_OCTaY has been set to private permissions to limit exposure. This video is a resource for understanding the security challenges associated with these vulnerabilities and ACAP, which occurred starting on version 2.0 due to new development approaches and priorities. + A YouTube video detailing steps for exploiting XSS vulnerabilities in the **ACAP 2.0 crop recommendations** at https://www.youtube.com/watch?v=b9UZ6_OCTaY has been set to private permissions to limit exposure. This video is a resource for understanding the security challenges associated with these vulnerabilities and ACAP, which occurred starting on **version 2.0** due to new development approaches and priorities. For ACAP Maintainers or developers interested in exploring the content, please contact the current active ACAP Maintainer(s) for an invitation to access the video. Engaging with this material can provide insights into the security considerations that have been acknowledged and inform future enhancements to the system's security measures.