Freecodecamp: Unable to pass any challenge in Firefox 50 due to CSP-problems

[Greenheart]

Challenge Name

Any challenge, both beta and production

Issue Description

The exact same code works in Chrome but not in Firefox. In Firefox, the output just above the tests says that the tests were completed, but tests that had to be run in the iframed phone-view never passes.

According to this message from the console, there's some problem with CSP which prevents some tests from running properly.
Content Security Policy: Directive ‘frame-src’ has been deprecated. Please use directive ‘child-src’ instead.

According to This Stack Overflow-thread, the spec for CSP in iframes is confusing at the moment.

I guess we either should use the, according to the SO-thread above, now deprecated child-src temporarily until Firefox implements the new spec with frame-src again.

Alternatively, we drop firefox support temporarily and hope they fix this soon.

@freeCodeCamp/moderators Any ideas on how to solve this?

Browser Information

• Browser Name, Version: Firefox 50.1.0
• Operating System: Ubuntu 16.04
• Mobile, Desktop, or Tablet: Desktop

Your Code

 <style>
  h2 {
    color: blue;
  }
</style>

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Screenshot

Notice the error message in the console at the bottom of the screen.

The exact same code works just fine in the latest version of Chrome for Ubuntu 16.04.

[systimotic]

@Greenheart There are quite a few issues about not being able to pass the challenges in Firefox (#12677 / #12668 / #12684 / #12679 / #12697) 😅
I don't think it's related to the CSP, that's also there on the live site.
Rather, it seems to be an issue with the .css() tests. #10595 is the oldest and most comprehensive issue that's still open on this topic.

Can you confirm whether this is a duplicate of that?

[Greenheart]

@systimotic Thanks! :smile: Some of the linked issues are related.

If this isn't about the CSP-error with the iframe (which obviously accepts stringified user-code and successfully runs it despite the error), your idea with jQuery.css() is probably the cause.

Will this error message cause any problems? If not, we could close this issue and resolve #10749 instead

[systimotic]

@Greenheart It would probably be good to turn this into an issue about the CSP deprecation, as it will eventually cause issues, even though it's not an issue yet.

[dhcodes]

As an update to this, I wouldn't recommend updating CSP yet because it looks like the frame-src deprecation error currently happening will be fixed when frame-src becomes undeprecated (link to source) very soon.

Fwiw, I also updated the CSP to childSrc to see if it fixes the .css issues with Firefox and while it did remove the CSP error in the console, it does not fix the .css issues. The hunt continues.

[raisedadead]

@systimotic @dhcodes should this be classified as discussing and bug, instead of blocked.

[dhcodes]

As a follow-up, I'm now curious if PR #12518 will help with this issue in any way. Originally it was listed as breaking the build but I believe this was a TravisCI anomaly so I restarted the build and left a comment regarding this in the PR. I've taken a cursory look around to find others experiencing this issue, but have not found anything concrete as of yet. I'll look around some more and post what I find.

[systimotic]

A little bit of clarification on this issue:

CSS tests can't be passed in Firefox. We don't yet know why, but it doesn't have anything to do with the CSP, as confirmed by @dhcodes. We're tackling this in #10749

There is a warning about the deprecation of the CSP frame-src property. This deprecation was specified in the CSP level 2 specification. In the CSP level 3 specification, this property got undeprecated again. As I understand this, that means that even though there is a deprecation warning, the property will never actually be removed.

https://stackoverflow.com/questions/30023608/how-to-use-frame-src-and-child-src-in-firefox-and-other-browsers
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-src#Specifications

Going from that, can we close this issue?

[Greenheart]

@systimotic Good points, I'd say we close this :+1:

[systimotic]

It seemed like @dhcodes took a really good look at this as well, so I'll block this for his response. He can close if he agrees 👍

[dhcodes]

I'm fine with closing this but maybe we should reopen https://github.com/freeCodeCamp/freeCodeCamp/issues/10595 as a way to track which challenges have had the tests updated per @Greenheart's suggestion in another thread (can't remember which) to use native functionality like document.querySelector

[systimotic]

@dhcodes That was suggested in #10749. To me, ideally we fix the jQuery CSS tests in Firefox rather than replace them. I'll close this, we can discuss the solution further in #10749 👍 Thanks a bunch for the triaging work on this @dhcodes!