Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AJAX and YouTube: 'X-Frame-Options' to 'SAMEORIGIN'.

I'm writing a site where content is loaded dynamically via jQuery. The reason for this is to leave an audio player running while being able to navigate through page content without refresh.

Ran into trouble trying to get YouTube videos to work, it's setup like this.

Site content is loaded using .load(), and for the videos page it contains an unordered list of links to YouTube videos, and each with an empty <div> for <iframe>'s. Clicking on a link grows the <li> and embeds the <iframe> with the video.

Everything works well except the <iframe> will not load the source, throwing this error.

Refused to display 'http://www.youtube.com/watch?v=myvideo' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Also tried adding <iframe> into <li> with display: none; with same result.

I thought I understood the javascript same domain policy, but this is beyond me. Googling the error leads me to believe it's something server side? But that doesn't make any sense.

Hard to fiddle something like this, hope it makes sense.

like image 926
HandsomeRob Avatar asked Aug 08 '13 21:08

HandsomeRob


People also ask

What is SAMEORIGIN in X-Frame-options?

X-Frame-Options:SAMEORIGIN - This means that the page can only be embedded in a frame on a page with the same origin as itself. X-Frame-Options:ALLOW-FROM - The page can only be displayed in a frame on the specified origin. This only works in browsers that support this header.

How do I set X-Frame-options to allow all?

You can then send a X-Frame-Options response HTTP header with the value: "Allow-From ip-address", where ip address is the remote ip address that is trying to embed content on your server. This will allow your website to be embedded by all websites that are accessed using an ip address from the browser.

How do I enable X-Frame-options in iframe?

Double-click the HTTP Response Headers icon in the feature list in the middle. In the Actions pane on the right side, click Add. In the dialog box that appears, type X-Frame-Options in the Name field and type SAMEORIGIN in the Value field. Click OK to save your changes.


1 Answers

The error means that the document may only be used as iframe inside documents located at www.youtube.com

Use the URL of the embed-code instead:

http://www.youtube.com/embed/myvideo

it will send a X-Frame-Options-header with a value of ALLOWALL

like image 108
Dr.Molle Avatar answered Sep 19 '22 09:09

Dr.Molle