Make WordPress Core

#45053 closed defect (bug) (fixed)

Customizer throws JS errors when page contains <area> tag without href attribute

Reported by: janthiel Owned by: pento
Milestone: 5.1 Priority: normal
Severity: normal Version: 4.7
Component: Customize Keywords: has-patch
Focuses: javascript Cc:


Using the customizer on a page that contains <area> Tags without href attributes leads to JS errors. api.prepareLinkPreview expects the parsed elements to have a href attribute.

<area> tags can contain them, but do not have to ( https://www.w3.org/TR/html52/semantics-embedded-content.html#the-area-element ). <area> Tags are used in Google Maps with Markers for example (e.g. in Enfolds implementation).

This is the JS error thrown:

customize-preview.min.js?ver=4.9.8:formatted:131 Uncaught TypeError: Cannot read property 'substr' of undefined
    at Function.d.prepareLinkPreview (customize-preview.min.js?ver=4.9.8:formatted:131)
    at HTMLAreaElement.<anonymous> (customize-preview.min.js?ver=4.9.8:formatted:102)
    at Function.each (jquery.js?ver=1.12.4:2)
    at n.fn.init.each (jquery.js?ver=1.12.4:2)
    at customize-preview.min.js?ver=4.9.8:formatted:101
    at Function.m.each.m.forEach (underscore.min.js?ver=1.8.3:5)
    at MutationObserver.<anonymous> (customize-preview.min.js?ver=4.9.8:formatted:100)

The attached patch simply narrows the selector to only target <area> tags WITH href attributes in handleUpdatedChangesetUuid. Other area Tags are no Links and thus not a target for the prepareLinkPrevie Method.

Attachments (3)

Only_find__area__tags_with_href_attributes_to_prevent_JS_errors_on_pages_with_GMaps_+_Mark.patch (704 bytes) - added by janthiel 18 months ago.
Narrow jQuery selector to only target area[href] instead of area
45053.diff (1.6 KB) - added by janthiel 18 months ago.
Prevents elements without href attr being parsed, narrow down core selectors to not target them in the first place
45053.2.diff (1.6 KB) - added by adamsilverstein 15 months ago.

Download all attachments as: .zip

Change History (15)

18 months ago

Narrow jQuery selector to only target area[href] instead of area

#1 @dlh
18 months ago

  • Version changed from 4.9.8 to 4.7

Thanks for the patch, @janthiel, and welcome to Trac!

It looks like there are a few instances of the 'a[href], area' selector in the preview JS. Would all of those be subject to the same issue?

I also wonder whether prepareLinkPreview() should return early if the passed element lacks an href?

Lastly, note that customize-preview.js is a generated file. I believe you would want to create your patch from the root of the develop repository, such as https://github.com/WordPress/wordpress-develop, and modify src/js/_enqueues/wp/customize/preview.js.

Last edited 18 months ago by dlh (previous) (diff)

#2 @janthiel
18 months ago

Hi @dlh Thanks for your feedback. I will create the patch over there at Github and open the appropriate PR.

I did consider fixing prepareLinkPreview but decided to just fix the selector to minimize the overall code impact. Even more, selecting Tags with no href is kind of memory wasting at all. Maybe making prepareLinkPreview more failsafe as well as narrowing down the selectors is the way to go?

What do you think?

#3 @dlh
18 months ago

Quick note, @janthiel — please continue to submit your patches here, not on GitHub. You can generate a diff to upload with git diff --no-prefix > 45053.diff. The GitHub link is just an example of where you can find the develop repository, but PRs on GitHub aren't monitored. Sorry to be confusing about that.

At first glance, I could see implementing both the failsafe and the selector change as a good approach. I agree with your point about needlessly selecting tags in core, but because prepareLinkPreview is publicly callable, the check within the function might be nice for plugin and theme developers.

18 months ago

Prevents elements without href attr being parsed, narrow down core selectors to not target them in the first place

#4 @janthiel
18 months ago

Hi @dlh find the new patch attached.

  • prepareLinkPreview is now failsafe
  • the core Selectors within the Customizer are now more targeted

Have a great sunday :)

#5 @SergeyBiryukov
18 months ago

  • Milestone changed from Awaiting Review to 5.0.1

#6 @pento
16 months ago

  • Milestone changed from 5.0.1 to 5.0.2

#7 @pento
16 months ago

  • Milestone changed from 5.0.2 to 5.0.3

This ticket was mentioned in Slack in #core by audrasjb. View the logs.

15 months ago

#9 @audrasjb
15 months ago

  • Milestone changed from 5.0.3 to 5.1


Per today's bug scrub, let's address this ticket in the next major, 5.1, scheduled in February.

#10 @adamsilverstein
15 months ago

45053.2.diff is a refresh against trunk, no changes from the previous patch.

i verified the issue by creating a post with an <area> tag, then trying to customize it. before the patch i see the JS error, after the patch the error is gone.

Looks good to me! Running tests to verify: https://travis-ci.org/adamsilverstein/wordpress-develop-fork

#11 @pento
15 months ago

  • Owner set to pento
  • Status changed from new to accepted

#12 @pento
15 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 44684:

Customiser: Prevent JS errors when previewing pages with an <area> tag.

The customiser assumes that <area> tags will have a href attribute, which isn't necessarily true. Now it checks instead of assuming.

Props janthiel, adamsilverstein.
Fixes #45053.

Note: See TracTickets for help on using tickets.