[New sniff] Using a CDN is discouraged

[carolinan]

Rule:

WARNING : Using a CDN is discouraged. All JS and CSS should be bundled.

Ref: https://make.wordpress.org/themes/handbook/review/required/#stylesheets-and-scripts

Theme check file covering this rule:

https://github.com/Otto42/theme-check/blob/master/checks/cdn.php

To do:

• [ ] Create unit tests
• [ ] Create new sniff

[jrfnl]

This is the rule as stated in the handbook:

Include all scripts and resources it uses rather than hot-linking. The exception to this is Google Fonts.

Maybe the title of this issue should be adjusted ? CDNs can also be used for (background/header) images and AFAICS the handbook does not (currently) explicitly prohibit that.

Another handbook ref for this: https://make.wordpress.org/themes/handbook/review/required/theme-check-plugin/#cdn

Lastly, I'd like to see some discussion on whether the current list of CDNs which are checked for is sufficient or if more CDNs should be added and if so, which.

[Pross]

https://cdnjs.com/ should be on there.

[khacoder]

I think this can be an ERROR. The only resources that can be hot linked are Google Fonts. Nothing else is allowed to my knowledge.

[khacoder]

I have a sniff ready for this.

[dingo-d]

Hi! Do we have a decision on what CDN urls should be allowed? We should have a definite list so that we can update the #108 PR.

We should brought this up in a meeting, or if we already have this list we can add it here or in the PR so that it's merged.

[carolinan]

None except google fonts. The requirement says: Include all scripts and resources. https://make.wordpress.org/themes/handbook/review/required/#stylesheets-and-scripts

Like Kevin says this should be an error not a warning. And we should avoid using the word "discouraged" when it is not allowed.

https://fonts.googleapis.com https://fonts.gstatic.com

[dingo-d]

Then we should remove the scripts that are in the whitelist section of this PR and only allow google fonts.

[jrfnl]

I'm updating the PR at this moment. For the implementation of this, I have some additional questions to verify if I'm understanding this correctly and whether the sniff does what it's supposed to do:

1. So, only google fonts are allowed, using the two URLs mentioned by @carolinan. This means the sniff will need to be changed from blacklist to whitelist.
2. IIRC fonts would be registered via wp_register_style() or wp_enqueue_style(). Never as a script. If that's correct, any URL in the $source of a script register/enqueue should always throw an error. For styles, the whitelist would be checked and if not Google fonts, an error will be thrown.
3. What should the sniff do if the $source is a variable ? Throw a warning ? Try and walk the scope within which it is found to find the variable declaration ?
4. My earlier question about resources hosted on CDNs other than scripts/styles, still remains. If this needs to be checked, code samples of what should be forbidden would be very welcome. If the sniff is broadened beyond the register/enqueue script/style calls, it could also solve the "sniffs hiding behind each other" issue. Note: This is something which can be added to the sniff at a later point in time.

[joyously]

1. seems like it would already have been whitelist
2. This sniff is talking about all resources, not just styles. So any style or script or image or font or demo.xml has to be a theme URL, except for Google fonts. I'm not sure of the differences in coding when using Google Font loader as opposed to linking directly to Google Font.
3. I think a warning to check the URL is good.
4. See 2. The only other proposed use was for FontAwesome, and that has versions, so it could still cause conflicts.

[jrfnl]

@joyously

1. No, it was not. If you look at the PR in #108, you can see that it used a blacklist and would only throw an error if something on that list was encountered.

   Blacklist approaches tend to underreport (miss things which should trigger an error), whitelist approaches tend to overreport (throw errors for things which are fine).

   A whitelist approach for this sniff is going to be interesting, but complicated to implement as the $src can also be a local file and we'd want to minimize false positives. If the $src, however, is passed as a variable, constant or via a nested function call, it will be very difficult in most cases to reliably determine whether a local file or a URL is being passed to the function call.

2. (and 4) In that case, I need a whole lot of code samples of things which are forbidden to properly determine what to sniff for.

   So, please, everyone who wants this sniff to actually be finished and merged, please leave comments with code samples of things which are not allowed.

[joyously]

complicated to implement as the $src can also be a local file

That's the point. Everything should be a local file, except Google Fonts.

[jrfnl]

That's the point. Everything should be a local file

I know, but that doesn't mean that it is sniffable.

[joyously]

Well, it's either a variable or one of the get_template_* functions or Google. What else do you need? I suppose there could be a constant also, but that is discouraged.

[jrfnl]

Actions needed

• [ ] It would be really helpful for finishing this off to have code samples of both things which should be flagged as well as things which shouldn't be. The more variety in the code samples, the better!

[carolinan]

This gist contains: Things we don't allow + some CSS, HTML and JS question marks

TLDR: https://stackpath.bootstrapcdn.com https://maxcdn.bootstrapcdn.com/ https://cdnjs.cloudflare.com/ajax/libs/ https://use.fontawesome.com/ https://ajax.googleapis.com/ajax/libs/jquery/ //code.jquery.com/ui/

and one new addition: db.onlinewebfonts.com/

[joyously]

That looks similar to the PR I put in for Theme Check. (not merged yet) https://github.com/WordPress/theme-check/pull/208/commits/eec60daadc010dfb888c0075783b2d912f331b78

[carolinan]

use.typekit.net also needs to be blacklisted since we do not allow it and because of licensing.

[carolinan]

And here is the gist with things that we do allow. https://gist.github.com/carolinan/7c2b002465b260ab3a74ec2d9b924c8c

[dingo-d]

Since we have a list of things to allow, and disallow, I'll remove the decision needed tag, so that we know this can be worked on.