Tiêm tập lệnh nội dung và yêu cầu quyền đối với nguồn gốc chéo

Question

Tôi rất tò mò nếu kịch bản sau đây là lỗi trong Chrome, hoạt động như dự kiến ​​hoặc lỗi nhà phát triển.

Vì vậy, tôi có phần mở rộng. Trong manifest.json của tôi yêu cầu quyền chéo gốc cho hai trang web:

"permissions": [ 
    "http://www.foo.com/*", 
    "http://www.bar.com/*" 
] 

Tôi cũng tuyên bố một kịch bản nội dung:

"content_scripts": [ 
    { 
     "matches": ["http://www.foo.com/*"], 
     "js": ["injectedScript.js"] 
    } 
] 

Vì vậy, tôi đã chỉ ra rằng tôi muốn tiêm "injectedScript .js "vào tất cả các miền foo.com. "injectedScript.js" trông giống như sau:

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = handleStateChange; // Implemented elsewhere. 
xhr.open("GET", 'http://www.bar.com/123'), true); 
xhr.send(); 

Bây giờ, khung nội tuyến được thêm vào trang Tiện ích mở rộng của Chrome. Có vẻ như sau:

<iframe src="http://www.foo.com/123"></iframe> 

src của khung này phù hợp với mẫu tập lệnh nội dung của tôi. Như vậy, khi khung tải, injected.js.js được tiêm bên trong nó. Nhưng XMLHttpRequest bên trong của injectedScript không thành công.

Bây giờ, điều này khiến tôi tự hỏi hành vi mong đợi là gì. Thật khó chịu khi gặp sự cố CORS khi tôi đã yêu cầu các quyền thích hợp ... nhưng tôi cũng có thể hiểu rằng tôi đang cố gắng truy cập "http://www.bar.com/123" từ nguồn gốc bên ngoài tiện ích mở rộng chrome của tôi ... mặc dù khung nội tuyến được tải vào tiện ích mà tôi có quyền truy cập.

Bất kỳ suy nghĩ nào của bất kỳ ai về vấn đề này?

EDIT: Nếu bạn đang tự hỏi tôi có thể nhận được gì từ quan điểm thực tế - tôi muốn tiêm một số javascript có thể gọi getImageData trên video trong trang được chèn. Tuy nhiên, tôi không thể, bởi vì getImageData nghĩ rằng src của video là dữ liệu bị nhiễm độc. Tôi đã yêu cầu các quyền thích hợp, nhưng nó không nhỏ giọt vào iframe.

UPDATE: Dưới đây là một bức tranh: http://i.imgur.com/PR48HO2.png

Answer 1

The Same-Origin chính sách được thực hiện để ngăn chặn các cuộc tấn công JavaScript độc hại (bạn có thể đọc thêm về here đó) và là một phần quan trọng của mô hình bảo mật web. Rất tiếc, bạn không thể trực tiếp sử dụng yêu cầu HTTP trong tập lệnh nội dung.

Tuy nhiên, nếu bạn xảy ra để có quyền truy cập vào các tập tin bạn muốn cho phép truy cập vào, bạn có thể thêm mã PHP sau đây để cho phép Cross-Origin:

header('Access-Control-Allow-Origin: *'); 

Đó là mã cơ bản cho phép bất kỳ trang web/địa chỉ IP để sử dụng Cross-Origin trên tệp sau.

Nếu bạn không có quyền truy cập vào tệp, bạn có thể thực hiện giải pháp thay vì cố gắng lấy HTML trực tiếp, hãy gọi tập lệnh PHP trên máy chủ cá nhân sẽ lấy nó cho bạn đã bật Cross-Origin sử dụng mã ở trên.

Dưới đây là một ví dụ:

header('Access-Control-Allow-Origin: *'); 

$URL = ("http://www.bar.com/123"); 

$HTMLfromURL = file_get_contents($URL); 

echo $HTMLfromURL 

Và sau đó ở phía bên Chrome Extension có:

Lưu ý: Các XMLHttpRequest bạn đang sử dụng là lỗi thời và gây tác động hiệu suất đáng kể về phía người sử dụng . Mã bên dưới là một phiên bản không đồng bộ của cùng một thứ không có tác động tiêu cực về hiệu suất.

var URL = "http://example.com/myscript.php"; 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", URL, true); 
xhr.onload = function (e) { 
if (xhr.readyState === 4) { 
    if (xhr.status === 200) { 
     var HTMLfromURL = xhr.responseText; 
} else { 
      // Received unexpected HTML error code (such as 404, or 403) 
      console.error(xhr.statusText); 
     } 
     } 
    }; 
xhr.onerror = function (e) { 
    console.error(xhr.statusText); 
    // Run this code if failed to load page 
}; 
xhr.send(null);