Cross domain modification iframe page content details

Time:2020-1-18

principle

The primary site embeds the proxy page and transfers data to the proxy page. The proxy page operates the dom of the target page according to the data of the primary site. Because the proxy page and the target page share the same domain, the proxy page can obtain and operate the document object of the target page

Prerequisite

You need to put proxy.html under the same domain service as the embedded iframe page, and it can be accessed

Use

Two call methods are supported: using PostMessage and URL params

postMessage

This method uses JSON. Stringify to convert the object to a string


// React
function IframeProxy(props) {
    handleLoad = (e) => {
        e.target.contentWindow.postMessage(JSON.stringify({
            iframe: `<iframe name="target" title="target" className="target" src="http://www.targetdomain.com/target.html" frameBorder="0" scrolling="no" style="width: 100%;height:100%"></iframe>`,
            includeStyle: `
                body {
                    background-color: yellow;
                }
                header {
                    display: none;
                }
                footer {
                    display: none;
                }
            `,
            includeScript: `
                window.addEventListener('load', function() {
                    alert(document.querySelector('body').innerHTML);
                });
            `,
            importStyle: `http://www.mydomain.com/assets/css/import.css`,
            importScript: `http://www.mydomain.com/assets/js/import.js`
        }), 'https://www.target.com');
    }

    return <iframe name="proxy" title="proxy" className="proxy" width="100%" height="100%" onLoad={handleLoad} src={`http://www.targetdomain.com/proxy.html?origin=${window.location.protocol}//${window.location.host}`} frameBorder="0" scrolling="no"></iframe>;
}

URL params

This method needs to encode the passed content with encodeuriccomponent


// React
function IframeProxy(props) {
    var params = 'iframe=' + encodeURIComponent(`
        <iframe name="target" title="target" className="target" src="http://www.targetdomain.com/target.html" frameBorder="0" scrolling="no" style="width: 100%;height:100%"></iframe>
    `);

    params += '&includeStyle=' + encodeURIComponent(`
        body {
            background-color: red;
        }
        header {
            display: none;
        }
        footer {
            display: none;
        }
    `);

    params += '&includeScript=' + encodeURIComponent(`
        window.addEventListener('load', function(event) {
            alert(document.querySelector('body').innerHTML);
        });
    `);

    params += '&importStyle=' + encodeURIComponent(`
        http://www.mydomain.com/assets/css/import.css
    `);

    params += '&importScript=' + encodeURIComponent(`
        http://www.mydomain.com/assets/js/import.js
    `);

    return <iframe name="proxy" title="proxy" className="proxy" width="100%" height="100%" src={`http://www.targetdomain.com/proxy.html?${params}`} frameBorder="0" scrolling="no"></iframe>;
}

API

<iframe src="http://www.targetdomain.com/proxy.html?params"></iframe>;

params: {
    Origin: the domain name of the current site. It is required when using the PostMessage method. Proxy is used to verify the source domain name of the message
    Iframe: an embedded iframe tag string is required,
    Includestyle: the CSS content you want to add to the iframe page,
    Include script: the JS content you want to add to the iframe page,
    Importstyle: you want to import the CSS resource link to iframe page. If the target site uses the security protocol (HTTPS) and the resource link uses the non security protocol (HTTP), this function will be disabled by the browser
    Importscript: you want to import JS resource links to iframe pages. If the target site uses the security protocol (HTTPS) and the resource link uses the non security protocol (HTTP), this function will be disabled by the browser
}

Note: for security issues, includescript and importscript are disabled by default. To enable the variable enabled? JS? Include in proxy.html, set it to true

Resources

https://github.com/stephenliu1944/cross-domain-iframe-proxy

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.