chore: add biome-ignore comments for dangerouslySetInnerHTML (#26848)

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx

@@ -209,6 +209,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
           <div className="mx-auto my-0 max-w-3xl md:my-24">
             <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
               <div className="main sm:border-subtle bg-default -mx-4 rounded-md border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
+                {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTMLClient */}
                 <div
                   className="text-emphasis prose prose-sm dark:prose-invert max-w-none"
                   dangerouslySetInnerHTML={{ __html: markdownToSafeHTMLClient(customPageMessage) }}

apps/web/app/(use-page-wrapper)/layout.tsx

@@ -25,6 +25,7 @@ export default async function PageWrapperLayout({ children }: { children: React.
       <PageWrapper requiresLicense={false} nonce={nonce}>
         {children}
         {scripts.map((script) => (
+          // biome-ignore lint/security/noDangerouslySetInnerHtml: Injected scripts from env vars
           <Script
             key={script.id}
             nonce={nonce}

apps/web/app/SpeculationRules.tsx

@@ -23,6 +23,7 @@ export function SpeculationRules({
   };
 
   return (
+    // biome-ignore lint/security/noDangerouslySetInnerHtml: Speculation rules require inline script
     <Script
       dangerouslySetInnerHTML={{
         __html: `${JSON.stringify(speculationRules)}`,

apps/web/components/PageWrapper.tsx

@@ -84,6 +84,7 @@ function PageWrapper(props: AppProps) {
         // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
         // And we don't want it to error here anyways
         // eslint-disable-next-line react/no-danger
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Setting page status requires inline script
         dangerouslySetInnerHTML={{ __html: `window.CalComPageStatus = '${pageStatus}'` }}
       />
 

apps/web/components/apps/installation/EventTypesStepCard.tsx

@@ -63,6 +63,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
             </small>
           </div>
           {Boolean(description) && (
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
             <div
               className="text-subtle line-clamp-4 wrap-break-word text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                

apps/web/components/eventtype/EventTypeDescriptionSafeHTML.tsx

@@ -4,6 +4,7 @@ export type EventTypeDescriptionSafeProps = {
 
 export const EventTypeDescriptionSafeHTML = ({ eventType }: EventTypeDescriptionSafeProps) => {
   const props: JSX.IntrinsicElements["div"] = { suppressHydrationWarning: true };
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via descriptionAsSafeHTML
   if (eventType.description)
     props.dangerouslySetInnerHTML = { __html: eventType.descriptionAsSafeHTML || "" };
   return <div {...props} />;

apps/web/components/team/screens/Team.tsx

@@ -40,6 +40,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
                 <div
                   className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   // eslint-disable-next-line react/no-danger
+                  // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
                   dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(member.bio) }}
                 />
               </>

apps/web/modules/apps/[slug]/slug-view.tsx

@@ -67,6 +67,7 @@ function SingleAppPage(props: AppDataProps) {
       body={
         <>
           { }
+          {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
           <div dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(source.content) }} />
         </>
       }

apps/web/modules/apps/components/AppCard.tsx

@@ -127,6 +127,7 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
             <span>{props.rating} stars</span> <Icon name="star" className="ml-1 mt-0.5 h-4 w-4 text-yellow-600" />
             <span className="pl-1 text-subtle">{props.reviews} reviews</span>
           </div> */}
+      {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
       <p
         className="text-default mt-2 grow text-sm"
         dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(app.description) }}

apps/web/modules/bookings/components/EventMeta.tsx

@@ -179,6 +179,7 @@ export const EventMeta = ({
               <ScrollableWithGradients
                 className="wrap-break-word scroll-bar max-h-[180px] max-w-full overflow-y-auto pr-4"
                 ariaLabel={t("description")}>
+                {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTMLClient */}
                 <div
                   dangerouslySetInnerHTML={{
                     __html: markdownToSafeHTMLClient(translatedDescription ?? event.description),

apps/web/modules/bookings/views/bookings-single-view.tsx

@@ -775,6 +775,7 @@ export default function Success(props: PageProps) {
 
                           return (
                             <Fragment key={field.name}>
+                              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
                               <div
                                 className="text-emphasis mt-4 font-medium"
                                 dangerouslySetInnerHTML={{

apps/web/modules/ee/organizations/other-team-profile-view.tsx

@@ -264,6 +264,7 @@ const OtherTeamProfileView = () => {
                 {team && !isBioEmpty && (
                   <>
                     <Label className="text-emphasis mt-5">{t("about")}</Label>
+                    {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
                     <div
                       className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                        

apps/web/modules/ee/organizations/profile.tsx

@@ -163,6 +163,7 @@ const OrgProfileView = ({
               {!isBioEmpty && (
                 <>
                   <Label className="text-emphasis mt-5">{t("about")}</Label>
+                  {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
                   <div
                     className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{

apps/web/modules/ee/teams/views/team-profile-view.tsx

@@ -169,6 +169,7 @@ const ProfileView = () => {
             {team && !isBioEmpty && (
               <>
                 <Label className="text-emphasis mt-5">{t("about")}</Label>
+                {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
                 <div
                   className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(team.bio ?? null) }}

apps/web/modules/event-types/components/EventTypeDescription.tsx

@@ -58,6 +58,7 @@ export const EventTypeDescription = ({
               shortenDescription ? "line-clamp-4 [&>*:not(:first-child)]:hidden" : ""
             )}
             // eslint-disable-next-line react/no-danger
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
             dangerouslySetInnerHTML={{
               __html: markdownToSafeHTML(eventType.descriptionAsSafeHTML || ""),
             }}

apps/web/modules/event-types/components/tabs/advanced/FormBuilder.tsx

@@ -891,6 +891,7 @@ function FieldLabel({ field }: { field: RhfFormField }) {
   if (!fieldTypeConfigVariants || !variantsConfig) {
     if (fieldsThatSupportLabelAsSafeHtml.includes(field.type)) {
       return (
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTMLClient
         <span
           dangerouslySetInnerHTML={{
             // Derive from field.label because label might change in b/w and field.labelAsSafeHtml will not be updated.

apps/web/modules/signup-view.tsx

@@ -328,6 +328,7 @@ export default function Signup({
         <>
           {process.env.NEXT_PUBLIC_GTM_ID && (
             <>
+              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: GTM script injection */}
               <Script
                 id="gtm-init-script"
                 // It is strictly not necessary to disable, but in a future update of react/no-danger this will error.
@@ -341,6 +342,7 @@ export default function Signup({
                     })(window, document, 'script', 'dataLayer', '${process.env.NEXT_PUBLIC_GTM_ID}');`,
                 }}
               />
+              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: GTM noscript fallback */}
               <noscript
                 dangerouslySetInnerHTML={{
                   __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,

apps/web/modules/team/team-view.tsx

@@ -154,6 +154,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
           </p>
           {!isBioEmpty && (
             <>
+              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via safeBio */}
               <div
                 className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                 dangerouslySetInnerHTML={{ __html: team.safeBio }}

apps/web/modules/users/views/users-public-view.tsx

@@ -97,6 +97,7 @@ export function UserPage(props: PageProps) {
               </h1>
               {!isBioEmpty && (
                 <>
+                  {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via safeBio */}
                   <div
                     className="text-default wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     dangerouslySetInnerHTML={{ __html: props.safeBio }}

apps/web/modules/videos/views/videos-single-view.tsx

@@ -608,6 +608,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
             <>
               <h3>{t("description")}:</h3>
 
+              {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
               <div
                 className="prose-sm prose prose-invert"
                 dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(booking.description) }}

apps/web/pages/_document.tsx

@@ -55,6 +55,7 @@ class MyDocument extends Document<Props> {
           <script
             id="newLocale"
             // eslint-disable-next-line react/no-danger
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Setting locale and theme requires inline script
             dangerouslySetInnerHTML={{
               __html: `
               window.calNewLocale = "${newLocale}";

apps/web/pages/router/index.tsx

@@ -18,6 +18,7 @@ export default function Router({ form, message, errorMessage }: inferSSRProps<ty
       <div className="mx-auto my-0 max-w-3xl md:my-24">
         <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
           <div className="text-default bg-default -mx-4 rounded-sm border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
+            {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML */}
             <div
               className="prose prose-sm dark:prose-invert max-w-none"
               dangerouslySetInnerHTML={{

packages/app-store/BookingPageTagManager.tsx

@@ -132,6 +132,7 @@ export default function BookingPageTagManager({
           });
 
           return (
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: Analytics script injection
             <Script
               data-testid={`cal-analytics-app-${appId}`}
               src={parseValue(script.src)}

packages/emails/src/components/Info.tsx

@@ -22,6 +22,7 @@ export const Info = (props: {
       <p
         className="dark:text-darkgray-600 mt-2 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
         // eslint-disable-next-line react/no-danger
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
         dangerouslySetInnerHTML={{
           __html: htmlContent
             .replaceAll("<p>", `<p style="${css}">`)

packages/emails/src/components/RawHtml.tsx

@@ -1,6 +1,7 @@
 /** @see https://gist.github.com/zomars/4c366a0118a5b7fb391529ab1f27527a */
 const RawHtml = ({ html = "" }) => (
   // eslint-disable-next-line react/no-danger
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Email template raw HTML injection
   <script dangerouslySetInnerHTML={{ __html: `</script>${html}<script>` }} />
 );
 

packages/features/form-builder/FormBuilderField.tsx

@@ -24,6 +24,7 @@ import { getTranslatedConfig as getTranslatedVariantsConfig } from "./utils/vari
 const renderLabel = (field: Partial<RhfFormField>) => {
   if (field.labelAsSafeHtml) {
     return (
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via markdownToSafeHTML
       <span
         dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(field.labelAsSafeHtml) }}
       />

packages/ui/components/form/checkbox/Checkbox.tsx

@@ -91,6 +91,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                   />
                 </div>
                 {descriptionAsSafeHtml ? (
+                  // biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via descriptionAsSafeHtml prop
                   <span
                     className={classNames(
                       "text-default ml-2 text-sm [&_a]:text-blue-500",