Problem/Motivation
On paths with specific chars in the query string, Drupal.behaviors.activeLinks causes JS errors:
Steps to reproduce
- Install Drupal,
- Log in as admin,
- (optional) Disable JS/CSS aggregation
- Visit for example: /?destination=/foo%3Fbar%3D%27
> We get errors in the console:
Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': '[data-drupal-link-system-path="node"]:not([hreflang])[data-drupal-link-query='{"destination":"/foo?bar='"}'],[data-drupal-link-system-path="<front>"]:not([hreflang])[data-drupal-link-query='{"destination":"/foo?bar='"}'],[data-drupal-link-system-path="node"][hreflang="en"][data-drupal-link-query='{"destination":"/foo?bar='"}'],[data-drupal-link-system-path="<front>"][hreflang="en"][data-drupal-link-query='{"destination":"/foo?bar='"}']' is not a valid selector.
at Object.attach (http://127.0.0.1:8888/core/misc/active-link.js?v=11.0-dev:54:35)
at http://127.0.0.1:8888/core/misc/drupal.js?v=11.0-dev:166:24
at Array.forEach (<anonymous>)
at Drupal.attachBehaviors (http://127.0.0.1:8888/core/misc/drupal.js?v=11.0-dev:162:34)
at http://127.0.0.1:8888/core/modules/big_pipe/js/big_pipe.js?v=11.0-dev:153:10
at http://127.0.0.1:8888/core/modules/big_pipe/js/big_pipe.js?v=11.0-dev:184:3
Here is the isolated code from the case above:
const selector = `[data-drupal-link-system-path="node"]:not([hreflang])[data-drupal-link-query='{"destination":"/foo?bar='"}']`;
document.querySelectorAll(selector);
Proposed resolution
It seems Drupal.behaviors.activeLinks builds selectors from the current query but doesn't escape ' chars properly before passing them to querySelectorAll.
Either escape those chars or do the query strings check later, after querySelector?
Remaining tasks
?
User interface changes
None
Introduced terminology
None
API changes
None
Data model changes
None
Release notes snippet
None