Protecting iFrame - Only allow it to work on one domain

Question

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!

Answer 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

Answer 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.