EREGCSC-2363 -- Prevent frontend from interpreting HTML characters

[PhilR8]

Resolves EREGCSC-2363

Description

On the front end of eRegs, we sometimes use Vue's v-html directive to insert raw HTML into an element's innerHTML property. We do this for a few reasons:

• Table elements in the regs are returned from the eCFR parser as raw HTML, and we need to pass that raw HTML straight to the DOM for it to render and be styled correctly in the Reader View
• When using the eRegs API to search for a query string (ex: on the Search page), the matched string is returned from the server surrounded by a span with a search-highlight class.
  • Note: we control the eRegs API and can change how the highlighted text is identified in the API response -- Search.gov search results use special characters that can be identified and replaced with span elements on the front end. This would likely still require using the v-html directive to insert any transformed elements into the DOM because we don't use JSX with Vue.

The downside to using the v-html directive is that the developer has to ensure that the content inserted into the DOM via the v-html directive is trusted. We haven't been doing that, and our usage of the v-html directive resulted in an XSS vulnerability pentest finding on 12/13/14.

As such, we need to better ensure that the content inserted into the DOM via the v-html directive is sanitized. This Pull Request adds the DOMPurify library to the project to create a custom Vue directive that sanitizes any raw HTML that needs to be inserted directly into the DOM.

This pull request changes:

• Adds DOMPurify npm package to project
• Creates v-sanitize-html custom directive that uses DOMPurify to sanitize any HTML passed to it
• Uses v-sanitize-html directive instead of v-html throughout entire application

Steps to manually verify this change:

1. Green check marks
2. Ensure v-html directive is not used anywhere in codebase
3. Ensure that v-sanitize-html has replaced all instances of v-html
4. Visit experimental deployment
5. Search for "CCIC"
6. When the Search results page loads, the browser should NOT show an alert dialog. The CCIC search result should be shown in the list of results.
7. Compare to dev: search for "CCIC" on the dev site. When the Search results page loads, an alert dialog will appear.
8. Rest of site works as expected

[github-actions]

✨ See the Django Site in action ✨

[github-actions]

✨ See the Django Site in action ✨

[github-actions]

✨ See the Django Site in action ✨

[cgodwin1]

LGTM!