From 11307525d12695e8f93ab14738943056ca3619c9 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 18 Mar 2025 12:57:07 -0700
Subject: [PATCH] UI: Validate both org logo URLs, accept data URIs (#27160)

## For #26271


![ezgif-582a8acaa8686e](https://github.com/user-attachments/assets/4284bbf7-8708-46f3-b020-f4039f8bd1b0)

- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/26271-fix-org-logo-url-validation       |  1 +
 .../admin/OrgSettingsPage/cards/Info/Info.tsx   | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 changes/26271-fix-org-logo-url-validation

diff --git a/changes/26271-fix-org-logo-url-validation b/changes/26271-fix-org-logo-url-validation
new file mode 100644
index 0000000000..f20781f2af
--- /dev/null
+++ b/changes/26271-fix-org-logo-url-validation
@@ -0,0 +1 @@
+* Add validation to both org logo URL fields, and accept data URIs as valid
\ No newline at end of file
diff --git a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
index 20256db23b..8a3a1ec38b 100644
--- a/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
+++ b/frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 
+import isDataURI from "validator/lib/isDataURI";
+
 import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
@@ -30,6 +32,9 @@ interface IOrgInfoFormErrors {
 const baseClass = "app-config-form";
 const cardClass = "org-info";
 
+const validateOrgLogoURL = (url: string) =>
+  isDataURI(url) || validUrl({ url, protocols: ["http", "https"] });
+
 const Info = ({
   appConfig,
   handleSubmit,
@@ -67,13 +72,17 @@ const Info = ({
       errors.org_name = "Organization name must be present";
     }
 
-    if (
-      orgLogoURL &&
-      !validUrl({ url: orgLogoURL, protocols: ["http", "https"] })
-    ) {
+    if (orgLogoURL && !validateOrgLogoURL(orgLogoURL)) {
       errors.org_logo_url = `${orgLogoURL} is not a valid URL`;
     }
 
+    if (
+      orgLogoURLLightBackground &&
+      !validateOrgLogoURL(orgLogoURLLightBackground)
+    ) {
+      errors.org_logo_url_light_background = `${orgLogoURL} is not a valid URL`;
+    }
+
     if (!orgSupportURL) {
       errors.org_support_url = `Organization support URL must be present`;
     } else if (