Skip to content

.matches is not a function causes many audits to error #5934

@lethevimlet

Description

@lethevimlet

Hi, I was using object HTML tag to exploit element resize detection. Unfortunately, I found through lighthouse that this is detected as using "plugins" a.k.a embedded flash/silverlight/etc even when actually not embedding anything. I strongly suggest lighthouse/google to check for the data attribute of object tag before flagging it as "plugin" usage since object tag is one of the most efficient/cross-browser compatible ways of detecting element resize events, therefore only count as a use of "plugins" if it actually has a data attribute defined.

Anyway, after removing all object tags to my surprise I found I was still getting nagged about the use of "plugins". Digging through the code, and actually checking the source of Lighthouse plugin test, I managed to find the problem, apparently if you define for an element a matches property, this will trigger a false positive for "use of plugins", and maybe other tests too.

For example

el.matches = "don't hate me :("; 

will cause "use of plugins" audit to fail, it will even fail when initialized to null.

My wild guess is that you are using matches internally to flag elements and doing something along the lines of

el.hasOwnProperty("matches") {
 warnUseOfPlugins();
}

If this is the case and you are injecting properties to parse the DOM, you should be using a safe scope such as

el._lighthouse_matches

I hope this helps to nail down the issue and hope this behavior does not reflect to the actual SEO algorithm.

BTW good job with Lighthouse tool, it's getting more and more awesome each day!

Here is the smallest example I can think of, to prove the concept.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>
<body>
  I don't use plugins, I swear!
  <div id="test"></div>
  <script>
    document.querySelector("#test").matches = "don't hate me :(";
  </script>
</body>
</html>

image

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions