2016-08-15 6 views
0

내 웹 사이트의 SPA (Single Page Application) 내에서 다른 인증 웹 사이트를 사용하여 재 인증을 처리하려고합니다. 두 웹 사이트는 모두 클라이언트 사이트 내부에 있습니다.CORS를 사용하여 다른 사이트에서 재 인증 처리

SPA JavaScript 컨텍스트를 잃어 버리기 때문에 표준 "리디렉션"방법을 사용할 수 없습니다.

Auth 웹 사이트에서 CORS 설정을 조사 했으므로 이제 Access-Control-Allow-Origin: https://www.mywebsite.com을 반환합니다. Auth 페이지를 JQuery UI 대화 상자로로드하려고 시도하면 스크립트가 모두 Home 웹 컨텍스트에서로드하려고 시도 할 때 실패합니다. 내가 https://www.auth.com/login.html을로드하고있어 내 웹 사이트 https://www.mywebsite.com/static/
에서


. 이 https://www.mywebsite.com/static/scripts/authscript.js
대신 나는 또한 src 태그를 변경하여 iframe에 인증 페이지를로드하려고
https://www.auth.com/scripts/authscript.js

로 스크립트를의로드하려고 JQuery와 UI 대화 상자에로드 만하면

그냥 다시로드 페이지.

내가 보여 주려고하는 CORS 웹 페이지의 컨텍스트에서 소스 디렉토리를 변경하는 방법이 있습니까?

+0

스크립트에 대한 상대 경로를 사용 했습니까? –

+0

인증 페이지에서 내 스크립트가 아닙니다. 그리고 네, 그들은 상대 경로입니다."원산지"를 바꿀 수있는 방법이 있기를 바라고 있습니다. CORS를 사용하여 효과적으로 수행했다고 생각했던 것입니다. – u02sgb

+0

새 창에서 열어야합니다. –

답변

1

그래서 표준 jQuery 모달 대화 상자에 페이지를 올바르게로드 할 수 없으며 연결하려는 인증 페이지를 제어 할 수 없습니다. 이 문제를 해결하기 위해 나는 iframe으로 문제를 조사하고 HTML5 기능 sandbox을 사용하여 문제를 해결했습니다.

Auth 페이지가 iframe에로드 된 페이지를 다시로드하기 위해 "탈주 (break out)"스크립트를 사용하고 있었는데 분명히 이것이 내 SPA 컨텍스트를 위반했습니다. HTML5를 사용하면 iframe의 콘텐츠를 제한 할 수 있습니다.

<iframe src="" id="my_auth" sandbox="allow-forms allow-scripts allow-same-origin"></iframe>

  • allow-formsform
  • allow-scriptssubmit
  • allow-same-origin가 원점 (즉, 인증 웹 사이트) 스크립트와 같은를 생각 해보자는 자바 스크립트를 실행할 수 있도록 허용이 가능해야했습니다 쿠키
  • 참고로 나는 allow-top-navigation을 포함하고 있지 않습니다. 이는 페이지를 다시로드하고 손실을 허용하는 것입니다. 내 JavaScript 컨텍스트

다른 창을 팝업 할 필요없이 jQuery 모달 대화 상자 (iframe 포함)에 인증 페이지가 표시됩니다.

CORS는 Auth 웹 사이트로 리디렉션 할 수 있어야합니다 (JavaScript가 들어가기 전에 브라우저에서 발생). 대신 "Access-control-allow-origin"예외를 트랩 할 수도 있습니다.

희망이 있으면 유용 할 것입니다.