Chrome 64의 로컬 파일에서 CSS 규칙에 액세스할 수 없는 이유는 무엇입니까?

Chrome 64의 로컬 CSS 파일에서 CSS 규칙에 액세스할 수 없습니다.

최근 웹 개발자는 Chrome 64에서 로컬 CSS 파일의 CSS 규칙에 액세스할 수 없는 문제에 직면했습니다. Chrome 버전 64. 이 문제는 브라우저에 구현된 보안 변경으로 인해 발생할 수 있습니다.

문제

과거에는 Chrome을 사용하여 개발자가 로컬 파일에서 CSS 규칙에 액세스할 수 있었습니다. 그러나 버전 64에서는 이 기능이 제한되었습니다. 스타일시트의 cssRules 속성에 액세스하려고 시도할 때 개발자는 정의되지 않은 응답이나 오류가 발생합니다.

<code class="html"><script>
window.onload = function() {
  try {
    alert(document.styleSheets[0]); // works
    alert(document.styleSheets[0].cssRules); // undefined
  } catch (e) {
    alert(e); // error
  }
}
</script>

<link rel='stylesheet' href='myStyle.css'>

<!-- myStyle.css -->
body {
  background-color: green;
}</code>

솔루션

이 문제를 해결하기 위해 개발자는 몇 가지 해결 방법을 식별했습니다.

1. 온라인 또는 로컬 호스트에서 파일 제공: 서버에서 HTML 및 CSS 파일을 호스팅하거나 로컬 호스트를 사용하면 CORS 정책이 시행되지 않으며 CSS 규칙에 액세스할 수 있습니다.
2. 다른 브라우저 사용: Internet Explorer, Microsoft Edge, Firefox와 같은 다른 브라우저는 현재 동일한 CORS 제한을 적용하지 않습니다.
3. 명령줄 옵션: Chrome은 로컬 파일에서 CSS 규칙에 액세스할 수 있도록 허용하는 명령줄 옵션 --allow-file-access-from-files를 제공합니다. 이 옵션은 주의해서 사용해야 합니다.

설명

이 문제의 근본 원인은 Chrome의 보안 규칙 변경에 있습니다. 이제 Chrome은 서로 다른 출처의 리소스에 대한 액세스를 제한하는 CORS(Cross-Origin Resource Sharing) 정책을 준수합니다. 로컬 파일은 HTML 파일과 출처가 다르기 때문에 이러한 파일에서 CSS 규칙에 액세스하는 것은 CORS 정책을 위반하는 것입니다.

미해결 문제

Chrome에서 CORS 정책을 구현하면 보안이 향상되지만 또한 다음과 같은 몇 가지 미해결 문제도 발생했습니다.

• JavaScript에서 스타일시트에 액세스할 수 없는지 여부를 감지하는 유일한 방법은 try/catch 블록을 통하는 것입니다.
• Chrome에 구현 문제가 있을 수 있습니다. 이는 특정 해결 방법을 깨뜨립니다.
• CSS 개체 모델 사양은 아직 "작업 초안" 상태이므로 향후 변경의 여지가 남아 있습니다.

위 내용은 Chrome 64의 로컬 파일에서 CSS 규칙에 액세스할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!