如何在我的页面中加载外部 web 页面并隐藏一些内容（避免跨站点问题）

Question

I need to incorporate in my web application some content from an external dynamic web page on which I have no control.

Then I need to filter some of the content of this page or to hide it for presenting only the relevant part that is interesting for my use.

I need also that the scripts on the external page are still working on the source site of the loaded content without cross-site protection.

Is all that possible? How can I do it? Any code example, please?

I suppose that this can be made with JS on client side. I work on back side and these themes are quite extraneous to me, please don't blame me.

Answer 1

No, it is not possible.

Browser same-origin policy is designed to prevent malicious websites from doing evil .

Same-origin Policy restricts JavaScript network access to prevent evil .

Same-origin Policy also restricts script API Access to prevent evil .

From the Docs:

JavaScript APIs like iframe.contentWindow , window.parent , window.open , and window.opener allow documents to directly reference each other. When two documents do not have the same origin, these references provide very limited access to Window and Location objects.

To communicate between documents from different origins, use window.postMessage .

— MDN Web Security Reference - Cross-origin script API access

One can not use <iframe> elements as a way to "avoid cross site problems". The Same Origin Policy was created to protect users from evil web pages.