From 30df1e7f2b7c0b54834032c0b9a8c360a0897814 Mon Sep 17 00:00:00 2001
From: Li Yi Yu <li@posthog.com>
Date: Thu, 9 Nov 2023 15:37:33 -0500
Subject: [PATCH] fix(surveys): allow target attributes for html (#18532)

---
 .../src/scenes/surveys/SurveyAppearance.tsx   | 20 ++++++++++---------
 frontend/src/scenes/surveys/utils.ts          |  7 +++++++
 2 files changed, 18 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/scenes/surveys/utils.ts

diff --git a/frontend/src/scenes/surveys/SurveyAppearance.tsx b/frontend/src/scenes/surveys/SurveyAppearance.tsx
index 27f593a273ccc..3f1fa5c4074b7 100644
--- a/frontend/src/scenes/surveys/SurveyAppearance.tsx
+++ b/frontend/src/scenes/surveys/SurveyAppearance.tsx
@@ -23,8 +23,8 @@ import {
 import { surveysLogic } from './surveysLogic'
 import { useValues } from 'kea'
 import React, { useEffect, useRef, useState } from 'react'
-import { sanitize } from 'dompurify'
 import { PayGateMini } from 'lib/components/PayGateMini/PayGateMini'
+import { sanitizeHTML } from './utils'
 
 interface SurveyAppearanceProps {
     type: SurveyQuestionType
@@ -284,12 +284,12 @@ export function BaseAppearance({
                     </div>
                 )}
                 <div className="question-textarea-wrapper">
-                    <div className="survey-question" dangerouslySetInnerHTML={{ __html: sanitize(question) }} />
+                    <div className="survey-question" dangerouslySetInnerHTML={{ __html: sanitizeHTML(question) }} />
                     {/* Using dangerouslySetInnerHTML is safe here, because it's taking the user's input and showing it to the same user.
                     They can try passing in arbitrary scripts, but it would show up only for them, so it's like trying to XSS yourself, where
                     you already have all the data. Furthermore, sanitization should catch all obvious attempts */}
                     {description && (
-                        <div className="description" dangerouslySetInnerHTML={{ __html: sanitize(description) }} />
+                        <div className="description" dangerouslySetInnerHTML={{ __html: sanitizeHTML(description) }} />
                     )}
                     {type === SurveyQuestionType.Open && (
                         <textarea
@@ -491,9 +491,9 @@ export function SurveyRatingAppearance({
                         </button>
                     </div>
                 )}
-                <div className="survey-question" dangerouslySetInnerHTML={{ __html: sanitize(question) }} />
+                <div className="survey-question" dangerouslySetInnerHTML={{ __html: sanitizeHTML(question) }} />
                 {description && (
-                    <div className="description" dangerouslySetInnerHTML={{ __html: sanitize(description) }} />
+                    <div className="description" dangerouslySetInnerHTML={{ __html: sanitizeHTML(description) }} />
                 )}
                 <div className="rating-section">
                     <div className="rating-options">
@@ -591,9 +591,9 @@ export function SurveyMultipleChoiceAppearance({
                         </button>
                     </div>
                 )}
-                <div className="survey-question" dangerouslySetInnerHTML={{ __html: sanitize(question) }} />
+                <div className="survey-question" dangerouslySetInnerHTML={{ __html: sanitizeHTML(question) }} />
                 {description && (
-                    <div className="description" dangerouslySetInnerHTML={{ __html: sanitize(description) }} />
+                    <div className="description" dangerouslySetInnerHTML={{ __html: sanitizeHTML(description) }} />
                 )}
                 <div className="multiple-choice-options">
                     {(multipleChoiceQuestion.choices || []).map((choice, idx) => (
@@ -659,11 +659,13 @@ export function SurveyThankYou({ appearance }: { appearance: SurveyAppearanceTyp
                 </div>
                 <h3
                     className="thank-you-message-header"
-                    dangerouslySetInnerHTML={{ __html: sanitize(appearance?.thankYouMessageHeader || 'Thank you!') }}
+                    dangerouslySetInnerHTML={{
+                        __html: sanitizeHTML(appearance?.thankYouMessageHeader || 'Thank you!'),
+                    }}
                 />
                 <div
                     className="thank-you-message-body"
-                    dangerouslySetInnerHTML={{ __html: sanitize(appearance?.thankYouMessageDescription || '') }}
+                    dangerouslySetInnerHTML={{ __html: sanitizeHTML(appearance?.thankYouMessageDescription || '') }}
                 />
                 <Button appearance={appearance} onSubmit={() => undefined}>
                     Close
diff --git a/frontend/src/scenes/surveys/utils.ts b/frontend/src/scenes/surveys/utils.ts
new file mode 100644
index 0000000000000..7ab39dc59c6e5
--- /dev/null
+++ b/frontend/src/scenes/surveys/utils.ts
@@ -0,0 +1,7 @@
+import { sanitize } from 'dompurify'
+
+const sanitizeConfig = { ADD_ATTR: ['target'] }
+
+export function sanitizeHTML(html: string): string {
+    return sanitize(html, sanitizeConfig)
+}