CODEWITHSUNDEEP
javascriptcssamazon-s3corscdn
Nikster
Nikster

Reputation: 474

Cannot Access cssRules for Stylesheet CORS

So I've been reading that you can't access cssRules for external stylesheets because it runs into CORS policy issues.

I decided to take a different approach but I'm still running into issues.

My Approach:

  1. Download the css files on the backend and upload them to S3 Bucket
  2. Return back a existing link and new link for match purposes
  3. Delete existing link tag and add in a new tag that will point to my CDN
  4. Access document.styleSheets
  5. Tadaaaa (but this fails)

What I'm trying to figure out is why am I still running into issues if my CDN allows access from any origin?

export default () => {
  const payload = [...document.styleSheets].filter(s => s.href).map(s => s.href);

  axios.post('SOME ENDPOINT', { css: payload }).then(({ status, data: { data: newLinks } }) => {
    if (status === 200) {
      for (const i in newLinks) {
        document.querySelector(`link[href="${newLinks[i].source}"]`).remove()
        const stylesheet = document.createElement('link');
        stylesheet.rel = 'stylesheet';
        stylesheet.href = newLinks[i].downloaded;
        document.getElementsByTagName('head')[0].appendChild(stylesheet);
      }
    }
  }).then(() => {
    let delay = 250
    setTimeout(() => {
      console.log('Stylesheets with Removed Links', [...document.styleSheets]);
    }, delay)
  }).then(() => {
    console.log([...document.styleSheets])
  })
}

Stylesheets

S3 CORS

Error on Safari SecurityError: Not allowed to access cross-origin stylesheet

I have seen this link Cannot access cssRules from local css file in Chrome 64

Result From Network Tab

Network Request

Upvotes: 1

Views: 10708

Answers (2)

XpressGeek
XpressGeek

Reputation: 3697

For ReactJS,

  1. Go to public folder
  2. In index.html file, add crossorigin="anonymous" for css (which is giving cross-origin error)

Example:

enter image description here

Upvotes: 1

Nikster
Nikster

Reputation: 474

I ended up finding a solution...

All thanks to Paulo Belo from this link Uncaught DOMException: Failed to read the 'cssRules' property

stylesheet.crossOrigin = "anonymous" solved my problem giving me access to the cssRules.

enter image description here https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

Note this fix does not work with existing stylesheets that are throwing this error.

Exception: DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules at CSSStyleSheet.s

This fix only works for your own uploaded sheets or in my case the ones from my CDN.

enter image description here

Upvotes: 3

Related Questions