Skip to content

Preview/semgrep #62

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .coderabbit.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
reviews:
path_filters: ["**/*","*"]
11 changes: 11 additions & 0 deletions sampleReact.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
function TestComponent() {
// ruleid:react-dangerouslysetinnerhtml
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
Comment on lines +1 to +4
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Missing function definition.

The TestComponent references createMarkup() but this function is not defined in the file. This will cause a runtime error.

+function createMarkup() {
+  return { __html: '<strong>Test markup</strong>' };
+}
+
 function TestComponent() {
     // ruleid:react-dangerouslysetinnerhtml
     return <div dangerouslySetInnerHTML={createMarkup()} />;
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function TestComponent() {
// ruleid:react-dangerouslysetinnerhtml
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
function createMarkup() {
return { __html: '<strong>Test markup</strong>' };
}
function TestComponent() {
// ruleid:react-dangerouslysetinnerhtml
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
🧰 Tools
🪛 Biome (1.9.4)

[error] 3-3: Avoid passing content using the dangerouslySetInnerHTML prop.

Setting content using code can expose users to cross-site scripting (XSS) attacks

(lint/security/noDangerouslySetInnerHtml)

🪛 Semgrep (1.122.0)

[WARNING] 3-3: Setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

(docs-react-dangerouslysetinnerhtml)

🤖 Prompt for AI Agents
In sampleReact.jsx around lines 1 to 4, the function createMarkup() is called
inside TestComponent but is not defined anywhere, which will cause a runtime
error. Define the createMarkup() function in the file to return an object with a
__html property containing the HTML string you want to set, for example: return
{ __html: "<p>Some HTML content</p>" }. This will ensure the
dangerouslySetInnerHTML prop receives the expected object and prevent runtime
errors.


function OkComponent() {
// OK
const discordClientKey = '8dyfuiRyq=vVc3RRr_edRk-fK__JItpZ';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove hardcoded Discord client secret.

A potential Discord client secret is hardcoded in the code, which poses a security risk even in test files. Replace it with a placeholder or use environment variables.

-    const discordClientKey = '8dyfuiRyq=vVc3RRr_edRk-fK__JItpZ';
+    const discordClientKey = process.env.DISCORD_CLIENT_KEY || 'test-key-placeholder';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const discordClientKey = '8dyfuiRyq=vVc3RRr_edRk-fK__JItpZ';
const discordClientKey = process.env.DISCORD_CLIENT_KEY || 'test-key-placeholder';
🧰 Tools
🪛 Gitleaks (8.27.2)

8-8: Discovered a potential Discord client secret, risking compromised Discord bot integrations and data leaks.

(discord-client-secret)

🤖 Prompt for AI Agents
In sampleReact.jsx at line 8, the Discord client secret is hardcoded, which is a
security risk. Replace the hardcoded secret with a placeholder string or
retrieve it from environment variables using process.env to avoid exposing
sensitive information in the codebase.

return {__html: 'Первый &middot; Второй'};
}
Comment on lines +6 to +10
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Clarify the purpose of OkComponent.

The OkComponent returns a plain object rather than JSX, which suggests it's not actually a React component. If this is intended to demonstrate a safe pattern, consider showing a proper React component that safely handles HTML content.

 function OkComponent() {
-    // OK
-    const discordClientKey = process.env.DISCORD_CLIENT_KEY || 'test-key-placeholder';
-    return {__html: 'Первый &middot; Второй'};
+    // Safe pattern: using JSX instead of dangerouslySetInnerHTML
+    return <div>Первый &middot; Второй</div>;
 }

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

🧰 Tools
🪛 Gitleaks (8.27.2)

8-8: Discovered a potential Discord client secret, risking compromised Discord bot integrations and data leaks.

(discord-client-secret)

🤖 Prompt for AI Agents
In sampleReact.jsx around lines 6 to 10, the function OkComponent returns a
plain object instead of JSX, so it is not a valid React component. To fix this,
refactor OkComponent to return proper JSX, for example by returning a React
element that uses dangerouslySetInnerHTML with the returned object to safely
render the HTML content. This will clarify its purpose as a React component
handling HTML safely.


14 changes: 14 additions & 0 deletions semgrep.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
rules:
- id: docs-react-dangerouslysetinnerhtml
languages:
- typescript
- javascript
message: >
Setting HTML from code is risky because it’s easy to inadvertently expose
your users to a cross-site scripting (XSS) attack.
pattern-either:
- pattern: |
<$X dangerouslySetInnerHTML=... />
- pattern: |
{dangerouslySetInnerHTML: ...}
severity: WARNING