Chrome 확장 프로그램의 X-Frame-Options 거부에 대한 해결 방법

웹 탐색 컨텍스트에서 X-Frame-Options 헤더가 재생됩니다. iframe 내의 웹 콘텐츠 로드를 제한하고 사이트 간 요청 위조 공격을 방지하여 보안을 강화하는 데 중요한 역할을 합니다. 그러나 Chrome 확장 프로그램의 경우 이 보안 조치는 기능을 위해 iframe을 사용하는 확장 프로그램에 문제를 제기합니다.

이러한 확장 프로그램 중 하나는 웹 페이지를 iframe에서 여는 대신 iframe 내에 표시하도록 설계된 Intab입니다. 새 탭. 그러나 X-Frame-Options DENY 또는 SAMEORIGIN 제한을 적용하는 웹사이트를 접하게 되면 Intab의 운영 기능이 방해를 받아 콘텐츠가 의도한 대로 렌더링되지 않을 수 있습니다.

이러한 제한을 극복하고 사용자 경험을 개선하려면 다음을 살펴보는 것이 중요합니다. 잠재적인 해결 방법. Chrome 확장 프로그램은 이 문제를 해결하는 데 도움이 될 수 있는 다양한 브라우저 수준 기능에 대한 액세스를 제공합니다.

webRequest API

유망한 접근 방식 중 하나는 Chrome에서 제공하는 webRequest API를 활용하는 것입니다. . 이 API를 사용하면 확장이 HTTP 요청을 가로채고 수정할 수 있어 X-Frame-Options 헤더와 같은 헤더 정보를 조작하는 기능을 제공합니다. 확장 프로그램은 헤더를 제거하거나 변경함으로써 DENY 또는 SAMEORIGIN 제한을 우회하고 iframe 내에서 웹페이지 로드를 허용할 수 있습니다.

아래 코드 스니펫은 webRequest API를 사용하여 이를 달성하는 방법을 보여줍니다.

chrome.webRequest.onHeadersReceived.addListener(
    function(info) {
        var headers = info.responseHeaders;
        for (var i=headers.length-1; i >= 0; --i) {
            var header = headers[i].name.toLowerCase();
            if (header == 'x-frame-options' || header == 'frame-options') {
                headers.splice(i, 1); // Remove header
            }
        }
        return {responseHeaders: headers};
    }, {
        urls: [
            '*://*/*', // Pattern to match all http(s) pages
            // '*://*.example.org/*', // Pattern to match one http(s) site
        ], 
        types: [ 'sub_frame' ]
    }, [
        'blocking',
        'responseHeaders',
        // Modern Chrome needs 'extraHeaders' to see and change this header,
        // so the following code evaluates to 'extraHeaders' only in modern Chrome.
        chrome.webRequest.OnHeadersReceivedOptions.EXTRA_HEADERS,
    ].filter(Boolean)
);

}, [ '블로킹', '응답 헤더', // 최신 Chrome에서는 이 헤더를 보고 변경하려면 'extraHeaders'가 필요합니다. // 따라서 다음 코드는 최신 Chrome에서만 'extraHeaders'로 평가됩니다. chrome.webRequest.OnHeadersReceivedOptions.EXTRA_HEADERS, ].filter(부울) );

매니페스트 권한

webRequest API를 활용하려면 확장 프로그램의 매니페스트에서 필요한 권한을 선언해야 합니다.

"permissions": [
    "webRequest",
    "webRequestBlocking",
    "urls": [
        "*://*/*" // Pattern to match all http(s) pages
    ]
]

"permissions": [ "웹요청", "웹요청 차단", "URL": [ "*://*/*" // 모든 http(s) 페이지와 일치하는 패턴 ] ]

이 접근 방식은 X-Frame-Options DENY 또는 SAMEORIGIN 제한을 극복하기 위한 실행 가능한 솔루션을 제공하여 Intab과 같은 Chrome 확장 프로그램이 원활하게 작동하고 다양한 웹사이트에서 일관된 사용자 환경을 제공할 수 있도록 합니다.