The polyfill for the Intersection Observer is taken from this URL: https://unpkg.com/intersection-observer
Unfortunately, this CSN doesn't set the Cross Origin Resource Policy header to cross-origin (well, it doesn't set it all). This makes imposible to set the "Cross-Origin-Embedder-Policy" to require-corp in sites that uses this module.
Why? Because sites that set Cross-Origin-Embedder-Policy" to require-corp are telling the browser to enhance the security and only embed resources that are explicitly authorized. Because the CDN doesn't set this header the browser consider the resource unsafe and refuses to load it.
The console displays:
GET https://unpkg.com/intersection-observer net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 302 (Found)
This has low impact because most browsers don't need the polyfill but anyway I think is better to switch to a CDN that uses the header.
More info on the header:
- https://scotthelme.co.uk/coop-and-coep/
- https://snigel.com/blog/a-simple-guide-to-coop-coep-corp-and-cors
Use JSDelivr,. It is very popular, they offer the library and they use the proper header.
URL: https://cdn.jsdelivr.net/npm/intersection-observer@0.12.2/intersection-observer.min.js
Do it.
None.
None.
None.
Fixed
1.1
Code