Iframe is cross-domain. There is no way to get iframe sub-page elements.

for example, my own website www.aaa.com, uses iframe to introduce www.bb.com (other people"s websites, which I can"t control).
can you get this?

Html5 html javascript
Mar.24,2022
The influence of

homologous policy cannot be realized at the front end. If you can manipulate the elements of a child page casually, it will be very dangerous for the pages in iframe .

if you really want to manipulate the elements in iframe , try using the nginx agent to implement

.

method one

write your page configuration and proxy forwarding configuration in a server , distinguish between different location , so that their domain names are the same, and there is no cross-domain problem. In this way, if you want to adjust the access path of the static problem of the proxy page, the example will not give

.

method two

write two server and server1 assuming the domain name is aaa.xxx.com and act as a proxy. When returning, insert a js code to modify domain=xxx.com , server2 assume the domain name is bbb.xxx.com , use it as your page, and set domain=xxx.com in front of the page.

here's an example: aaa.xxx.com Agent www.qq.com , bbb.xxx.com iframe reference aaa.xxx.com , and get the element

of iframe

first is server configuration

of nginx 
server {
    listen       80;
    server_name  aaa.xxx.com;

    location / {
        proxy_pass  https://www.qq.com/;
        proxy_set_header Host www.qq.com;
        proxy_set_header X-Forwarded-For $remote_addr;

        -sharp (:)
        proxy_set_header Accept-Encoding '';

        -sharp  JS  --with-http_sub_module 
        sub_filter '</head>' '</head><script>document.domain = \'xxx.com\';</script>';
        sub_filter_once off;   
    }
}
server {
    listen       80;
    server_name  bbb.xxx.com;
    root /home/www/bbb.xxx.com;

    location / {
    }
}

then write a test code / home/www/bbb.xxx.com/index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <iframe style="width: 100%;height: 100%" id="iframe" src="http://aaa.xxx.com"></iframe>
</body>
<script>
  document.domain = 'xxx.com';
  var iframe = document.getElementById('iframe');
  iframe.onload = function(){
    //  iframe  id  sosobar 
    console.log('iframe', iframe.contentWindow.document.getElementById('sosobar'));
  }
</script>
</html>

start Nginx , visit bbb.xxx.com to view the results

clipboard.png

as you can see, iframe has achieved cross-domain implementation, but in doing so, some problems cannot be ignored

  • https question
  • site has detection code
  • JS , CSS , png loaded through independent domain names, may have cross-domain or permission problems
  • changed domain so that some resources cannot be obtained

ps:, if you have a good solution, you are welcome to share

Previous: Mini Program's problem of data rendering delay in scrolling pages

Next: PDO-Mysql database operation class

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb9108-2724.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb9108-2724.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?