make issue number clickable-#3364

[razzasid]

Added functionality to automatically transform issue references (e.g., #123) into clickable links when displaying issue descriptions. This enhancement improves navigation between related issues by allowing users to click directly on references in issue content to visit the referenced issue. - (issue number #3364 & #3356)

Demo video

https://github.com/user-attachments/assets/0fb8de21-4186-4716-b313-a1fb80d65b23

Summary by CodeRabbit

Summary by CodeRabbit

• New Features
  • Enhanced issue reports by automatically converting textual issue references (e.g., “#123”) into interactive clickable links.
  • Now supports dynamic conversion for both markdown and plain text descriptions once the page is fully loaded.

[coderabbitai[bot]]

Walkthrough

This pull request introduces two new client-side functions, processIssueReferences and replaceIssueReferences, that transform issue references formatted as #<number> into clickable links. The processing targets both markdown content inside an element with ID bug_report and plain text inside elements with the class issue-description. The markdown content is rendered to HTML using the markdownit library and sanitized with DOMPurify before replacing issue references. The HTML structure in the issue view is updated to support this processing by adding a data-markdown attribute and wrapping elements appropriately. The rendering and link replacement are triggered on DOMContentLoaded using direct DOM manipulation.

Changes

File	Change Summary
website/static/js/issue.js	Adds processIssueReferences and replaceIssueReferences functions to render markdown content, sanitize it, and replace issue references with links.
website/templates/issue.html	Modifies issue description HTML by adding a data-markdown attribute and a new issue-description class; adds a DOMContentLoaded event listener that invokes the new JS functions; replaces jQuery with direct DOM manipulation; adds DOMPurify script for sanitization.

Possibly related PRs

• OWASP-BLT/BLT#3953: Enhancements to issue description and markdown rendering, similar to transforming issue references into clickable links.
• OWASP-BLT/BLT#4010: Modifications in the same JavaScript file related to issue reference handling for improved issue suggestion functionality.

Suggested reviewers

• DonnieBLT

[!TIP]

⚡💬 Agentic Chat (Pro Plan, General Availability)

• We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.

✨ Finishing Touches

• [ ] 📝 Generate Docstrings

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[razzasid]

@DonnieBLT sir, plz review this PR

[razzasid]

@coderabbitai resolve

[coderabbitai[bot]]

:white_check_mark: Actions performed

Comments resolved and changes approved.

[gojo-satorou-v7]

@coderabbit please check if my above comment is true?

[coderabbitai[bot]]

[!TIP] For best results, initiate chat on the files or code changes.

🧩 Analysis chain

@gojo-satorou-v7 I don't see any previous comment from you in this PR thread. Could you please clarify which comment you'd like me to verify? If you're referring to something specific about the PR that makes issue numbers clickable, I'd be happy to check that for you.

---

🏁 Script executed:

#!/bin/bash
# Fetching comments from the PR to find any previous comment from gojo-satorou-v7
gh pr view 4035 --json comments --jq '.comments[] | select(.author.login == "gojo-satorou-v7") | {body: .body, createdAt: .createdAt}'

Length of output: 240

---

@gojo-satorou-v7 I can only see your one comment asking "please check if my above comment is true?" but I don't see any previous comment from you in this PR. Let me fetch the most recent comments to understand the context better. If you're referring to a comment by someone else or have a specific question about the PR changes that make issue numbers clickable, please clarify and I'll be happy to help.

---

🏁 Script executed:

#!/bin/bash
# Fetching the most recent comments from the PR to understand the context
gh pr view 4035 --json comments --jq '.comments[-5:] | map({author: .author.login, body: .body, createdAt: .createdAt})'

Length of output: 10131

---

@gojo-satorou-v7 I've checked the comment history, and I don't see any previous comment from you in this PR thread before your question. The only comments I can see are:

1. CodeRabbit's summary walkthrough
2. razzasid asking for review
3. razzasid asking to resolve comments
4. CodeRabbit confirming resolution
5. Your question about checking if your "above comment" is true

Could you please clarify what specific comment you're referring to? If you're asking about the functionality of making issue numbers clickable in this PR, I'd be happy to verify that for you.

---

🏁 Script executed:

#!/bin/bash
# Let's check the PR details to get more context
gh pr view 4035 --json title,body,url,additions,deletions,changedFiles,files

Length of output: 1297

---

@gojo-satorou-v7 After checking both the PR comment thread and looking for any review comments, I don't see any previous comment from you before your question. This PR is about making issue numbers clickable (#3364), which adds functionality to automatically transform issue references like "#123" into clickable links within issue descriptions.

If you meant to ask whether this functionality works correctly, I could check the implementation for you. Or if you were referring to someone else's comment, please clarify which one so I can verify it for you.

---

🏁 Script executed:

#!/bin/bash
# Check if there are any review comments by gojo-satorou-v7
gh pr view 4035 --json reviews --jq '.reviews[] | select(.author.login == "gojo-satorou-v7") | {body: .body, submittedAt: .submittedAt, state: .state, comments: .comments}'

Length of output: 414

---

@gojo-satorou-v7 I've found your review comment where you stated: "@DonnieBLT I think this introduces xss, specifically this line issueDescriptionElement.innerHTML = transformedText; codeql has also flagged this."

Let me examine the code to verify if your concern about an XSS vulnerability is valid. I'll need to check the context of how transformedText is created and if there's proper sanitization before it's assigned to innerHTML.

---

🏁 Script executed:

#!/bin/bash
# Let's examine the issue.js file to check the code with potential XSS vulnerability
cat website/static/js/issue.js

Length of output: 24581

---

@gojo-satorou-v7 After examining the code, I believe your concern about the XSS vulnerability is valid. The line you mentioned doesn't appear exactly as quoted in the current code, but there is a similar issue in the processIssueReferences function:

// First set the rendered HTML (already sanitized by markdownit)
bugReportElement.innerHTML = renderedHtml;

This is potentially problematic because:

1. The code relies on markdownit for sanitization without explicit configuration for XSS protection
2. Directly using innerHTML with content that may contain user input is a security risk
3. The fact that CodeQL has flagged this issue adds credibility to the concern

Let me check the HTML template to fully understand the implementation context.

---

🏁 Script executed:

#!/bin/bash
# Let's check the issue.html file to better understand the context
cat website/templates/issue.html

Length of output: 22675

---

@gojo-satorou-v7 Yes, your comment about the XSS vulnerability is correct. After examining both the original code in issue.html and the new implementation in issue.js, I can confirm that there is a legitimate security concern.

The issue exists in both implementations:

1. Original code in issue.html directly uses string replacement and innerHTML:

const transformedText = originalText.replace(
    /#(\d+)/g, 
    ' <a href="/issue/$1" class="text-[#e74c3c] hover:text-[#e74c3c]/80 font-medium">#$1</a> '
);
issueDescriptionElement.innerHTML = transformedText;

2. New implementation in issue.js improves some aspects by using DOM methods for issue references through replaceIssueReferences(), but still uses innerHTML for markdown content:

let renderedHtml = md.render(markdownContent);
// First set the rendered HTML (already sanitized by markdownit)
bugReportElement.innerHTML = renderedHtml;

The vulnerability occurs because:

1. The code relies on markdown-it for sanitization without explicit security configuration
2. Using innerHTML with content that may contain user input is inherently risky
3. The fact that CodeQL flagged this issue confirms it's a recognized security vulnerability

A safer approach would be to either:

• Configure markdown-it with explicit HTML sanitization options
• Use a dedicated HTML sanitizer library before setting innerHTML
• Use DOM manipulation methods consistently throughout the code

This is definitely an issue that should be addressed to protect against potential XSS attacks.

[razzasid]

please fix the xss issue

Noted!