CSSStyleSheet에서 CSSRules 속성을 읽지 못했습니다 오류를 수정하는 방법

근본 원인을 찾다

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

• 우리의 모니터링 도구도 브라우저 데이터를 제공하기 때문에 나는 어떤 브라우저가 가장 큰 영향을 받았는지 검사했다.사실은 구글 크롬과 같은 크롬 브라우저의 최신 버전을 기반으로 하고 있다는 것을 증명한다.나의 많은 동료들은 구글 브라우저를 개발의 주요 브라우저로 사용하지만, 이상하게도 아직 다른 개발자가 우연히 이 점을 발견하지 못했다

• 이 기능을 테스트하지 않았습니다.나는 Jest로 단원 테스트를 해서 이 문제를 복제하려고 했지만, 테스트는 성공적으로 완성되었다

• 저는 인터넷에서 이 특정한 오류 메시지를 검색하여 크롬의 최근 변화에 관한 유용한 게시물을 찾았습니다.최신 버전의 Chrome에서도 Iframe 규칙과 같은 스타일시트에 CORS 보안 규칙이 적용됩니다.다른 도메인에서 로드된 컨텐트 스타일시트는 JavaScript를 통해 로드하고 표시할 수 없습니다.비록 이 정보들은 매우 유용하지만, 나는 왜 이것이 문제가 되는지 여전히 이해하지 못한다

오류 수정 방법

위에서 언급한 모든 지식을 가지고 내 머릿속에 이론이 형성되었다. 만약에 어떤 스타일시트가 DOM에 불러온다면 이런 스타일시트는 우리의 것이 아니겠는가?이것은 내가 생각할 수 있는 유일한 이 문제를 초래할 수 있는 일이다. 그래서 나는'우리가 제공하지 않은 스타일시트를 어떻게 DOM에 불러올 것인가?'라고 생각하기 시작했다.

정답은: 브라우저 확장.웹 확장은 웹 사이트에서 광고를 삭제하거나 브라우저에 없는 기능을 제공할 수 있다는 것을 알 수 있다.브라우저 확장은 일반적으로 HTML, CSS, JavaScript 등 웹 기술을 기반으로 합니다.이것은 웹 확장이 다른 영역에서 스타일시트를 불러올 수 있음을 의미합니다. 이러한 확장을 사용하지 않는 한

CDN과 같은 다른 도메인을 가리키는 CSS 파일의 스타일(예: Chrome 개발 도구)을 주입하여 쉽게 복사할 수 있습니다.CSS 스타일시트가 HTML과 같은 도메인에서 온 경우 문서에 액세스할 수 있습니다.styleSheets .가져오기 (인덱스)cssRules 재산.그렇지 않으면 다음 오류가 발생합니다.

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

우리가 근본 원인을 이해하고 찾았으니 이 문제를 해결하는 것은 매우 쉽다. 같은 역이나 href가null인 곳에서만 불러오는 스타일시트(스타일시트가 내부적으로 연결되어 있다면, 예를 들어Angular를 사용할 때 이런 상황이 발생할 수 있다):

복구 프로그램이 발표된 후, 우리는 영향을 받은 고객에게 연락을 했는데, 그들은 문제가 다시는 발생하지 않도록 확인할 수 있다.그 밖에 우리의 감시 도구도 이 문제의 어떤 다른 사건도 보고하지 않았기 때문에 우리는 우리가 안전하다는 것을 안다

Conclusion

이 단문을 읽어 주셔서 감사합니다.보시다시피 문제의 복구는 몇 분 안에 이루어질 수 있지만, 문제의 근본 원인을 이해하는 데는 일반적으로 우리가 예상한 것보다 더 긴 시간이 필요합니다

이게 도움이 돼요?댓글로 알려주세요