cách kiểm tra từ iframe crossdomain tin nhắn (postMessage) đến từ đâu?

Question

Tôi biết rằng MessageEvent có thuộc tính source là đối tượng cửa sổ gửi thư. Bây giờ làm thế nào để có được thông tin này kiểm tra iframe trong tài liệu chính (và tất nhiên trong tài liệu chính về tin nhắn đến) là nguồn gốc của thông điệp cụ thể đó? Chỉ có tùy chọn có sẵn để kiểm tra location.href trên đối tượng cửa sổ event.source và sau đó lặp lại tất cả các iframe để kiểm tra xem nó có phù hợp không? Điều gì sẽ xảy ra nếu có iframe có cùng url nguồn trong tài liệu chính?

Answer 1

Nếu bạn cố đọc thuộc tính location.href của iframe/cửa sổ tên miền chéo, điều này sẽ ném một ngoại lệ vì vi phạm chính sách cùng nguồn gốc. Bạn có thể ghi vào thuộc tính đó, nhưng bạn không thể đọc. Và ngay cả khi điều đó có hiệu quả, bạn sẽ gặp vấn đề với nhiều iframe với cùng một vấn đề về URL, như bạn đã đoán.

Dù sao, những gì bạn có thể làm là - thiết lập giao thức cho một số loại xác nhận gửi tin nhắn. Nói cách khác, trong khung nội tuyến nhận được thông báo X, bạn sẽ lặp qua tất cả các iframe trong tài liệu gốc và gửi một thông báo tới mỗi khung nội tuyến yêu cầu "Bạn đã gửi thư cho tôi X chưa?" và bạn sẽ lập trình tất cả các iframe để trả lời các câu hỏi như vậy. Tất nhiên, bạn sẽ phải đính kèm ID duy nhất cho tất cả thư để bạn biết iframe nào thừa nhận rằng nó đã gửi thư nào.

Tôi nghĩ rằng bạn phải suy nghĩ tại sao người nhận tin nhắn cần biết ai là người gửi, và tại sao nó không đủ để bạn chỉ biết tham chiếu đến người gửi đó (event.source)? Nếu có một số thông tin được người gửi biết - sau đó người gửi chỉ có thể gửi thông tin này trong thư ở địa điểm đầu tiên.

Answer 2

cách hiệu quả hơn là chuyển các khung nội tuyến mỗi ID duy nhất trên bắt đầu và khiến chúng sử dụng id đó khi đăng lại khung chính.

Answer 3

Điều tôi đang làm dường như hoạt động cho đến nay trong Chrome là lặp qua tất cả các iframe trên một trang và so sánh danh tính trên các đối tượng window của họ.

window.addEventListener('message', function(e) { 
    if(e.origin === 'https://www.example.com') { 
     var iframes = document.getElementsByTagName('iframe'); 

     for(var i = 0; i < iframes.length; i++) { 
      if(e.source === iframes[i].contentWindow) { 
       // Do stuff with iframes[i] 
      } 
     } 
    } 
} 

Đây chưa phải là trình duyệt được kiểm tra, vì vậy số dặm của bạn có thể thay đổi.