Firefox test suite issue

1

Hi everyone,

For some reason, Codepen says Firefox blocked the test suite(3rd party cookie) that is used for checking the responsive projects. I tried to clean the cache and individual cookies. I also checked the cookie setting, everything is fine.

I wonder if there is other things I can do instead of cleaning all my cookies?

Thanks!

1 Like
2

you have to add codepen.io to the list of allowed third-party website cookies

3

I have tried it but it still shows message below.

“Test suites depend on access to localStorage. Please enable third-party cookies in the browser. See documentation for your browser for instructions on how to enable third-party cookies. Thanks and Happy Coding!”

4

I think the issue is with codepen.io not Firefox, because if you use the test suite script in a local file it is going to work, you can try it.

5

This looks to be an issue specifically with Codepen, Firefox, and localStorage. The test uses localStorage and we have implemented a test for it to make sure the user is not blocking it. This is why you see the alert message.

I’m getting Uncaught DOMException: The operation is insecure when trying to set something to localStorage on Codepen in Firefox.

Here is a simple test that fails on Codepen in Firefox
https://codepen.io/lasjorg/pen/XWjzeOy

It fails with modernizr as well.
https://codepen.io/lasjorg/pen/ZEpaXmR

Works fine on jsfiddle, repl.it, and codesandbox
https://jsfiddle.net/aj0w6bsn/
https://repl.it/@lasjorg/modernizr-localstorage-test
https://codesandbox.io/s/modernizr-localstorage-test-crfss

Not really sure what is going on yet but one thing I did notice was the sandbox attribute for the iframe on Codepen does not have the allow-same-origin value which the other sites do have. Not sure if it’s the issue though.

Codepen:

sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"

jsfiddle:

sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads"

repl.it:

sandbox="allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-modals"

codesandbox:

sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-downloads"

I don’t think there is much we can do about it on our end. It would seem to be an issue Codepen has to fix.

Edit: I send Codepen support a message about this.

Edit2: I got a response back from Codepen and they are looking into it.

7 Likes
6

Quick update:

This should be fixed now. I was right about the attribute value missing. Both the test script and video embeds should be back to working again. I tested it with the landing page project and everything works.

In case anyone is interested, here is the message I got back:

Hey there,

Yea. We finally figured out the issue. We accidentally removed an iFrame sandbox value allow-same-origin. It’s fixed and both examples work on FF again.

Thanks for taking the time to write in about the bug. This one was very frustrating.

7 Likes
7

Thank you @lasjorg for taking the time to work with codepen on resolving this issue.

2 Likes