JavaScript - 크로스 사이트 스크립팅 - 사용 권한이 거부되었습니다.

Question

Twitter의 OAuth 기능을 사용하려는 웹 응용 프로그램이 있습니다. 이 응용 프로그램에는 사용자에게 Twitter 자격 증명을 묻는 링크가 있습니다. 사용자가이 링크를 클릭하면 JavaScript를 통해 새 창이 열립니다. 이 창은 대화 상자의 역할을합니다. 이는 같은과 같이 수행됩니다

MainPage :

<div id="promptDiv"><a href="#" onclick="launchDialog('twitter/prompt.aspx');">Provide Credentials</a></div> 

...

function launchDialog(url) { 
    var specs = "location=0,menubar=0,status=0,titlebar=0,toolbar=0"; 
    var dialogWindow = window.open(url, "dialog", specs, true); 
} 

사용자가 링크를 클릭

, 그들은이 prompt.aspx 페이지에서 트위터의 사이트로 리디렉션됩니다. Twitter 사이트에서 사용자는 자신의 Twitter 자격 증명을 입력 할 수 있습니다. 그들이 자격 증명을 제공하면 내 사이트로 리디렉션됩니다. 이것은 트위터 사이트의 응용 프로그램에 설정할 수있는 콜백 URL을 통해 수행됩니다.

콜백이 발생하면 사용자는 대화 상자 창에서 내 사이트의 "/twitter/confirm.aspx"로 리디렉션됩니다. 이런 일이 발생하면 "promptDiv"의 내용을 업데이트하여 "트위터와 성공적으로 연결되었습니다"라고 말하면 링크를 교체하고 대화 상자를 닫습니다. 이것은 사용자가이 단계를 성공적으로 완료했음을 알리는 목적으로 사용됩니다. 대화 상자 창을 닫을 수 있습니다. 그러나 HTML DOM을 업데이트하려고하면 "Error : Permission Window.document 속성을 가져올 권한이 없습니다"라는 오류 메시지가 나타납니다. HTML DOM을 업데이트하기 위해, 나는 "/twitter/confirm.aspx"에서 다음 스크립트를 사용하여 시도 :

// Error is thrown on the first line. 
var confirmDiv = window.opener.document.getElementById("confirmDiv"); 
if (confirmDiv != null) 
{ 
    // Update the contents 
}     
window.close(); 

그때 그냥도를 통해 DOM에 액세스 할 수 있는지 확인하기 위해 HTML을 읽으려고 다음 스크립트 :

alert(window.opener.document.body.innerHTML); 

내가 이것을 시도했지만 "Permission denied"오류가 발생했습니다. 크로스 사이트 스크립팅과 관련이 있다는 것을 알고 있습니다. 그러나, 나는 그것을 해결하는 방법을 모른다. 이 문제를 어떻게 수정합니까? 내 응용 프로그램을 잘못 구성하고 있습니까? 사용자가 내 사이트로 리디렉션 된 후 HTML DOM을 어떻게 업데이트합니까?

도움 주셔서 감사합니다.

Answer 1

팝업 창이 트위터 인증 페이지를 열면 문서 도메인이 변경되어 window.opener가 재설정되어 원래의 winodw 통신 기능이 손실됩니다.

대기중인 SitePen의 NetFlix에 대해이 문제를 해결하기 위해 타이머를 사용하고 계속해서 액세스 할 수있는 위치 변경 팝업 창이 나타났습니다. 오류 페이지 나 성공 페이지로 이동 한 경우이를 알았고 팝업을 닫을 수 있습니다 (DOM은 제외하고 창을 제어 할 수 있음). 승인 상태를 반영하도록 기본 페이지의 내용을 변경합니다.

사용자가 팝업을 승인하고 닫지 않은 경우에도 창 폐쇄를 확인했습니다.

Adobe AIR에서 수행 되었기 때문에 콜백을 사용할 수 없었고 "콜백"할 서버가 없었기 때문에 여분의 장애물이있었습니다.