⚠️ Potential issue

Remove dangerouslySetInnerHTML to prevent XSS attacks.

This component exposes users to cross-site scripting (XSS) attacks by using dangerouslySetInnerHTML. The static analysis tool correctly flagged this security vulnerability. You should sanitize content or use safer React patterns instead.

Consider these safer alternatives:

-function TestComponent() {
- // ruleid:react-dangerouslysetinnerhtml
- return <div dangerouslySetInnerHTML={createMarkup()} />;
-}
+function TestComponent() {
+ // Use text content directly or sanitize with a library like DOMPurify
+ return <div>{sanitizedContent}</div>;
+}

Alternatively, if you must render HTML, sanitize it first:

+import DOMPurify from 'dompurify';
+
 function TestComponent() {
- // ruleid:react-dangerouslysetinnerhtml
- return <div dangerouslySetInnerHTML={createMarkup()} />;
+ const sanitizedMarkup = DOMPurify.sanitize(createMarkup());
+ return <div dangerouslySetInnerHTML={{__html: sanitizedMarkup}} />;
 }

Committable suggestion skipped: line range outside the PR's diff.

In sampleReact.jsx lines 1 to 4, the use of dangerouslySetInnerHTML poses an XSS
security risk. To fix this, remove dangerouslySetInnerHTML and instead render
content using safe React methods like JSX elements or text nodes. If rendering
HTML is necessary, sanitize the HTML content thoroughly before injecting it to
prevent XSS vulnerabilities.

⚠️ Potential issue

Move the Discord client secret to environment variables and fix the component structure.

This component has two critical issues:

1. Security: You hardcode a Discord client secret directly in the source code, which creates a serious security risk
2. Functionality: This function doesn't return valid JSX, making it an invalid React component

Apply this fix to address both issues:

 function OkComponent() {
- // OK
- const discordClientKey = '8dyfuiRyq=vVc3RRr_edRk-fK__JItpZ';
- return {__html: 'Первый · Второй'};
+ const discordClientKey = process.env.REACT_APP_DISCORD_CLIENT_KEY;
+ return <div>Первый &middot; Второй</div>;
 }

Then add the secret to your environment variables:

# .env.local
REACT_APP_DISCORD_CLIENT_KEY=8dyfuiRyq=vVc3RRr_edRk-fK__JItpZ

Remember to add .env.local to your .gitignore file to prevent committing secrets.

In sampleReact.jsx around lines 6 to 10, the Discord client secret is hardcoded,
posing a security risk, and the function returns an invalid React component
structure. To fix this, remove the hardcoded secret and instead access it via
process.env.REACT_APP_DISCORD_CLIENT_KEY, ensuring the secret is stored in an
environment variable. Also, update the function to return valid JSX rather than
an object, for example by returning a React element with the desired HTML
content safely rendered. Finally, add the secret to a .env.local file and ensure
this file is included in .gitignore to avoid committing secrets.