active-link.js should use CSS.escape

Created on 24 October 2023, over 1 year ago
Updated 13 May 2024, 10 months ago

Problem/Motivation

We see a lot of javascript errors, thrown from the querySelectorAll call in active-link.js, when the URL contains characters that are not allowed by querySelector.

```
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '[data-drupal-link-system-path="documenten"]:not([hreflang])[data-drupal-link-query='{"id":"848","scroll-to":"[data-document-id='848']"}'],[data-drupal-link-system-path="documenten"][hreflang="en"][data-drupal-link-query='{"id":"848","scroll-to":"[data-document-id='848']"}']' is not a valid selector.
```

Steps to reproduce

On a local Drupal 10.1 installation, navigate to this path:

/?scroll-to=%5Bdata-document-id%3D%27848%27%5D

Open the browser's dev tools, observe the errors.

Proposed resolution

Wrapping the selectors.join(',') call in CSS.escape() fixes the issue.

🐛 Bug report
Status

Closed: duplicate

Version

11.0 🔥

Component
Javascript 

Last updated about 21 hours ago

Created by

🇳🇱Netherlands roderickgadellaabsl

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Issue created by @roderickgadellaabsl
  • 🇳🇱Netherlands roderickgadellaabsl

    See patch (attached) for 10.1.x

  • last update over 1 year ago
    Custom Commands Failed
  • Status changed to Needs review over 1 year ago
  • last update over 1 year ago
    29,675 pass
  • 🇮🇳India _utsavsharma

    Fixed failures in #2.

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    Should contain test coverage.

  • First commit to issue fork.
  • Status changed to Closed: duplicate 11 months ago
  • 🇺🇸United States jrb Raleigh-Durham Area, NC, USA

    I think this is a duplicate of 🐛 active-link.js throws JS error if query string parameter contains a single quote Needs work

    Per that issue, it seems that the actual problem is the ' (single quote) in the queryString variable that causes this line of JavaScript (prior to what the patch here changes) to produce what will be an invalid selector:

          const querySelector = path.currentQuery
            ? `[data-drupal-link-query='${queryString}']`
            : ':not([data-drupal-link-query])';
    

    In that issue, the solution is to escape the single quote. That fixes this issue as well. The use of CSS.escape in the patch of this issue, prevents the errors from being thrown, but I don't think it actually fixes the problem. The resulting selector still won't be valid-- it will just be escaped. I think the solution in that issue is the way to go.

  • 🇺🇸United States jrb Raleigh-Durham Area, NC, USA
  • 🇳🇱Netherlands roderickgadellaabsl

    Hmm it's not just `queryString`, any query parameter could contain a single quote (`'`).

    Since active-link pipes content through `querySelector()` that it does not control, I think it's safer to just `CSS.escape()` it all? There could be single quotes (and other characters!) in the query params that would cause active-link to fail?

Production build 0.71.5 2024