동일 출처 및 교차 도메인 프런트엔드 인터뷰에 대한 자세한 소개

크로스 도메인은 브라우저의 동일 출처 정책으로 인해 발생합니다. 이는 페이지에서 요청한 URL 주소가 브라우저의 URL 주소와 동일한 도메인에 있어야 함을 의미합니다(즉, 도메인 이름, 포트 및 프로토콜은 동일합니다.) 다음 글에서는 프론트엔드 면접에 꼭 필요한 동일 출처와 크로스 도메인에 대한 관련 정보를 모두 소개해 드렸으니, 필요한 친구들은 참고하시면 됩니다. 그것.

머리말

브라우저의 동일 출처 정책과 교차 도메인 방식도 프런트엔드 인터뷰에서 매우 흔한 문제라는 것은 잘 알려져 있습니다. 이 기사에서는 주로 동일 출처와 교차 도메인에 대해 공유합니다. 프론트엔드 인터뷰에서 만나게 될 도메인 메소드에 대해서는 크로스 도메인 문제에 대해선 별로 할 말이 없습니다.

동일 원본 정책이란 무엇인가요?

동일 원본 정책은 한 소스에서 로드된 문서나 스크립트가 다른 소스의 리소스와 상호 작용하는 방식을 제한하는 데 사용되는 방법입니다. 안전 메커니즘.

동일한 출처란 무엇인가요?

두 페이지의 프로토콜, 도메인 이름, 포트가 동일하면 두 페이지는 동일한 출처입니다. 예: http://www.hyuhan.com/index.html 이 웹사이트의 프로토콜은 http, 도메인 이름은 www.hyuhan.com, 포트는 80(기본 포트), 출처는 다음과 같습니다.

• http://www.hyuhan.com/other.html: 동일한 소스

• http://hyuhan.com/other.html: 다른 소스(다른 도메인 이름)

• https:// www.hyuhan.com /other.html: 다른 소스(다른 프로토콜)

• http://www.hyuhan.com:81/other.html: 다른 소스(다른 포트)

동일 출처 정책 사용자 정보 보안을 위한 것으로 동일 출처 정책에 의해 제한되는 주요 동작은 다음과 같습니다.

1. Cookie, LocalStorage, IndexDB를 읽을 수 없음

2. DOM을 실행할 수 없음

3. AJAX 요청을 보낼 수 없음

교차 도메인 액세스를 진행하는 방법

교차 도메인 AJAX 요청을 만드는 방법

동일 출처 정책의 제한을 우회하여 교차 도메인 AJAX를 만드는 세 가지 주요 방법이 있습니다. 요청.

JSONP

JSONP는 클라이언트와 서버 간의 도메인 간 통신을 위한 일반적인 방법입니다. 서버에서 json 데이터를 요청하려면 크로스 도메인

window.onload = function() {
    var script = document.createElement('script');
    script.src = "http://example.com/callback=test";
    document.appendChild(script);
}
function test(res) {
    console.log(res);
}

src의 콜백 매개변수는 백엔드가 호출해야 하는 콜백 함수의 이름을 설정하는 데 사용됩니다. 서버에서 반환되는 데이터는 다음과 같습니다.

test({
    "name": "小明",
    "age": 24
    })

이러한 방식으로 프런트 엔드는 여러 도메인의 터미널 데이터를 읽을 수 있습니다. 그러나 jsopn은 get 요청만 할 수 있고 post 요청을 보낼 수 없습니다.

WebSocket

WebSocket은 TCP 기반의 새로운 네트워크 프로토콜로 동일 출처 정책을 구현하지 않으며 서버가 지원하는 한 도메인 간 액세스를 허용합니다. 그리고 WebSocket은 Ajax 통신에만 국한되지 않습니다. Ajax 기술에서는 클라이언트가 요청을 시작해야 하고 WebSocket 서버와 클라이언트가 서로 정보를 푸시할 수 있기 때문입니다.

CORS

CORS는 W3C 표준인 Access-Control-Allow-Origin(Cross-Domain Resource Sharing)의 약어입니다. CORS는 브라우저와 서버 모두에서 지원되어야 합니다. 현재 기본적으로 모든 브라우저는 이 기능을 지원합니다. CORS에 대한 서버 측 지원은 주로 Access-Control-Allow-Origin 설정을 통해 수행됩니다. 브라우저가 해당 설정을 감지하면 Ajax 도메인 간 액세스를 허용할 수 있습니다.

document.domain

쿠키는 서버가 브라우저에 기록하는 정보로, 보안상의 이유로 동일한 출처의 웹페이지만 공유할 수 있습니다. 단, 두 웹페이지의 1차 도메인 이름은 동일하지만 헤드폰의 도메인 이름이 다른 경우 document.domain을 설정하여 쿠키를 공유할 수 있습니다.

예를 들어 한 웹페이지의 도메인 이름은 http://w1.example.com/a.html이고 다른 웹페이지의 도메인 이름은 http://w2.example.com/b.html입니다. 동일한 document.domain을 설정하면 이 두 웹페이지는 쿠키를 공유할 수 있습니다.

postMessage API

postMessage() 메서드를 사용하면 다양한 소스의 스크립트가 제한된 방식으로 비동기 방식으로 통신할 수 있어 문서 간, 다중 창 및 도메인 간 메시징이 가능해집니다. postMessage() 함수를 사용하여 메시지를 전달하고, 대상 페이지는 메시지를 수신하기 위해 창의 메시지 이벤트를 수신합니다. postMessage를 사용하면 도메인 전체에서 LocalStorage, IndexDB 및 DOM 데이터를 읽을 수 있습니다.

window.name

브라우저 창에는 window.name 속성이 있습니다. 이는 소스가 동일한지 여부에 관계없이 이전 웹 페이지가 창에 이 속성을 설정하는 한 다음 웹 페이지에서 읽어보세요. 즉, 창(창)의 수명 주기 내에서 창에 의해 로드된 모든 페이지는 window.name을 공유합니다. 각 페이지는 로드된 모든 페이지의 window.name에 대한 읽기 및 쓰기 권한을 갖습니다. . 분명히 이는 도메인 간 액세스를 달성할 수 있습니다.

위 내용은 동일 출처 및 교차 도메인 프런트엔드 인터뷰에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!