programing

SecurityError: 오리진이 있는 프레임이 교차 오리진 프레임에 액세스하는 것을 차단했습니다.

minecode 2022. 10. 1. 14:02
반응형

SecurityError: 오리진이 있는 프레임이 교차 오리진 프레임에 액세스하는 것을 차단했습니다.

로로 an an an an an an an an an an 하고 있습니다.<iframe>HTML 페이지에서 JavaScript를 사용하여 그 안에 있는 요소에 액세스하려고 하는데 코드를 실행하려고 하면 다음 오류가 나타납니다.

Security Error: 발신기지 "http://www.example.com" 프레임이 교차 프레임에 액세스하지 못하도록 차단했습니다.

프레임 내의 요소에 액세스하려면 어떻게 해야 합니까?

이 코드를 테스트에 사용하고 있지만 허사입니다.

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

동일원산지정책

액세스 할 수 없습니다.<iframe> JavaScript를 사용하여 원본이 다른 경우 보안상 큰 결함이 발생합니다.같은 발신기지 정책브라우저는 다른 발신기지 프레임에 액세스하려는 스크립트를 차단합니다.

주소의 적어도 다음 부분 중 하나가 유지되지 않은 경우 발신지는 다른 것으로 간주됩니다.

프로토콜://hostname: 포트/...

프레임에 액세스하려면 프로토콜, 호스트 이름 및 포트가 도메인과 동일해야 합니다.

메모: Internet Explorer는 이 규칙을 엄격하게 준수하지 않는 것으로 알려져 있습니다.자세한 내용은 여기를 참조하십시오.

예

됩니다.http://www.example.com/home/index.html

URL                                             RESULT
http://www.example.com/home/other.html       -> Success
http://www.example.com/dir/inner/another.php -> Success
http://www.example.com:80                    -> Success (default port for HTTP)
http://www.example.com:2251                  -> Failure: different port
http://data.example.com/dir/other.html       -> Failure: different hostname
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname

회피책

같은 발신기지 정책에 의해서 스크립트가 다른 발신기지 사이트의 컨텐츠에 액세스 하는 것이 차단되어 있어도, 양쪽 페이지를 소유하고 있는 경우는, 이 문제와 관련 이벤트를 회피하고, 2 페이지간에 다음과 같이 메세지를 송신할 수 있습니다.

  • 메인 페이지:

    const frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'https://your-second-site.example');

    의 두 번째 .postMessage()수 있습니다.'*'행선지의 송신원에 대한 프리퍼런스가 없는 것을 나타냅니다.다른 사이트로 전송되는 데이터가 공개되지 않도록 가능한 경우 항상 대상 출처를 제공해야 합니다.

  • 고객님의 고객명<iframe>(예: 페 ( ( ( ( ( ( ( () :

    window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data!
    if (event.origin === 'https://your-first-site.example') {
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data);
    } else {
        // The data was NOT sent from your site!
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't need it.
        return;
    }
});

이 방법은 양방향으로 적용할 수 있으며, 메인 페이지에서도 청취자를 만들고 프레임에서 응답을 받을 수 있습니다.같은 논리를 팝업이나 기본적으로 (예를 들어 를 사용하여) 메인 페이지에 의해 생성되는 모든 새로운 창에서도 아무런 차이 없이 구현할 수 있습니다.

브라우저에서 동일한 원본 정책 사용 안 함

이미 이 토픽에 대한 좋은 답변이 몇 개 있습니다(구글을 검색한 지 얼마 안 되었기 때문에 검색 가능한 브라우저에 대해 관련 답변을 링크합니다).다만, 같은 발신기지 정책을 무효로 하면, 브라우저에만 영향을 주는 것에 주의해 주세요.또, 같은 발신기지 시큐러티 설정을 무효로 한 브라우저를 실행하면, 다른 발신기지 자원에의 Web 사이트 액세스가 허가되기 때문에, 매우 안전하지 않기 때문에, 자신이 무엇을 하고 있는지(개발 목적등) 정확하게 모르는 경우는, 절대로 실행하지 말아 주세요.

Marco Bornelli의 답변 보완: 현재 프레임/iframes 간에 상호 작용하는 최선의 방법 (모든 브라우저에서 지원)

웹 에서 "Domain" 을 합니다.http://www.example.com의 X-Frame-Options 기능은 공격(clickJacking 공격을 하기 위해 입니다.

click Jacking 구조

  1. 사악한 페이지는 피해자 페이지와 똑같아 보여요
  2. 그런 다음 사용자 이름과 비밀번호를 입력하도록 사용자를 속였습니다.

말하면 에는 악이 iframe피해자 페이지에 소스를 표시합니다.

<html>
    <iframe src='victim-domain.example'/>
    <input id="username" type="text" style="display: none;"/>
    <input id="password" type="text" style="display: none;"/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

보안 기능 작동 방식

가 " " 에 않도록 iframeX 프레임 프레임을 추가

X 프레임 옵션 DENY

옵션은 다음과 같습니다.

  1. SAMEORIGIN: iframe HTML 입니다.
  2. DENY: iframe 내에 HTML을 렌더링할 수 없습니다.
  3. ALLOW-FROM https://example.com/: 에서 내 수 있도록 iframe은 HTML을 렌더링합니다.

IIS 의 설정 예를 다음에 나타냅니다.

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

질문에 대한 해결책

웹 서버가 보안 기능을 활성화한 경우 클라이언트 측 SecurityError가 발생할 수 있습니다.

저는 양방향 핸드쉐이크를 구현하고 싶었습니다.즉, 다음과 같습니다.
됩니다.
- 은 iframe이
- 하고 iframe 메시지를

이 코드는 [CSS custom property]를 사용하여 iframe에 흰색 라벨을 설정하는 데 사용됩니다.
삭제:
if

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

부모

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

할 수 , 와 함께 작업하기 .이치노
나는 이 시험이 도움이 된다는 것을 알았다.
Message를 사용한 ][ Post Message ]

실제로 특정 시나리오에 대한 회피책이 있습니다.

Windows 2 의 2 의 Windows 의 2 의 Windows 의 2 의 사용 (즉, ( ) 。localhost:3000&localhost:2000하려면 각 원본으로 

document.domain = 'localhost'

은, 에서 다른 , 「」, 「」, 「」, 「」, 「」, 「」에 있습니다.john.site.example접속 시도peter.site.example아니면 그냥site.example

document.domain = 'site.example'

명시적으로 설정함으로써document.domain;브라우저는 호스트명의 차이를 무시하고, Windows 는 「같은 발신기지」로부터 온 것으로 취급할 수 있습니다.부모 창에서 iframe 에 할 수 .frame.contentWindow.document.body.classList.add('happyDev')

할 수 있는 즉 Amazon Turk와 오리진 되어 있는 iframe을 사용하여 이 할 수 .<body onload='my_func(my_arg)'>속성을 지정합니다.

들어 에는 html 을 합니다.this 파라미터- html "yes" - )this정의되어 있으며 내부 본체 요소의 부모 창을 참조합니다).

<body onload='changeForm(this)'>

내부 html:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>

iframe을 삽입하고 Brave로 사이트를 열 때 이 오류가 발생했습니다.해당 사이트에서 "Shields Down"으로 변경하자 오류가 사라졌습니다.Brave와 함께 사이트를 방문하는 다른 사람도 같은 문제에 직면하게 되므로, 이것은 완전한 해결책은 아닙니다.실제로 이 문제를 해결하려면 이 페이지에 나와 있는 다른 작업 중 하나를 수행해야 합니다.하지만 적어도 나는 이제 문제가 어디에 있는지 안다.

이에 영향을 줄 수 있는 Java Spring 고유의 구성을 추가하고 싶습니다.

웹 사이트 또는 게이트웨이 응용 프로그램에는 contentSecurityPolicy 설정이 있습니다.

봄에는 Web Security Configurer Adapter 서브클래스의 실장을 찾을 수 있습니다.

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

...

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

여기서 안전한 외부 연결을 정의하지 않으면 브라우저가 차단됩니다.

  • 시작 메뉴를 엽니다.
  • windows+R을 입력하거나 "Run"을 엽니다.
  • 다음 명령을 실행합니다.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security

언급URL : https://stackoverflow.com/questions/25098021/securityerror-blocked-a-frame-with-origin-from-accessing-a-cross-origin-frame

반응형
저작자표시 (새창열림)

'programing' 카테고리의 다른 글

현재 스레드가 메인 스레드가 아닌지 확인하는 방법  (0) 2022.10.01
SQL 데이터베이스 테이블의 n번째 행을 선택하려면 어떻게 해야 합니다.  (0) 2022.10.01
총 잠금 수가 잠금 테이블 크기를 초과합니다.  (0) 2022.10.01
와 Instant를 사용한 JPA 쿼리가 작동하지 않음  (0) 2022.09.22
코드 변경 후 magento 셋업 업그레이드를 실행할 때 Mysql 서버가 사라짐  (0) 2022.09.22

'programing'의 다른글

  • 현재글SecurityError: 오리진이 있는 프레임이 교차 오리진 프레임에 액세스하는 것을 차단했습니다.

관련글

댓글

티스토리툴바