Prevent links from being rendered in user bios

[diox]

Fixes mozilla/addons#15641

Context

We have basic URL detection on the server, but this doesn't detect //example.com URLs as it would be a bit too strict - someone could want to use double slashes legitimately... More importantly, this field allows HTML, but the cleaning is handled by addons-frontend through DOMPurify. So, to completely prevent links, we need to adjust the list of allowed tags here.

Testing

Log in, edit your profile, add some HTML in your bio, verify it still works. Then try to add HTML links like <a href="//example.com">link</a> and verify it doesn't get rendered as a link.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.29%. Comparing base (b7a0d15) to head (8a16667).

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #13643   +/-   ##
=======================================
  Coverage   98.29%   98.29%           
=======================================
  Files         268      268           
  Lines       10663    10667    +4     
  Branches     3280     3282    +2     
=======================================
+ Hits        10481    10485    +4     
  Misses        169      169           
  Partials       13       13           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull Request Overview

This PR enhances the HTML sanitizer to optionally strip <a> tags from user biographies and updates both the component and tests to enforce that behavior.

• Introduce an allowLinks flag in sanitizeUserHTML to control whether links are permitted.
• Update UserProfile to always sanitize biographies with allowLinks=false.
• Add unit tests for both the utility function and the rendered profile to verify links are removed.

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
tests/unit/amo/utils/test_index.js	Add test ensuring <a> tags are stripped when allowLinks=false
tests/unit/amo/pages/TestUserProfile.js	Add UI test to confirm links in biographies are not rendered
src/amo/utils/index.js	Extend sanitizeUserHTML with allowLinks parameter and adjust allowed tags
src/amo/pages/UserProfile/index.js	Pass allowLinks=false when sanitizing the user biography

Comments suppressed due to low confidence (1)

src/amo/utils/index.js:223

• [nitpick] The new allowLinks parameter isn't documented in the function's JSDoc. Adding a description for allowLinks (and its default true behavior) will clarify its purpose for future maintainers.

export function sanitizeUserHTML(

[KevinMind]

Nit

one liner available.. not necessarily better but there.

...[allowLinks ? ['a'] : []]

I also wonder if we just have a separate function removeLinks

I'm not a huge fan of the allowLinks argument becasue when calling it it is a naked boolean (you have to go to the definition to find out what that means.

dangerouslySetInnerHTML={
  sanitizeUserLinks(  
    sanitizeUserHTML(
      user.biography,
    )
  )
}

That's a lot easier to grok. A fancier version would be to accept an object to override individual tags.

dangerouslySetInnerHTML= {
  sanitizeUserHTML(
    user.biography,
    {a: false}
  )
}

You'd then have to wrap the array and remove, add based on the provided keys. That's fancier but in terms of types not super great.

[diox]

I'm not a huge fan of the naked boolean either, but those 2 options don't seem that much better:

• Having to go through DOMPurify twice for option 1 feels really bad
• Passing an object just to disallow specific tags is cumbersome to write and doesn't play nicely with types as you noted. We have a function allowing to pass a list of allowed tags, that's what this one calls, but for most stuff we use this wrapper to share the base list of allowed tags + the nl2br behavior.

I could refactor the function to pass an object for all the arguments ? The call would then become sanitizeUserHTML({ text: user.biography, allowLinks: false }). I originally didn't do it because I didn't want to replace all the calls in various templates/tests, but if you think that's worth it I can do that.

[KevinMind]

Maybe a happy medium is to keep the first argument and instead make the second argument an options object argument

sanitizeUserHTML(user.biography, { allowLinks: false });