Merge pull request #1829 from isomerpages/release/0.81.0

* fix(media): should not have files that begin with underscore (#1819)

## Problem

currently files that start with _ are ignored. this means that in the final output, the site does not have the broken link.

this issue is quite existent in our sites (eg. https://www.cdc.gov.sg/our-programmes/gallery/2021/) 

when i did a string search, this lead to quite a number of sites with these types of images. this is not ideal, and as such this edge case will be coded out as part of the link checker for user to fix

Tests 
- [ ] enter into a repo and try to rename an image into something with an leading underscore.
- [ ] asset that you get the error message as shown below
![Screenshot 2024-03-05 at 2 03 20 PM](https://github.com/isomerpages/isomercms-frontend/assets/42832651/95fbccc9-aa7e-4fae-831c-2ccbb236c8c7)
- [ ] upload an image named '_name.png' into the images folder. assert that the leading underscore gets stripped off


https://github.com/isomerpages/isomercms-frontend/assets/42832651/1ce91503-04b0-442e-8fef-10ae99e3129c

* fix(sanitiseUrl): fix limitations with library (#1821)

## Problem

The sanitize-url library does filters HTML entities, but it does not do so recursively. By nesting HTML entities, it is possible to create a URL which specifies the JavaScript protocol handler.

Closes GTA-24-006

## Solution

Handroll a quick url constructor and check that the protocols are adhered to. 

**Breaking Changes**

<!-- Does this PR contain any backward incompatible changes? If so, what are they and should there be special considerations for release? -->

- [ ] Yes - this PR contains breaking changes
  - Details ...
- [X] No - this PR is backwards compatible with ALL of the following feature flags in this [doc](https://www.notion.so/opengov/Existing-feature-flags-518ad2cdc325420893a105e88c432be5)

## Tests

<!-- What tests should be run to confirm functionality? -->
- [ ] Login via github and visit "http://localhost:3000/sites/kishore-test-dev-gh/contact-us" 
- [ ] when hovering over `[+65 6123 4589](tel:+6561234589)` verify that it links to `tel:+6561234589`
- [ ] when hovering over `[[email protected]](mailto:[email protected])` verify that it links to `[email protected]`
- [ ] when hovering over `[online form](https://www.form.gov.sg/)` verify that it links to `https://www.form.gov.sg/`

<img width="533" alt="Screenshot 2024-03-05 at 1 10 36 PM" src="https://github.com/isomerpages/isomercms-frontend/assets/42832651/87c5edbb-8744-47d1-8b9d-01f38893dc15">

* 0.81.0

---------

Co-authored-by: Alexander Lee <[email protected]>
Co-authored-by: Kishore <[email protected]>

CHANGELOG.md

@@ -4,8 +4,16 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v0.81.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.80.0...v0.81.0)
+
+- fix(sanitiseUrl): fix limitations with library [`#1821`](https://github.com/isomerpages/isomercms-frontend/pull/1821)
+- fix(media): should not have files that begin with underscore [`#1819`](https://github.com/isomerpages/isomercms-frontend/pull/1819)
+- 0.80.0 [`#1826`](https://github.com/isomerpages/isomercms-frontend/pull/1826)
+
 #### [v0.80.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.79.0...v0.80.0)
 
+> 8 March 2024
+
 - fix(media): use encoded params for mediaDirectoryName [`#1825`](https://github.com/isomerpages/isomercms-frontend/pull/1825)
 - 0.79.0 (develop) [`#1823`](https://github.com/isomerpages/isomercms-frontend/pull/1823)
 
@@ -160,16 +168,15 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 > 6 December 2023
 
-- fix(embed-views): add a max width [`#1729`](https://github.com/isomerpages/isomercms-frontend/pull/1729)
-- fix(blockwrapper): remove padding [`#1728`](https://github.com/isomerpages/isomercms-frontend/pull/1728)
 - fix(editpagelayout): shift context call elsewhere [`c95b2ab`](https://github.com/isomerpages/isomercms-frontend/commit/c95b2ab7e4909d0b9852e8603bc5995a716dc743)
 - fix(legacyeditpage): minor style fix so the editor grows [`ad8b36c`](https://github.com/isomerpages/isomercms-frontend/commit/ad8b36cfa09c2bafb4e1c44d65343d2621e2d1c8)
 
 #### [v0.63.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.62.0...v0.63.0)
 
-> 5 December 2023
+> 6 December 2023
 
-- chore: swap preview fonts [`#1715`](https://github.com/isomerpages/isomercms-frontend/pull/1715)
+- fix(embed-views): add a max width [`#1729`](https://github.com/isomerpages/isomercms-frontend/pull/1729)
+- fix(blockwrapper): remove padding [`#1728`](https://github.com/isomerpages/isomercms-frontend/pull/1728)
 - feat(editor): enhance image bubble menu with more functions [`#1721`](https://github.com/isomerpages/isomercms-frontend/pull/1721)
 - feat(editor): feature flag complex blocks [`#1720`](https://github.com/isomerpages/isomercms-frontend/pull/1720)
 - fix(tables): update table behaviour [`#1722`](https://github.com/isomerpages/isomercms-frontend/pull/1722)
@@ -189,12 +196,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat(tiptap): add card grid block [`#1701`](https://github.com/isomerpages/isomercms-frontend/pull/1701)
 - feat(tiptap): allow inserting of complex blocks [`#1697`](https://github.com/isomerpages/isomercms-frontend/pull/1697)
 - 0.62.0 to develop [`#1710`](https://github.com/isomerpages/isomercms-frontend/pull/1710)
-- fix(media): fix logic for disabling button in create media folder modal [`#1712`](https://github.com/isomerpages/isomercms-frontend/pull/1712)
 
 #### [v0.62.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.61.0...v0.62.0)
 
 > 28 November 2023
 
+- fix(media): fix logic for disabling button in create media folder modal [`#1712`](https://github.com/isomerpages/isomercms-frontend/pull/1712)
 - Chore/update regex [`#1703`](https://github.com/isomerpages/isomercms-frontend/pull/1703)
 - fix(media): allow creating folders in empty folder [`#1702`](https://github.com/isomerpages/isomercms-frontend/pull/1702)
 - 0.61.0 (develop) [`#1700`](https://github.com/isomerpages/isomercms-frontend/pull/1700)
@@ -210,12 +217,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat(tiptap): add Instagram embed proper node handler [`#1688`](https://github.com/isomerpages/isomercms-frontend/pull/1688)
 - fix(updateLinkModal): update link + proper default [`#1692`](https://github.com/isomerpages/isomercms-frontend/pull/1692)
 - 0.60.0 [`#1690`](https://github.com/isomerpages/isomercms-frontend/pull/1690)
-- fix(input): empty input validation [`#1691`](https://github.com/isomerpages/isomercms-frontend/pull/1691)
 
 #### [v0.60.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.59.0...v0.60.0)
 
 > 21 November 2023
 
+- fix(input): empty input validation [`#1691`](https://github.com/isomerpages/isomercms-frontend/pull/1691)
 - is-714/chore: add copy and layout changes [`#1687`](https://github.com/isomerpages/isomercms-frontend/pull/1687)
 - IS-780 fix(height): fix editor + preview heights [`#1686`](https://github.com/isomerpages/isomercms-frontend/pull/1686)
 - IS-782-Editor-File-text-always-comes-out-as-file-regardless-of-text [`#1685`](https://github.com/isomerpages/isomercms-frontend/pull/1685)
@@ -292,13 +299,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat(media): introduce enhancement to media pages [`#1628`](https://github.com/isomerpages/isomercms-frontend/pull/1628)
 - feat(blocks): rollback handler [`#1603`](https://github.com/isomerpages/isomercms-frontend/pull/1603)
 - 0.54.0 to develop [`#1622`](https://github.com/isomerpages/isomercms-frontend/pull/1622)
-- feat(media): introduce new image preview card common component [`#1620`](https://github.com/isomerpages/isomercms-frontend/pull/1620)
-- fix(editpage): change query key from object to array [`#1623`](https://github.com/isomerpages/isomercms-frontend/pull/1623)
 
 #### [v0.54.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.53.0...v0.54.0)
 
-> 25 October 2023
+> 26 October 2023
 
+- feat(media): introduce new image preview card common component [`#1620`](https://github.com/isomerpages/isomercms-frontend/pull/1620)
+- fix(editpage): change query key from object to array [`#1623`](https://github.com/isomerpages/isomercms-frontend/pull/1623)
 - Fix/login page layout [`#1619`](https://github.com/isomerpages/isomercms-frontend/pull/1619)
 - chore: add sgidlogin page story [`#1595`](https://github.com/isomerpages/isomercms-frontend/pull/1595)
 - IS-614-Make-it-easy-to-view-staging-on-mobile [`#1617`](https://github.com/isomerpages/isomercms-frontend/pull/1617)
@@ -315,16 +322,16 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat: allow Isomer admins to edit on email-login [`#1604`](https://github.com/isomerpages/isomercms-frontend/pull/1604)
 - fix(settings): use env var [`#1609`](https://github.com/isomerpages/isomercms-frontend/pull/1609)
 - release/v0.52.0 [`#1600`](https://github.com/isomerpages/isomercms-frontend/pull/1600)
+
+#### [v0.52.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.51.1...v0.52.0)
+
+> 19 October 2023
+
 - fix: errors indexes [`#1610`](https://github.com/isomerpages/isomercms-frontend/pull/1610)
 - fix(navbar): fix race condition when retrieving second level data [`#1608`](https://github.com/isomerpages/isomercms-frontend/pull/1608)
 - fix(navbar): ensure all queries are loaded first [`#1607`](https://github.com/isomerpages/isomercms-frontend/pull/1607)
 - fix(media): support replacement of media src with spaces [`#1606`](https://github.com/isomerpages/isomercms-frontend/pull/1606)
 - chore(hooks): add timeout [`#1605`](https://github.com/isomerpages/isomercms-frontend/pull/1605)
-
-#### [v0.52.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.51.1...v0.52.0)
-
-> 18 October 2023
-
 - fix(media): adjust query key to load image in preview on upload [`#1602`](https://github.com/isomerpages/isomercms-frontend/pull/1602)
 - Feat/sgid govt rollout [`#1594`](https://github.com/isomerpages/isomercms-frontend/pull/1594)
 - feat(navbar): upgrade navbar to use v2 endpoints [`#1592`](https://github.com/isomerpages/isomercms-frontend/pull/1592)
@@ -338,12 +345,12 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 > 18 October 2023
 
 - fix(mediasselectmodal): update dir name [`#1596`](https://github.com/isomerpages/isomercms-frontend/pull/1596)
-- fix(media): add limit [`#1591`](https://github.com/isomerpages/isomercms-frontend/pull/1591)
 
 #### [v0.51.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.50.0...v0.51.0)
 
 > 16 October 2023
 
+- fix(media): add limit [`#1591`](https://github.com/isomerpages/isomercms-frontend/pull/1591)
 - chore(hooks): remove `useGetMediaFolders` [`#1582`](https://github.com/isomerpages/isomercms-frontend/pull/1582)
 - feat(homepage): allow user to override changes when there is a conflict [`#1588`](https://github.com/isomerpages/isomercms-frontend/pull/1588)
 - ref(media): update media hooks + components [`#1581`](https://github.com/isomerpages/isomercms-frontend/pull/1581)
@@ -390,13 +397,13 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 > 3 October 2023
 
-- fix(herocenteredlayout): make dropdown optional [`#1556`](https://github.com/isomerpages/isomercms-frontend/pull/1556)
 - fix(hero.scss): css fix [`af09212`](https://github.com/isomerpages/isomercms-frontend/commit/af09212f81dbf845eae7579632fecb2a26d3eb1a)
 
 #### [v0.47.0](https://github.com/isomerpages/isomercms-frontend/compare/v0.46.0...v0.47.0)
 
 > 3 October 2023
 
+- fix(herocenteredlayout): make dropdown optional [`#1556`](https://github.com/isomerpages/isomercms-frontend/pull/1556)
 - Fix/text cards design [`#1535`](https://github.com/isomerpages/isomercms-frontend/pull/1535)
 - chore(cleanup): delete unused styles [`#1548`](https://github.com/isomerpages/isomercms-frontend/pull/1548)
 - refactor(hero): duplicate changes from template [`#1551`](https://github.com/isomerpages/isomercms-frontend/pull/1551)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "isomercms-frontend",
-  "version": "0.80.0",
+  "version": "0.81.0",
   "private": true,
   "engines": {
     "node": ">=16.0.0"

src/components/MediaSettingsModal/MediaSettingsSchema.jsx

@@ -27,6 +27,13 @@ export const MediaSettingsSchema = (existingTitlesArray = []) =>
           return (value.match(/\./g) || []).length <= 1
         }
       )
+      .test(
+        "File not supported",
+        "File names must begin with a letter or number",
+        (value) => {
+          return /^[a-zA-Z0-9]/.test(value)
+        }
+      )
       .min(
         MEDIA_SETTINGS_TITLE_MIN_LENGTH,
         `Title must be longer than ${MEDIA_SETTINGS_TITLE_MIN_LENGTH} characters`

src/hooks/mediaHooks/useCreateMultipleMedia.ts

@@ -48,6 +48,8 @@ export const useCreateMultipleMedia = (
           // with a safe replacement character
           newFileName: `${getFileName(file.name)
             .replaceAll(/[\W\s]/g, "_")
+            // Remove any leading underscores
+            .replace(/^_+/g, "")
             .trim()}.${getFileExt(file.name)}`,
         }))
       )

src/templates/contact-us/ContactsSection.jsx

@@ -1,10 +1,10 @@
-import { sanitizeUrl } from "@braintree/sanitize-url"
 import DOMPurify from "dompurify"
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { sanitiseTemplateUrl } from "templates/utils/sanitiseTemplateUrl"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 const Contact = forwardRef(({ contact }, ref) => (
@@ -30,7 +30,7 @@ const Contact = forwardRef(({ contact }, ref) => (
               ])}
             >
               <a
-                href={sanitizeUrl(`tel:${d[key].replace(/\s/g, "")}`)}
+                href={sanitiseTemplateUrl(`tel:${d[key].replace(/\s/g, "")}`)}
                 onClick={(event) => event.preventDefault()}
               >
                 <u>{d[key]}</u>
@@ -47,7 +47,7 @@ const Contact = forwardRef(({ contact }, ref) => (
               ])}
             >
               <a
-                href={sanitizeUrl(`mailto:${d[key]}`)}
+                href={sanitiseTemplateUrl(`mailto:${d[key]}`)}
                 onClick={(event) => event.preventDefault()}
               >
                 <u>{d[key]}</u>

src/templates/contact-us/FeedbackSection.jsx

@@ -1,9 +1,9 @@
-import { sanitizeUrl } from "@braintree/sanitize-url"
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { sanitiseTemplateUrl } from "templates/utils/sanitiseTemplateUrl"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 const TemplateFeedbackSection = forwardRef(({ feedback }, ref) => (
@@ -38,7 +38,7 @@ const TemplateFeedbackSection = forwardRef(({ feedback }, ref) => (
             If you have a query, feedback or wish to report a problem related to
             this website, please fill in the{" "}
             <a
-              href={sanitizeUrl(feedback)}
+              href={sanitiseTemplateUrl(feedback)}
               rel="noopener noreferrer"
               target="_blank"
               onClick={(event) => event.preventDefault()}

src/templates/contact-us/LocationsSection.jsx

@@ -1,9 +1,9 @@
-import { sanitizeUrl } from "@braintree/sanitize-url"
 import PropTypes from "prop-types"
 import { forwardRef } from "react"
 
 import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
+import { sanitiseTemplateUrl } from "templates/utils/sanitiseTemplateUrl"
 import { getClassNames } from "templates/utils/stylingUtils"
 
 const LocationHours = ({ operatingHours }) => (
@@ -38,8 +38,8 @@ const LocationAddress = ({ location }) => (
       <a
         href={
           location.maps_link
-            ? sanitizeUrl(location.maps_link)
-            : sanitizeUrl(
+            ? sanitiseTemplateUrl(location.maps_link)
+            : sanitiseTemplateUrl(
                 `https://maps.google.com/?q=${location.address
                   .join("+")
                   .replace(/\s/g, "+")}`

src/templates/utils/sanitiseTemplateUrl.ts

@@ -0,0 +1,14 @@
+import { sanitizeUrl } from "@braintree/sanitize-url"
+
+export function sanitiseTemplateUrl(userUrl: string): string {
+  const allowedProtocols = ["mailto:", "https:", "tel:"]
+  try {
+    const url = new URL(userUrl)
+    if (allowedProtocols.includes(url.protocol)) {
+      return sanitizeUrl(url.href)
+    }
+  } catch (e) {
+    return "about:blank"
+  }
+  return "about:blank"
+}