CODEWITHSUNDEEP
javascripthtmliframe
Dipak
Dipak

Reputation: 6960

Block iframe src change through inspect element?

want to know how to prevent fetching of new data by changing the <iframe> src value in the webpage, through inspect element?

In web page we are showing videos, in <iframe> element. Videos will available to user after purchasing them. All videos are stored in Vimeo, and through Vimeo settings configured in such way that, it will be available only through our domain.

And the problem is, When a user purchase the video he/she can access the src value of <iframe> and can share with others. And who ever has that url can just go our website and do inspect element and change src value of any <iframe> element in web page, video will be loaded without purchasing.

How to prevent this? Is there any way to make <iframe> to not load the content after page loads? Also if a user want can edit html and put <iframe> element with url. Or is this not the correct approach to implement payed videos in webpage?

I am totally stuck at this point. Many Many Thanks for all your input.

update:

Upvotes: 0

Views: 3345

Answers (3)

megha
megha

Reputation: 51

If you don't want someone to change your iframe's "src", you can make the "src" property 'writable: false', so third party won't be able to change that.

Example: 

var element = document.getElementById('iframe');
Object.defineProperty(element, 'src', {
    writable: false
});

Also, someone can change src by calling element.setAttribute('src', value), so you can prevent this by overriding the setAttribute method.

Example:

var set  = element.setAttribute;
element.setAttribute = function(attr, val) {
    //do whatever
    //set.call(this, attr, val);
};

Upvotes: 0

QBM5
QBM5

Reputation: 2788

Your problem is you are trying to take a third party host and create authentication that does not exist.

It wont work all the time, but you could try to set up a setInterval timer that runs a few times a second, if the url changes to an unexpected value you could force the page to redirect to an unauthorized page.

If you go this route I would recommend initially loading the iframe element through javascript, not markup so if the user disables javascript they simply cant view any videos

window.setInterval(function(){
    var frame = document.getElementById("frame");
    if(frame.src  !== expectedSource){
        window.location.href = "unauthorized.html" // or something like that
    }
}, 300);

// load iframe
window.onload = function(){
   var frame = document.createElement("iframe");
   document.body.insertBefore(frame, container); // container implies an existin DOM element 
   frame.src = expectedSource; // you will need some way to get the expected source and load it
}

Upvotes: 1

CherryDT
CherryDT

Reputation: 29012

It is not possible to prevent this. I'm not sure you can even detect the change from the outside due to cross-origin security, unless Vimeo has an API through cross-window messaging which you could to check the video ID - in this case the best thing you could do is have the page periodically verify the video ID inside the frame.

But even then, for a slightly more advanced "hacker" this would be no problem whatsoever. One could even defeat this whole system just by creating a local webserver which servers an HTML file containing the desired IFrame and setting up an entry in the hosts file which points your domain to 127.0.0.1... Or just use the NoScript extension and disable whatever is checking the video ID on your end.

Bottom line, once you are sending the Vimeo URL over the ether, you lost control over it and that's it. There is nothing you can do about that other than having the video streamed from your own server instead of Vimeo, where you can implement your own access control systems, e.g. creating one-time tokens valid only for this specific user and time, after verifying they rightfully have access to the content.

Upvotes: 2

Related Questions