fix: secure send embed preview email action & show env id in email body (#2475)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/actions.ts

@@ -11,22 +11,33 @@ import { getSurvey, updateSurvey } from "@formbricks/lib/survey/service";
 import { formatSurveyDateFields } from "@formbricks/lib/survey/util";
 import { AuthenticationError, AuthorizationError, ResourceNotFoundError } from "@formbricks/types/errors";
 
-type TSendEmailActionArgs = {
-  to: string;
-  subject: string;
-  html: string;
-};
-
-export const sendEmailAction = async ({ html, subject, to }: TSendEmailActionArgs) => {
+export const sendEmbedSurveyPreviewEmailAction = async (surveyId: string) => {
   const session = await getServerSession(authOptions);
   if (!session) {
     throw new AuthenticationError("Not authenticated");
   }
-  if (session.user.email !== to) {
-    throw new AuthorizationError("Not authorized");
+
+  const survey = await getSurvey(surveyId);
+  if (!survey) {
+    throw new ResourceNotFoundError("Survey", surveyId);
   }
 
-  return await sendEmbedSurveyPreviewEmail(to, subject, html);
+  const isUserAuthorized = await canUserAccessSurvey(session.user.id, surveyId);
+  if (!isUserAuthorized) {
+    throw new AuthorizationError("Not authorized");
+  }
+  const rawEmailHtml = await getEmailTemplateHtml(surveyId);
+  const emailHtml = rawEmailHtml
+    .replaceAll("?preview=true&", "?")
+    .replaceAll("?preview=true&;", "?")
+    .replaceAll("?preview=true", "");
+
+  return await sendEmbedSurveyPreviewEmail(
+    session.user.email,
+    "Formbricks Email Survey Preview",
+    emailHtml,
+    survey.environmentId
+  );
 };
 
 export async function generateResultShareUrlAction(surveyId: string): Promise<string> {

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/shareEmbedTabs/EmailTab.tsx

@@ -9,7 +9,7 @@ import { Button } from "@formbricks/ui/Button";
 import CodeBlock from "@formbricks/ui/CodeBlock";
 import LoadingSpinner from "@formbricks/ui/LoadingSpinner";
 
-import { getEmailHtmlAction, sendEmailAction } from "../../actions";
+import { getEmailHtmlAction, sendEmbedSurveyPreviewEmailAction } from "../../actions";
 
 interface EmailTabProps {
   surveyId: string;
@@ -35,17 +35,11 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
       const emailHtml = await getEmailHtmlAction(surveyId);
       setEmailHtmlPreview(emailHtml);
     }
-  });
+  }, [surveyId]);
 
-  const subject = "Formbricks Email Survey Preview";
-
-  const sendPreviewEmail = async (html) => {
+  const sendPreviewEmail = async () => {
     try {
-      await sendEmailAction({
-        html,
-        subject,
-        to: email,
-      });
+      await sendEmbedSurveyPreviewEmailAction(surveyId);
       toast.success("Email sent!");
     } catch (err) {
       if (err instanceof AuthenticationError) {
@@ -78,7 +72,7 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
               variant="secondary"
               title="send preview email"
               aria-label="send preview email"
-              onClick={() => sendPreviewEmail(emailHtmlPreview)}
+              onClick={() => sendPreviewEmail()}
               EndIcon={MailIcon}
               className="shrink-0">
               Send Preview
@@ -115,7 +109,9 @@ export default function EmailTab({ surveyId, email }: EmailTabProps) {
           </div>
           <div className="">
             <div className="mb-2 border-b border-slate-200 pb-2 text-sm">To : {email || "user@mail.com"}</div>
-            <div className="border-b border-slate-200 pb-2 text-sm">Subject : {subject}</div>
+            <div className="border-b border-slate-200 pb-2 text-sm">
+              Subject : Formbricks Email Survey Preview
+            </div>
             <div className="p-4">
               {emailHtml ? (
                 <div dangerouslySetInnerHTML={{ __html: emailHtmlPreview }}></div>

packages/lib/emails/emails.ts

@@ -252,14 +252,21 @@ export const sendResponseFinishedEmail = async (
   });
 };
 
-export const sendEmbedSurveyPreviewEmail = async (to: string, subject: string, html: string) => {
+export const sendEmbedSurveyPreviewEmail = async (
+  to: string,
+  subject: string,
+  html: string,
+  environmentId: string
+) => {
   await sendEmail({
     to: to,
     subject: subject,
     html: withEmailTemplate(`
-    <h1>Preview Email Embed</h1>
-    <p>This is how the code snippet looks embedded into an email:</p>
-    ${html}`),
+    <h1>Preview</h1>
+    <p>This is how the code snippet looks embedded into an email 👇</p>
+    <p style="font-size:0.8em;"><b>Didn't request this?</b> Help us fight spam and forward this mail to hola@formbricks.com</p>
+    ${html}
+    <p style="font-size:0.8em; color:gray; text-align:center">Environment ID: ${environmentId}</p>`),
   });
 };