Security Error: Not allowed to access cross-origin stylesheet #2853
Comments
|
The same problem! Haven't found a solution yet. |
|
Just appeared in our Sentry log as well. Our first stylesheet is a Google Fonts link, which is cross origin. Firefox console: |
|
Yeah, this one is proving to be complicated. And I can't make sense of it. If it were only occurring in our application that calls Flatpickr from a CDN it would at least be plausible, although I am clueless about how or why. But it's also being logged from a different application that hosts Flatpickr CSS and JS on our server. How can a cross-origin error be encountered when everything is being called from the same domain? I can't come up with a plausible explanation. |
|
Importing flatpicker.css file fixed this issue for me. In my case.
|
|
Adding this to my |
This solution also worked for me. |
Worked for me - could do with above PR merging. |
Your Environment
Recently we've been logging security errors from Flatpickr in Sentry. The issue doesn't appear to be widespread, so far only logged about 20 times, but I have been unable to recreate it and, frankly, I'm baffled.
All of the events logged are from mobile devices, including OS Android 10-12, and iOS 15-16. The events logged so far include both Chrome Mobile 108-109 and Mobile Safari 15-16.
The exception message varies by OS, but I'm guessing it's the same issue. For Android users, the exception is "Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules". For iOS the exception is, "Not allowed to access cross-origin stylesheet".
We use Flatpickr in two different applications. One implementation calls Flatpickr CSS and JS files from our server, and both resources have the same domain. The other implementation calls Flatpickr resources via CDN. The exception is being logged from both applications, which confuses me even more, since the one implementation has the files hosted on our server (how can there be a cross-origin issue if the files are on the same server and domain?).
The line of code that Sentry has highlighted in the stack track is
{snip} styleSheets.length;n++){var t=document.styleSheets[n];if(t.cssRules){try{t.cssRules}catch(e){continue}e=t;break}}return null!=e?e:(a=documen {snip}Has anyone else run into this problem?
The text was updated successfully, but these errors were encountered: