SecurityError: Đã chặn một khung có nguồn gốc truy cập vào khung có nguồn gốc chéo

612
mubashermubi 2014-08-03 08:14.

Tôi đang tải một <iframe>trang HTML của mình và cố gắng truy cập các phần tử trong trang đó bằng Javascript, nhưng khi tôi cố gắng thực thi mã của mình, tôi gặp lỗi sau:

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

Bạn có thể vui lòng giúp tôi để tìm ra một giải pháp để tôi có thể truy cập các phần tử trong khung?

Tôi đang sử dụng mã này để thử nghiệm, nhưng vô ích:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

7 answers

885
Marco Bonelli 2014-08-03 08:28.

Chính sách cùng nguồn gốc

Bạn không thể truy cập một <iframe>nguồn gốc khác bằng JavaScript, đó sẽ là một lỗ hổng bảo mật lớn nếu bạn có thể làm điều đó. Đối với cùng một chính sách nguồn gốc, các trình duyệt chặn các tập lệnh cố gắng truy cập vào một khung có nguồn gốc khác .

Nguồn gốc được coi là khác nếu ít nhất một trong các phần sau của địa chỉ không được duy trì:

giao thức : // tên máy chủ : cổng / ...

Giao thức, tên máy chủ và cổng phải giống nhau của miền của bạn nếu bạn muốn truy cập một khung.

LƯU Ý: Internet Explorer được biết là không tuân thủ nghiêm ngặt quy tắc này, xem chi tiết tại đây .

Ví dụ

Đây là những gì sẽ xảy ra khi cố gắng truy cập các URL sau từ http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname 

Cách giải quyết

Mặc dù chính sách cùng nguồn gốc chặn các tập lệnh truy cập nội dung của các trang web có nguồn gốc khác, nếu bạn sở hữu cả hai trang, bạn có thể khắc phục sự cố này bằng cách sử dụng window.postMessagemessagesự kiện tương đối của nó để gửi thông báo giữa hai trang, như sau:

  • Trong trang chính của bạn:

    const frame = document.getElementById('your-frame-id');
    frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
    

    Đối số thứ hai postMessage()có thể là '*'để chỉ ra không có ưu tiên về nguồn gốc của đích. Nguồn gốc đích phải luôn được cung cấp khi có thể, để tránh tiết lộ dữ liệu bạn gửi đến bất kỳ trang web nào khác.

  • Trong của bạn <iframe>(có trong trang chính):

    window.addEventListener('message', event => {
        // IMPORTANT: check the origin of the data! 
        if (event.origin.startsWith('http://your-first-site.com')) { 
            // The data was sent from your site.
            // Data sent with postMessage is stored in event.data:
            console.log(event.data); 
        } else {
            // The data was NOT sent from your site! 
            // Be careful! Do not use it. This else branch is
            // here just for clarity, you usually shouldn't need it.
            return; 
        } 
    }); 
    

Phương pháp này có thể được áp dụng theo cả hai hướng , tạo ra một trình lắng nghe trong trang chính và nhận phản hồi từ khung. Logic tương tự cũng có thể được thực hiện trong cửa sổ bật lên và về cơ bản bất kỳ cửa sổ mới nào được tạo bởi trang chính (ví dụ: sử dụng window.open()), không có bất kỳ sự khác biệt nào.

Tắt chính sách cùng nguồn gốc trong trình duyệt của bạn

Đã có một số câu trả lời hay về chủ đề này (tôi vừa tìm thấy chúng trên googling), vì vậy, đối với các trình duyệt có thể thực hiện được điều này, tôi sẽ liên kết câu trả lời tương đối. Tuy nhiên, hãy nhớ rằng việc tắt chính sách nguồn gốc sẽ chỉ ảnh hưởng đến trình duyệt của bạn . Ngoài ra, việc chạy trình duyệt có cài đặt bảo mật nguồn gốc bị vô hiệu hóa sẽ cấp cho bất kỳ trang web nào quyền truy cập vào các tài nguyên có nguồn gốc chéo, do đó, nó rất không an toàn và KHÔNG BAO GIỜ được thực hiện nếu bạn không biết chính xác mình đang làm gì (ví dụ: mục đích phát triển) .

56
Geert 2014-10-10 04:00.

Bổ sung cho câu trả lời của Marco Bonelli: cách tốt nhất hiện tại để tương tác giữa các khung / iframe đang được sử dụng window.postMessage, được hỗ trợ bởi tất cả các trình duyệt

19
Shahar Shokrani 2017-09-07 00:24.

Kiểm tra máy chủ web của miền để biết http://www.<domain>.comcấu hình. X-Frame-Options Đây là một tính năng bảo mật được thiết kế để ngăn chặn các cuộc tấn công clickJacking,

ClickJacking hoạt động như thế nào?

  1. Trang ác giống hệt trang nạn nhân.
  2. Sau đó, nó lừa người dùng nhập tên người dùng và mật khẩu của họ.

Về mặt kỹ thuật, cái ác có một iframenguồn đến trang nạn nhân.

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

Cách hoạt động của tính năng bảo mật

Nếu bạn muốn ngăn chặn yêu cầu máy chủ web được hiển thị trong một, hãy iframethêm x-frame-options

X-Frame-Options DENY

Các tùy chọn là:

  1. SAMEORIGIN // chỉ cho phép miền của riêng tôi hiển thị HTML của tôi bên trong iframe.
  2. DENY // không cho phép hiển thị HTML của tôi bên trong bất kỳ iframe nào
  3. "CHO PHÉP TỪ https://example.com/ " // cho phép miền cụ thể hiển thị HTML của tôi bên trong iframe

Đây là ví dụ cấu hình IIS:

   <httpProtocol>
       <customHeaders>
           <add name="X-Frame-Options" value="SAMEORIGIN" />
       </customHeaders>
   </httpProtocol>

Giải pháp cho câu hỏi

Nếu máy chủ web kích hoạt tính năng bảo mật, nó có thể gây ra Lỗi SecurityError phía máy khách.

14
Yakir Manor 2017-12-14 07:32.

Đối với tôi, tôi muốn triển khai kiểu bắt tay 2 chiều, nghĩa là:
- cửa sổ mẹ sẽ tải nhanh hơn thì iframe
- iframe sẽ nói chuyện với cửa sổ mẹ ngay khi nó sẵn sàng
- cửa sổ gốc sẵn sàng nhận thông báo iframe và phát lại

mã này được sử dụng để đặt nhãn trắng trong iframe bằng mã [Thuộc tính tùy chỉnh CSS]
:
iframe

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

cha mẹ

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

tự nhiên, bạn có thể giới hạn nguồn gốc và văn bản, đây là mã dễ làm việc với
tôi, tôi thấy mẫu đề thi này hữu ích:
[Nhắn tin tên miền chéo với postMessage]

0
ssp 2020-03-28 16:11.

Tôi muốn thêm cấu hình Java Spring cụ thể có thể ảnh hưởng đến việc này.

Trong trang Web hoặc ứng dụng Gateway có cài đặt contentSecurityPolicy

trong Spring, bạn có thể tìm thấy việc triển khai lớp con WebSecurityConfigurerAdapter

contentSecurityPolicy("
script-src 'self' [URLDomain]/scripts ; 
style-src 'self' [URLDomain]/styles;
frame-src 'self' [URLDomain]/frameUrl...

...

.referrerPolicy(ReferrerPolicyHeaderWriter.ReferrerPolicy.STRICT_ORIGIN_WHEN_CROSS_ORIGIN)

Trình duyệt sẽ bị chặn nếu bạn không xác định cấu trúc bên ngoài an toàn tại đây.

0
Zhanwen Chen 2020-05-22 11:41.

Nếu bạn có quyền kiểm soát nội dung của iframe - nghĩa là nếu nó chỉ được tải trong một thiết lập nhiều nguồn gốc, chẳng hạn như trên Amazon Mechanical Turk - bạn có thể giải quyết vấn đề này bằng <body onload='my_func(my_arg)'>thuộc tính cho html bên trong.

Ví dụ: đối với html bên trong, hãy sử dụng thistham số html (có - thisđược định nghĩa và nó tham chiếu đến cửa sổ mẹ của phần tử nội dung):

<body onload='changeForm(this)'>

Trong html bên trong:

    function changeForm(window) {
        console.log('inner window loaded: do whatever you want with the inner html');
        window.document.getElementById('mturk_form').style.display = 'none';
    </script>
0
Nick K9 2020-06-27 03:46.

Tôi đã gặp lỗi này khi cố gắng nhúng iframe và sau đó mở trang web bằng Brave. Lỗi đã biến mất khi tôi thay đổi thành "Shields Down" cho trang web được đề cập. Rõ ràng, đây không phải là một giải pháp đầy đủ, vì bất kỳ ai khác truy cập trang web bằng Brave sẽ gặp phải vấn đề tương tự. Để thực sự giải quyết nó, tôi cần thực hiện một trong những việc khác được liệt kê trên trang này. Nhưng ít nhất bây giờ tôi biết vấn đề nằm ở đâu.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Tận dụng lợi thế của việc bán hàng nhân Ngày của Cha này

Màn hình Samsung Galaxy S9 Plus. Chủ nhật này là Ngày của Cha⁠ — trong trường hợp nó khiến bạn suy nghĩ — và thay vì mua cho anh ấy một chiếc cà vạt trong năm nay, có lẽ đã đến lúc bạn mua cho anh ấy thứ mà anh ấy sẽ thực sự sử dụng.

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Assassin's Creed Snuck Into Monster Hunter: World Last Night

Monster Hunter: World yêu thích các sự kiện chéo. Dù có nghĩa là hóa trang thành Dante của Devil May Cry, giả dạng Horizon: Zero Dawn's Aloy, hay chiến đấu với quái vật Final Fantasy, các nhiệm vụ sự kiện khác nhau của Thế giới được nâng cấp tự do so với các trò chơi khác.

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Ava DuVernay Có Quà Tặng Ngày Của Mẹ cho Tất Cả Chúng Ta: Nếp Nhăn Thời Gian Sẽ Được Viết Lại Vào Cuối Tuần Ngày Của Mẹ!

Storm Reid, Oprah Winfrey, Mindy Kaling, Reese Witherspoon và Ava DuVernay tại buổi chiếu đặc biệt của A Wrinkle in Time tại Nhà hát Walter Reade ở Thành phố New York vào ngày 7 tháng 3 năm 2018 “Ava rất mong được nói chuyện với bạn,” một trong những người của Array dư luận viên nói qua điện thoại. (Array là tập thể phân phối, nghệ thuật và vận động chính sách của Ava DuVernay tập trung vào các bộ phim của người da màu và phụ nữ.

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Nhiệm vụ bất khả thi 5 sẽ khôi phục niềm tin của bạn trong phim hành động Tentpole

Mission Impossible: Rogue Nation bắt đầu ở một cấp độ khác. Theo nghĩa đen.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language