Protecting iFrame - Only allow it to work on one d

问题:

I have a Widget that I created and I am embedding it on other websites using an iFrame. What I want to do is make sure no one can view the source and copy the iFrame code and put it on their own website.

I can store the URL that it should be allowed on in the database. I've seen it done before, one site had a long encrypted code and if it didn't match with the domain then it said Access Denied..

Does anyone know how I can do this?

Thanks!

回答1:

No you can't do this. The best thing you can do is the following:

if (window.top.location.host != "hostname") {
    document.body.innerHTML = "Access Denied";
}

Add the above to your JavaScript and then use a JavaSript obfuscator

回答2:

You cannot prevent people from looking at your HTML, but there are some headers can allow you to specify what sites can embed your iframe. Take a look at the X-Frame-Options header and the frame-ancestors directive of Content-Security-Policy. Browsers that respect it will refuse to load the iframe when embedded into someone else's site.

回答3:

On the server in the code for the page displayed in the IFRAME, check the value of the Referer header. Unless this header has been blocked for privacy reasons, it contains the URL of the page which hosts the IFRAME.

回答4:

What you are asking for is pretty much impossible. If you make the source available on the web someone can copy it one way or another. Any javascript tricks can be defeated by using low level tools like wget or curl.

So even if you protect it, you're still going to find that someone could in theory copy the code (as the browser would receive it) and could if so determined put it on their own website.

回答5:

I faced the same problem, but I return the user on a home page. I spread the decision.

It has to be placed where there is iframe

<script>
        $(window).load(function () {
            var timetoEnd = '';   
            var dstHost   = 'YOUR-ALLOW-HOST';
            var backToUrl = 'BACK-TO-URL';

            function checkHost(){
                var win = window.frames.YOUR-IFRAME-NAME;
                win.postMessage('checkHost', dstHost);
                    console.log('msg Sended');
                    clearInterval(timetoEnd);
                    timetoEnd = setInterval(function () {
                        window.location.href = backToUrl;
                    }, 5000);
                }

                function validHost(event) {
                    if (event.data == 'checkHostTrue') {
                        clearInterval(timetoEnd);
                        console.log('checkHostTrue');
                    } else {
                        return;
                    }
                }

                window.addEventListener("message", validHost, false);
                checkHost();

                setInterval(function () {
                    checkHost();
                }, 10000
                );
            });
    </script>

It has to be placed into your src iframe

<script>
            function receiveMessage(event)
            {
                if(event.data=='checkHost'){
                    event.source.postMessage("checkHostTrue",
                           event.origin);
                } else {
                    return;
                }
            }
            window.addEventListener("message", receiveMessage, false);
</script>