Certain URL fragments cause javascript error

Created on 17 December 2014, almost 10 years ago
Updated 16 July 2024, 4 months ago

Problem/Motivation

When a page contains a form and a fragment with special characters is in the url, such as http://mysite.com/#badfragment=broken, a javascript error will be thrown: Uncaught Error: Syntax error, unrecognized expression: .error, #badfragment=broken.

This issue happens in form.js near line 300:

    const hash = url.hash.substring(1);
    if (hash) {
      const $target = $(`#${hash}`);

Notice that the anchor is being directly pulled from the URL and used in the selector. However, `#${hash}` will not yield a valid selector, resulting in an error being thrown (breaking all JS on the page).

Steps to reproduce

Add this link to a page <a href="#edit-contact/broken">This is an anchor link with a broken fragment</a> then click it, and the error will appear in the console.

Alternatively visit https://local.site/user/register#badfragment=broken on a site.

Proposed resolution

Provide a helper that converts a fragment into a safe ID that can be used for a jquery or other selector.

Remaining tasks

Need help writing tests that assert no console errors visiting form urls with complex fragments?
Review

User interface changes

n/a

API changes

n/a

Data model changes

n/a

Release notes snippet

n/a

๐Ÿ› Bug report
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
Javascriptย  โ†’

Last updated 1 day ago

  • Maintained by
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom @justafish
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance @nod_
Created by

๐Ÿ‡บ๐Ÿ‡ธUnited States donutdan4114

Live updates comments and jobs are added and updated live.
  • Needs backport to D7

    After being applied to the 8.x branch, it should be considered for backport to the 7.x branch. Note: This tag should generally remain even after the backport has been written, approved, and committed.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

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

  • Status changed to Needs review almost 2 years ago
  • Status changed to Needs work almost 2 years ago
  • ๐Ÿ‡ฌ๐Ÿ‡งUnited Kingdom longwave UK

    Thanks for rerolling. This still needs a test to exercise the broken behaviour and prove that we have fixed it with the patch.

  • Merge request !6941Resolve #2395065 "Certain url fragments" โ†’ (Open) created by neclimdul
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States neclimdul Houston, TX

    conflicts with ๐Ÿ“Œ Replace deprecated String.prototype.substr() with String.prototype.substring() Fixed . rerolled in a merge request. not sure what a test would look like so just the reroll atm.

  • Pipeline finished with Success
    9 months ago
    Total: 494s
    #113051
  • ๐Ÿ‡ง๐Ÿ‡ทBrazil adinancenci

    Patch 46 adapted for Drupal 10.2.4.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States pmagunia Philadelphia ๐Ÿ‡บ๐Ÿ‡ธ

    The patch from #52 applied cleanly to Drupal 10.2.5.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia yash.rode pune

    yash.rode โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Success
    6 months ago
    Total: 628s
    #196934
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia yash.rode pune

    Hi, I was trying to reproduce this issue in Drupal Core, where I can click on any button which takes me to the link with a fragment?
    I am trying to write the test, but not sure what should be the Drupal page where I can get this error which I can convert to test.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States neclimdul Houston, TX

    Not sure of a common real case but I was able recreate this just now like this.

    1. Install Drupal site.
    2. Ensure registration is allowed.
    3. Log out and visit the registration url with a complex url fragment. e.g. https://d10.lndo.site/en/user/register/#badfragment/broken

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia yash.rode pune

    Hi I tried the steps above but the issue only occurs when we try to change the URL and not when we visit the URL for the first time?
    If that is the expected behaviour how can we write a test for that scenario?

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

    Testing / reproducing is fortunately pretty simple. The callback where the problem is occuring is triggered by, among other things, clicking on an anchor link inside a form. Get this link into a form <a href="#edit-contact/broken">This is an anchor link with a broken fragment</a> then click it, and the error will appear in the console.

    And hopefully the issue summary can get updated soon as it is presents the issue as being specific to a file that has not been in Drupal for several years.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States neclimdul Houston, TX

    Thanks, yeah adding that link would be a simple way someone could see it.

    Anyone could update issue summaries.

  • I tried reproducing this based on #58.
    I added

    $form['anchor_link'] = [
          '#type' => 'markup',
          '#markup' => '<a href="/#edit-contact/broken">This is an anchor link with a broken fragment</a>',
        ];

    in FormTestUrlForm form and clicked on the anchor link inside the form.
    This does not lead to any error on 11.x.Also it tried to edit the url and hit the url as mentioned in #57 ๐Ÿ› Certain URL fragments cause javascript error Needs work by @yash.rode but then also there is no error in the console.
    Also when following the same steps as mentioned by @yash.rode in #57 ๐Ÿ› Certain URL fragments cause javascript error Needs work I was able to reproduce the same error as yash was able to get.

    The question here is am I missing something is steps to reproduce?

  • Status changed to Needs review 4 months ago
  • Status changed to Needs work 4 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States neclimdul Houston, TX

    I think this is documented and reviewed to death at this point. Its actually needs work because it needs tests as the tag suggests.

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States bnjmnm Ann Arbor, MI

    Re #60

    The question here is am I missing something is steps to reproduce?

    Yes. The file where the error is happening needs to be loaded in order to reproduce the problem.

    The error is occurring in form.js, but the form loaded by FormTestUrlForm does not include that file.

    See core.libraries.yml for the library that includes this file and the libraries that depend on it.

  • Pipeline finished with Failed
    4 months ago
    Total: 269s
    #226166
  • Pipeline finished with Failed
    4 months ago
    Total: 533s
    #226169
  • Pipeline finished with Failed
    4 months ago
    Total: 380s
    #226558
  • Pipeline finished with Failed
    4 months ago
    Total: 477s
    #227467
Production build 0.71.5 2024