javascript - Cannot Access cssRules for Stylesheet CORS - Stack Overflow

admin管理员组

文章数量:1380017

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])
  })
}

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

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])
  })
}

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

• javascript
• css
• amazon-s3
• cors
• cdn

Share Improve this question Follow edited Mar 2, 2022 at 18:16 Nikster asked Mar 2, 2022 at 17:58 NiksterNikster 48411 gold badge66 silver badges2222 bronze badges 2

• Doing document.getElementsByTagName('head')[0].appendChild(stylesheet) should trigger a request for that stylesheet. Does that request look ok in the Network tab? – James Commented Mar 2, 2022 at 18:03
• @James yup all of it looks good. Updated description with the request – Nikster Commented Mar 2, 2022 at 18:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

https://developer.mozilla/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.

For ReactJS,

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

Example:

本文标签： javascriptCannot Access cssRules for Stylesheet CORSStack Overflow