WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 23 months ago

#32305 closed defect (bug) (fixed)

Emoji script is producing errors on pages with SVG content

Reported by: martynasma Owned by: azaozz
Milestone: 4.2.3 Priority: normal
Severity: normal Version: 4.2.2
Component: Formatting Keywords: fixed-major has-patch
Focuses: javascript Cc:

Description

On pages that contain dynamic SVG content, such as charts generated by JavaScript, Emoji script wp-emoji-release.min.js produces multiple errors like this:

Uncaught TypeError: node.className.indexOf is not a function

The error is caused by the script traversing through document nodes, going into SVG nodes and checking indexOf of their className which is not a function, resulting in JS error reported on every SVG <path> node.

The error originates in this line: (taken from unminified version)

if ( ! node || ( node.className && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
   continue;
}

Attachments (1)

32305.patch (766 bytes) - added by azaozz 2 years ago.

Download all attachments as: .zip

Change History (26)

#1 follow-up: @azaozz
2 years ago

  • Milestone changed from Awaiting Review to 4.2.3

Looks like this can be fixed by doing:

if ( ! node || ( node.className && typeof node.className === 'string' && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
   continue;
}

However, seems we shouldn't be looking inside SVGs in the first place. Not sure what will happen if we replace emoji chars inside SVGs.

#2 in reply to: ↑ 1 @martynasma
2 years ago

Replying to azaozz:

Looks like this can be fixed by doing:

if ( ! node || ( node.className && typeof node.className === 'string' && node.className.indexOf( 'wp-exclude-emoji' ) !== -1 ) ) {
   continue;
}

However, seems we shouldn't be looking inside SVGs in the first place. Not sure what will happen if we replace emoji chars inside SVGs.

Yes, I suppose trying to modify SVG content doesn't make much sense and is quite dangerous, since it's not HTML.

I hope you can find a way to exclude SVG from emoji application.

@azaozz
2 years ago

#3 @azaozz
2 years ago

32305.patch fixes it here however needs testing in all possible browsers that support SVG, especially older Android :)

#4 @azaozz
2 years ago

  • Keywords has-patch needs-testing added

#5 @dway
2 years ago

  • Severity changed from normal to critical

The patch works for me on regular browsers on OSX Yosemite.
Really annoying bug putting down all the website I've made containing a Leaflet map...

#6 @chriscct7
2 years ago

  • Severity changed from critical to normal

This is not a critical level bug by any stretch

#7 @dway
2 years ago

Well, from my point of view, it blocks execution of javascript after the error, so it's critical regarding the well working of a website. But I may be wrong.

#8 @azaozz
2 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In 32478:

Emoji: do not try to replace emoji chars inside dynamic SVGs.
Fixes #32305 for trunk.

#9 @azaozz
2 years ago

  • Keywords fixed-major added; needs-testing removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopen for 4.2.

#10 @pento
2 years ago

Wouldn't it be easier to just add SVG to the shouldntBeParsed regex?

#11 @nacin
2 years ago

Looks like it, pento.

#12 @azaozz
2 years ago

Yep, good for that to be added too. The problem here seems to be that the browsers treat the nodes inside inline SVGs same as HTML nodes. The nodeType is still === 1, so Twemoji happily processes them when these nodes are dynamically updated with JS. That triggers an error as the inner SVG nodes className is an object, not a string.

Last edited 2 years ago by azaozz (previous) (diff)

#13 @peterwilsoncc
2 years ago

#32338 was marked as a duplicate.

#14 @harmr
2 years ago

This issue affects my free mapping plugin "Leaflet Maps Marker" as well as the pro version "Maps Marker Pro".

I had some reports from users lately saying that IE suddenly crashed when viewing Google Maps on backend. I was not sure what could have caused this until I found this related comment which states that Google Maps API loading was blocked as a result. Anyway it is difficult to reproduce this issue on my server - what I know for sure is that each time a "layer map" from my plugin is shown, the following javascript errors are produced which I see via debug panel/javascript tab:

Object does not support this property or method "indexOf" https://localhost/wp-includes/js/wp-emoji-release.min.js?ver=4.2.2 line 4

it would really be great if this issue could be solved with 4.2.3

#15 @harmr
2 years ago

Just got a confirmation from a user: once she installed https://wordpress.org/plugins/disable-emojis/ the Google map stopped crashing in IE - so this is definitely an issue for sites using leaflet.js as mapping framework...

#16 @dhunink
2 years ago

Just to add a bit more detail to the last comment of @harmr: it's not only on Google Map users. I've encountered the exact samen problemen on https://tpgrf.nl/testserver/alpha/topotrainer/nederland/, which depends on the ArcGIS Online Javascript API. I believe their not using leaflet.js as a framework, since ArcGIS is a framework on its own.
But it's defiantly the SVG issue: the ArcGIS API is using SVG to display maps.

Last edited 2 years ago by dhunink (previous) (diff)

#17 @harmr
2 years ago

how high is the chance that the fix will ab available with WordPress 4.2.3 soon? Having more and more users reporting this issue & the only thing I can recommend at the moment is to disable emojis which also is sub-optimal...

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


2 years ago

#19 follow-ups: @harmr
2 years ago

  • Severity changed from normal to major

as it seems there will be no 4.2.3 version I wonder if this fix can be targeted for next 4.3-beta release? I would really need to get this fix for my customers ASAP as it is really causing severe issues/crashes with IE (newest related support request)

Not sure about the procedure here: if there is a fix for a bug scheduled for a minor release that seems unlikely to be released, will the fix make it automatically into the next major release?

#20 in reply to: ↑ 19 @azaozz
2 years ago

Replying to harmr:

This is in beta1. It has been in trunk for 8 weeks, since [32478]. Additionally we reported it upstream, it was fixed, and Twemoji was updated to include the fix in #32203.

#21 in reply to: ↑ 19 @chriscct7
2 years ago

Replying to harmr:

as it seems there will be no 4.2.3 version I wonder if this fix can be targeted for next 4.3-beta release? I would really need to get this fix for my customers ASAP as it is really causing severe issues/crashes with IE (newest related support request)

Not sure about the procedure here: if there is a fix for a bug scheduled for a minor release that seems unlikely to be released, will the fix make it automatically into the next major release?

There will be a 4.2.3. Please don't alter severity.

#22 @chriscct7
2 years ago

  • Severity changed from major to normal

#23 follow-up: @harmr
2 years ago

thanks for the info & I looked through the list of solved tickets for 4.3-beta1 and did find a reference to this one, so I thought it would not be included.

#24 in reply to: ↑ 23 @samuelsidler
2 years ago

Replying to harmr:

thanks for the info & I looked through the list of solved tickets for 4.3-beta1 and did find a reference to this one, so I thought it would not be included.

Trac can be confusing. A ticket can only have one milestone, so when we want to fix an issue in both a major and minor release, we use the minor release as the milestone. In this case, 4.2.3. After the initial commit, we add a keyword to note that the issue is fixed in the major release: "fixed-major." It's not always easy to figure out, but that's why you don't see a ticket in the list of 4.3 beta tickets.

#25 @azaozz
23 months ago

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

In 33312:

Emoji: do not try to replace emoji chars inside SVGs.
Fixes #32305 for 4.2.

Note: See TracTickets for help on using tickets.