댓글 검색 목록

[기타] chrome extention - 19. Cross-Origin XMLHttpRequest

페이지 정보

작성자 운영자 작성일 20-11-05 10:46 조회 731 댓글 0

일반 웹 페이지는 XMLHttpRequest 객체를 사용하여 원격 서버에서 데이터를 보내고 받을 수 있지만 동일한 원본 정책에 의해 제한됩니다. 콘텐츠 스크립트는 콘텐츠 스크립트가 삽입 된 웹 원본을 대신하여 요청을 시작하므로 콘텐츠 스크립트에도 동일한 원본 정책이 적용됩니다. (콘텐츠 스크립트는 Chrome 73 이후 CORB, Chrome 83 이후 CORS의 영향을 받았습니다.) 확장 출처는 그렇게 제한되지 않습니다. 확장 프로그램의 배경 페이지 또는 전경 탭에서 실행되는 스크립트는 출처 외부의 원격 서버와 통신 할 수 있습니다. 확장 프로그램은 교차 출처 권한을 요청합니다.

Extension origin

실행 중인 각 확장은 고유 한 별도의 보안 원본 내에 있습니다. 추가 권한을 요청하지 않고 확장 프로그램은 XMLHttpRequest를 사용하여 설치 내에서 리소스를 가져올 수 있습니다. 예를 들어 확장에 config_resources 폴더에 config.json이라는 JSON 구성 파일이 포함 된 경우 확장은 다음과 같이 파일의 콘텐츠를 검색 할 수 있습니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere.
xhr.open("GET", chrome.extension.getURL('/config_resources/config.json'), true);
xhr.send();

확장 프로그램이 자체가 아닌 다른 보안 출처 (예 : https://www.google.com)를 사용하려고 시도하는 경우 브라우저는 확장 프로그램이 적절한 출처 간 권한을 요청하지 않는 한 이를 허용하지 않습니다.

Requesting cross-origin permissions

매니페스트 파일의 권한 섹션에 호스트 또는 호스트 일치 패턴 (또는 둘 다)을 추가하면 확장 프로그램이 원본 외부의 원격 서버에 대한 액세스를 요청할 수 있습니다.

{
  "name": "My extension",
  ...
  "permissions": [
    "https://www.google.com/"
  ],
  ...
}

교차 출처 권한 값은 다음과 같이 완전한 호스트 이름이 될 수 있습니다.

또는 다음과 같은 일치 패턴 일 수 있습니다.

"https://*.google.com/"
"https://*/"

"https : // * /"의 일치 패턴은 도달 가능한 모든 도메인에 대한 HTTPS 액세스를 허용합니다. 여기서 일치 패턴은 콘텐츠 스크립트 일치 패턴과 유사하지만 호스트 다음에 오는 모든 경로 정보는 무시됩니다.

또한 액세스는 호스트와 체계 모두에 의해 부여됩니다. 확장 프로그램에서 지정된 호스트 또는 호스트 집합에 대한 보안 및 비보안 HTTP 액세스를 모두 원하는 경우 권한을 별도로 선언해야 합니다.

"permissions": [
  "http://www.google.com/",
  "https://www.google.com/"
]

보안 고려 사항

교차 사이트 스크립팅 취약성 방지

XMLHttpRequest를 통해 검색된 리소스를 사용할 때 백그라운드 페이지는 크로스 사이트 스크립팅의 희생양이 되지 않도록주의해야합니다. 특히 아래와 같은 위험한 API를 사용하지 마십시오.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be evaluating an evil script!
    var resp = eval("(" + xhr.responseText + ")");
    ...
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // WARNING! Might be injecting a malicious script!
    document.getElementById("resp").innerHTML = xhr.responseText;
    ...
  }
}
xhr.send();

대신 스크립트를 실행하지 않는 안전한 API를 선호하십시오.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // JSON.parse does not evaluate the attacker's scripts.
    var resp = JSON.parse(xhr.responseText);
  }
}
xhr.send();

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    // innerText does not let the attacker inject HTML elements.
    document.getElementById("resp").innerText = xhr.responseText;
  }
}
xhr.send();

교차 출처 요청에 대한 콘텐츠 스크립트 액세스 제한

콘텐츠 스크립트를 대신하여 원본 간 요청을 수행 할 때 콘텐츠 스크립트를 가장하려고 시도 할 수 있는 악성 웹 페이지로부터 보호해야 합니다. 특히 콘텐츠 스크립트가 임의의 URL을 요청하는 것을 허용하지 마십시오.

확장 프로그램이 교차 출처 요청을 수행하여 콘텐츠 스크립트가 항목의 가격을 검색 할 수 있도록 하는 예를 고려하십시오. 한 가지 (안전하지 않은) 접근 방식은 콘텐츠 스크립트가 배경 페이지에서 가져올 정확한 리소스를 지정하도록 하는 것입니다.

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if (request.contentScriptQuery == 'fetchUrl') {
        // WARNING: SECURITY PROBLEM - a malicious web page may abuse
        // the message handler to get access to arbitrary cross-origin
        // resources.
        fetch(request.url)
            .then(response => response.text())
            .then(text => sendResponse(text))
            .catch(error => ...)
        return true;  // Will respond asynchronously.
      }
    });

chrome.runtime.sendMessage(
    {contentScriptQuery: 'fetchUrl',
     url: 'https://another-site.com/price-query?itemId=' +
              encodeURIComponent(request.itemId)},
    response => parsePrice(response.text()));

위의 접근 방식에서 콘텐츠 스크립트는 확장 프로그램이 액세스 할 수 있는 모든 URL을 가져 오도록 확장 프로그램에 요청할 수 있습니다. 악의적 인 웹 페이지는 이러한 메시지를 위조하여 확장 프로그램을 속여 교차 출처 리소스에 대한 액세스 권한을 부여 할 수 있습니다.

대신 가져올 수 있는 리소스를 제한하는 메시지 처리기를 디자인하십시오. 아래에서는 전체 URL이 아닌 콘텐츠 스크립트에서 itemId 만 제공합니다.

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
      if (request.contentScriptQuery == 'queryPrice') {
        var url = 'https://another-site.com/price-query?itemId=' +
            encodeURIComponent(request.itemId);
        fetch(url)
            .then(response => response.text())
            .then(text => parsePrice(text))
            .then(price => sendResponse(price))
            .catch(error => ...)
        return true;  // Will respond asynchronously.
      }
    });

chrome.runtime.sendMessage(
    {contentScriptQuery: 'queryPrice', itemId: 12345},
    price => ...);

HTTP보다 HTTPS 선호

또한 HTTP를 통해 검색되는 리소스에 특히 주의하십시오. 내선이 적대적인 네트워크에서 사용되는 경우 네트워크 공격자 ( "중간자"라고도 함)가 응답을 수정하고 잠재적으로 내선을 공격 할 수 있습니다. 대신 가능하면 HTTPS를 선호하십시오.

콘텐츠 보안 정책 조정

매니페스트에 content_security_policy 속성을 추가하여 앱 또는 확장 프로그램에 대한 기본 콘텐츠 보안 정책을 수정하는 경우 연결하려는 모든 호스트가 허용되는지 확인해야 합니다. 기본 정책은 호스트에 대한 연결을 제한하지 않지만 connect-src 또는 default-src 지시문을 명시 적으로 추가 할 때 주의하십시오.

https://developer.chrome.com/extensions/xhr