Chrome 확장 프로그램에서 스크립트로드가 거부되었습니다

Question

방금 ​​Codecademy에서 Javascript 과정을 완료했습니다. 이 page을 표시하는 크롬 확장 프로그램을 만들려고했습니다. 그래서 샘플 크롬 확장을 만드는 방법을 살펴본 후 extension (기본적으로 전체 사이트 코드를 복사하여 복사)을 만들었습니다. 내가

Refused to load the script 'http://dota2.cyborgmatt.com/prizetracker/data/ti4.json? 
callback=jQuery11020032285090535879135_1399794129146' because it violates the 
following Content Security Policy directive: "script-src 'self' 
chrome-extension-resource:" 

내가 콘텐츠 보안 정책에 대해보고하려고이 오류를 받고 추가 내가 뭐하는 거지의 완전한 생각이없는

"content_security_policy": "script-src 'self' http://dota2.cyborgmatt.com/; 
object-src 'self'" 

이 줄을하지만 다양한 물건을 읽는 시도하고 있지만, 이해하지 못했습니다. 누군가 도와 줘. 미리 감사드립니다.

Answer 1

그냥이 작업을 수행하는 페이지의 코드의 사본을 잡기 위해 좋은 생각이 아니다.

고려 : 원격 서버에서 코드를 실행하려고하기 때문에 콘텐츠 보안 정책 오류가 발생합니다. 정책을 완화 할 수는 있지만, 먼저이 문제가 보안 문제 인 이유를 설명하겠습니다.

---

현재, 코드로드 http://dota2.cyborgmatt.com/prizetracker/data/ti4.json 및 은 무엇인지 확인하지 않고, 그 내용을 실행합니다. 지금은 다음과 같습니다

populatePrizePool({"dollars":3129676}); 

그러나 : 이 당신이을 제어하지 않는 웹 사이트입니다.

상상 : 당신이 당신의 확장을 쓰기는 사이트 공지의 관리자는 비정상적인 트래픽이 대신 http://dota2.cyborgmatt.com/prizetracker/data/ti4_.json를로드하는 자신의 코드를 변경, 인기되고, 인터넷 검색 조금 후에이 원래 링크의 내용을 바꿉니다

alert("By the way, Ramana Venkata is stealing our data. Sincerely, cyborgmatt.com"); 

갑자기 확장 프로그램이 작동하지 않고 사용자가 분노한 사람들이 많습니다. 은 다소 당황한입니다.

문제가 있습니까? 교체 코드가 JS가 허용하는 것만 큼 악의적 일 수 있기 때문에 더 나쁠 수 있습니다. HTTP 트래픽은 가로 채기가 쉽지 않으므로 cyborgmatt.com 관리자는 임의 코드을 내선 번호에 삽입하지 않기 때문에 이러한 방식으로 정책을 완화 할 수 없습니다.

---

이제 문제를 해결하십시오. 코드를 AJAX로로드하는 대신이 파일을로드하고 구문 분석하여 JSON 데이터 (즉 {"dollars":3129676})를 가져오고 데이터를 안전하게 구문 분석하고 데이터의 유효성을 검사 한 다음 사용하십시오. 이런 식으로, 만약 위의 시나리오가 발생한다면, 적어도 그것의 악은 발생하지 않습니다.

1 단계 : 데이터를 가져옵니다.

는 XHR로 $.ajax 전화를 교체 :

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4) { 
    parseAndValidate(xhr.responseText); 
    } 
}; 
xhr.open("GET", "http://dota2.cyborgmatt.com/prizetracker/data/ti4.json", true); 
xhr.send(); 

2 단계 : 구문 분석 및 확인합니다.

다음과 같은 형식의 문자열이 있습니다. populatePrizePool(SOME_JSON);이고 JSON 데이터에 음수가 아닌 숫자 dollars이 있어야합니다.

function parseAndValidate(str){ 
    var some_json; 

    // First, extract `SOME_JSON` with a regular expression: 
    if(str.match(/populatePrizePool\((.*)\);/)) { 
    some_json = str.match(/populatePrizePool\((.*)\);/)[1]; 
    } else { 
    throw Error("Unexpected format for ti4.json"); 
    } 

    // Second, _safely_ parse `some_json`: 
    var data = JSON.parse(some_json); // Will throw an exception if something's not right 

    // Third, ensure that the JSON has the required data: 
    if(!data.dollars || typeof data.dollars !== "number" || data.dollars < 0) { 
    throw Error("Unexpected data format for ti4.json"); 
    } 

    // Finally, call the function: 
    populatePrizePool(data); 
} 

이것은 작은 프로젝트에 약간 과잉이 될 수 있지만 학습 경험입니다. 통제하지 못하는 데이터를 맹목적으로 신뢰하지 말고, 제어하지 않는 코드도 적게 신뢰하십시오.

Answer 2

이 HTTPS 자원이 아닌 HTTP 자원 according to the docs 만 가능하다 :

일부 외부 자바 스크립트 또는 객체 자원에 대한 필요가있을 경우, 안전 기원을 허용 목록에 의해 제한된 범위에 대한 정책을 휴식을 취할 수 있습니다 스크립트를 받아 들여야합니다. 확장의 권한 상승으로로드 된 실행 가능 리소스가 예상 한 리소스이며 활성 네트워크 공격자에 의해 대체되지 않았는지 확인하고자합니다. 중간자 (man-in-the-middle) 공격은 HTTP를 통해 사소하고 감지 할 수 없으므로 그러한 기원은 받아 들여지지 않을 것입니다. 현재 HTTPS, chrome-extension 및 chrome-extension-resource과 같이 허용 목록을 허용합니다.

은 따라서, http:로 시작 기원은 절대적으로 확장의 script-src CSP 지침에 포함 자격을 상실한다.

다행스럽게도 문제의 리소스에는 HTTPS 변형이 있습니다. 무조건 HTTPS를 사용하는 일에

var baseURL = (location.protocol == 'https:') ? 'https://dota2.cyborgmatt.com/' : 'http://dota2.cyborgmatt.com/'; 

: 확장의 코드에서 줄을 변경

var baseURL = 'https://dota2.cyborgmatt.com/';