크로스 도메인 iframes를 포함하는 부모 요소를 가진 마우스 딩 이벤트 캡처 : 원리 및 제한 사항

이 기사는 크로스 도메인 iframes를 포함하는 부모 div에서 마우스 딩 이벤트를 포착하는 과제를 탐구합니다. 핵심 문제는 브라우저 보안 정책 (동일한 오리핀 정책)이 크로스 도메인 iframe 컨텐츠에서 직접 DOM 이벤트를 듣지 않는다는 것입니다. iframe 소스 도메인 이름이 제어되고 CORS가 구성되지 않는 한 이러한 유형의 이벤트 캡처를 달성 할 수 없습니다. 이 기사는 이러한 보안 메커니즘을 자세히 설명하고 이벤트 상호 작용에 대한 한계를 설명하고 가능한 대안을 제공합니다.

소개 : 문제의 핵심 이해

웹 개발에서 우리는 종종 Mousedown과 같은 DOM 요소의 사용자 상호 작용 이벤트를 들어야합니다. 그러나 부모 div 요소 내부의 iframe에 iframe이 포함 된 경우, 특히 iframe에 의해로드 된 컨텐츠가 다른 도메인 이름에서 나오는 경우, 부모 Div에서 마우스 타운 이벤트를 캡처하는 데 예기치 않은 어려움이 발생합니다. 개발자는 마우스 클릭이 iframe 내부에서 발생하면 부모 DIV의 Mousedown 이벤트 청취자가 트리거되지 않음을 알 수 있습니다.

다음 HTML 구조 및 jQuery 이벤트 청취 코드를 고려하십시오.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<div class="test">
    <a href="/"> 테스트 </a>
</div>

<div class="test">
    <iframe src="https://www.google.com/" style="너비 : 400px; 높이 : 300px; 테두리 : 1px solid #ccc;"> </iframe>
</div>

 jQuery ( ". test"). on ( "Mousedown", () => console.log ( "test"));

이 코드에서 사용자가 첫 번째 div.test 내부의 태그를 클릭하면 console.log ( "test")가 정상적으로 실행됩니다. 그러나 사용자가 두 번째 Div.test 내부의 iframe 영역을 클릭하면 Mousedown 이벤트는 iframe이 Div의 자녀이더라도 부모 DIV의 청취자를 트리거하지 않습니다. 이것의 근본적인 이유는 브라우저 보안 모델의 "동일한 원산지 정책"에 있습니다.

브라우저 보안 초석 : 동일한 원산지 정책

동일한 원인 정책은 웹 애플리케이션의 보안 모델에서 주요 보안 메커니즘입니다. 다른 소스 (다른 프로토콜, 도메인 이름 또는 포트 번호, 즉 다른 소스)가있는 문서 또는 스크립트가 상호 작용하는 방식을 제한합니다. 예를 들어, 페이지가 다른 도메인 이름에서 iframe을로드하면 해당 페이지의 JavaScript는 iframe의 dom 컨텐츠, JavaScript 객체에 직접 액세스하거나 iframe 내부의 버블 링 이벤트를 캡처 할 수 없습니다.

특히 iframe 이벤트 캡처 문제에 대해 사용자가 iframe의 내부 영역을 클릭하면 다음과 같습니다.

1. 마우스 클릭 이벤트는 먼저 iframe 자체의 브라우징 컨텍스트에 의해 캡처됩니다.
2. iframe에 의해로드 된 컨텐츠는 다른 소스 (예 : https://www.google.com/)에서 나오기 때문에 동일한-오리핀 정책은 상위 페이지 JavaScript에 의해 iframe 컨텐츠에 대한 액세스를 엄격히 제한합니다.
3. 이는 IFRAME 내부의 이벤트가 부모 문서의 DOM 트리까지 거품을 일으키지 않음을 의미합니다. 학부모 문서의 이벤트 리스너는 크로스 도메인 Iframe 내에서 발생하는 이벤트를 "보거나"캡처 할 수 없습니다. 이는 악의적 인 웹 사이트가 IFRAME를 통해 주입하고 다른 웹 사이트의 사용자로부터 민감한 정보를 훔치거나 무단 운영을 수행하는 것을 방지하기위한 것입니다.

CORS (Cross-Domain Resource Sharing)와 iframes 간의 상호 작용

크로스 오리핀 자원 공유 (CORS, 크로스 오리핀 자원 공유)는 브라우저가 상 동성 정책을 완화 할 수있는 메커니즘입니다. Access-Control-Ollow-Origin과 같은 특정 HTTP 헤더를 서버 응답에 추가하여 특정 소스의 웹 애플리케이션이 리소스에 액세스 할 수 있도록 브라우저에 알려줍니다.

CORS는 크로스 도메인 데이터 요청을 구현할 수 있지만 IFRAME 내부의 DOM 이벤트 캡처 문제에 대한 솔루션을 직접 제공하지는 않습니다.

• CORS 구성 : CORS는 iframe 컨텐츠의 소스 서버 (예 : https://www.google.com/의 서버)에서 구성해야합니다. 개발자가 iframe의 소스 서버를 제어 할 수없는 경우 CORS를 구성 할 수 없습니다.
• CORS : CORS의 주요 목적은 주로 크로스 도메인 HTTP 요청 (예 : XMLHTTPREQUEST 또는 FETCH)을 허용하는 데 사용됩니다. 일반적으로 부모 문서와 아동 문서 사이의 원활한 DOM 이벤트 버블 또는 직접 DOM 운영을 구현하는 데 직접 사용되지 않습니다. iFrame의 소스 서버가 CORS로 구성되어 있더라도 부모 문서의 JavaScript는 여전히 iframe의 DOM 구조에 직접 액세스하거나 그 안에있는 이벤트를 듣지 못합니다. IFRAMES는 여전히 독립적 인 브라우징 컨텍스트와 보안 샌드 박스를 유지하기 때문입니다.

따라서 IFRAME의 소스 도메인 이름을 제어하고 서버를 구성 할 수 없다면 특정 API (예 : Message)를 통해 이벤트 정보를 간접적으로 전달하거나 특정 브라우저 확장의 권한을 통과 할 수 있으며 CORS에만 의존하면 크로스 도메인 IFRAME의 직접 이벤트 캡처 문제를 해결할 수 없습니다.

실질적인 한계 및 대안

요약하면, IFRAME 소스 도메인을 제어하지 않고 내부에서 마우스 타운 이벤트를 직접 캡처하거나 이벤트를 캡처하는 것을 방지하는 것은 불가능합니다. 이는 사용자 개인 정보를 보호하고 악의적 인 스크립트 공격을 방지하도록 설계된 웹 브라우저 보안 모델의 기본 구성 요소입니다.

그러나 특정 요구에 따라 몇 가지 대안이있을 수 있습니다.

1. 균질 한 iframe : iframe에 의해로드 된 내용이 상위 페이지와 동일하다면 (즉, 프로토콜, 도메인 이름 및 포트 번호는 정확히 동일) iframe.contentwindow.document를 통해 iframe의 DOM에 액세스하고 내부 요소에서 직접 이벤트를들을 수 있습니다.

    // iframe이 상 동성 Const Iframe = Document.querySelector ( 'iframe')라고 가정합니다.
   if (iframe && iframe.contentWindow) {
       iframe.contentwindow.document.addeventListener ( 'Mousedown', (이벤트) => {
           Console.log ( '동성 인 Iframe!', event.target);
       });
   }

   그러나 이것은 분명히 https://www.google.com/과 같은 시나리오에는 크로스 도메인 콘텐츠를로드합니다.

2. 투명한 오버레이 : 목표가 IFRAME가 포함 된 영역을 클릭하는 경우 (IFRAME 내부의 내용과 상호 작용하는 대신) IFRAME 위에 투명한 DIV 오버레이를 배치 하고이 오버레이에서 Mousedown 이벤트를들을 수 있습니다. 이 접근법의 장점은 오버레이가 상위 문서의 일부이며 부모 문서와 동일한 원산지이기 때문에 클릭 이벤트를 성공적으로 캡처 할 수 있다는 것입니다. 그러나 단점은 오버레이가 사용자와 iframe 컨텐츠 간의 상호 작용을 완전히 차단한다는 것입니다 (예 : iframe 내부의 링크를 클릭하고 iframe 컨텐츠를 스크롤하고 양식 작성 등).

   샘플 코드 :

    <div class="test-container" style="위치 : 상대; 너비 : 400px; 높이 : 300px; 테두리 : 1px solid #ccc;">
       <div class="iframe-Overlay" style="위치 : 절대; 상단; 상단 : 0; 왼쪽 : 0; 너비 : 100%; 높이 : 100%; Z-index : 10; 배경 : 투명;"> </div>
       <iframe src="https://www.google.com/" style="너비 : 100%; 높이 : 100%; 위치 : 상대; z-index : 1;"> </iframe>
   </div>

    jQuery ( ". iframe-Overlay"). on ( "Mousedown", () => {
       Console.log ( "오버레이 클릭! (iframe 상호 작용이 차단 됨)");
   });

   이 솔루션은 사용자가 iframe 영역을 "터치"한다는 것을 알아야하며 실제로 iframe 컨텐츠와 상호 작용할 필요가 없다는 것을 알아야하는 시나리오에 적합합니다.

요약

웹 개발에서, 크로스 도메인 iframe이 포함 된 부모 요소에서 마우스 딩 이벤트를 캡처하려는 시도는 iframe 내부에서 클릭 할 때 브라우저의 상동 정책에 의해 엄격하게 제한됩니다. 이 제한은 중요한 보안상의 이유로 인한 것이며 악의적 인 웹 사이트로부터 사용자를 보호하도록 설계되었습니다. iframe이 상위 페이지와 동일하지 않거나 iframe의 소스 서버를 제어하고 교차 문서 커뮤니케이션을위한 PostMessage와 같은 특정 API를 사용할 수 없으면 일반적으로 그러한 이벤트를 직접 캡처 할 수 없습니다. 실제 상호 작용보다는 영역 클릭 만 감지 해야하는 경우 투명한 오버레이는 실행 가능한 대안이 될 수 있지만 모든 IFRAME 내부의 상호 작용을 차단할 것입니다. 이러한 보안 제한을 이해하는 것은 프론트 엔드 개발자에게 중요하며 더 안전하고 더 많은 브라우저 호환 웹 응용 프로그램을 설계하는 데 도움이 될 수 있습니다.

위 내용은 크로스 도메인 iframes를 포함하는 부모 요소를 가진 마우스 딩 이벤트 캡처 : 원리 및 제한 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!