Fixing “Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN'” in AngularJS

This article will show how to fix the issue “Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’” in AngularJS.

When working with AngularJS and attempting to embed content such as YouTube videos or Google Docs within iframes, you might encounter the error message “Refused to display in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’.”

This error typically occurs due to security measures implemented by the external service provider (e.g., YouTube or Google) to prevent clickjacking attacks.

There are various solutions to overcome this issue, below are some approaches you can consider.

Modify the URL before posting

This solution involves changing the URL before sending it. The provided code adds &output=embed to the end of the URL. The idea is to manipulate the URL to potentially overcome the X-Frame-Options restriction.

var url = data.url + "&output=embed";
window.location.replace(url);

Explanation:

• This solution suggests modifying the URL by appending “&output=embed” to the end before posting it.
• The var url = data.url + "&output=embed"; line creates a new URL by concatenating the existing URL (data.url) with “&output=embed”.
• window.location.replace(url); then replaces the current URL with the modified URL, which might help bypass X-Frame-Options restrictions.

Update JavaScript Origins in Google OAuth 2 Credentials

This solution suggests resolving issues related to Google OAuth 2 credentials by updating the “JavaScript Origins” section in the Google Developer Console. You need to include your application domain in this section.

// No specific code provided, but it mentions adding the application domain to the "JavaScript Origins" section in Google OAuth 2 credentials.

Explanation:

• This solution advises going to console.developer.google.com and adding the application domain to the “JavaScript Origins” section of OAuth 2 credentials.
• By updating the JavaScript Origins, you may resolve issues related to authentication and embedding content.

Replace “watch?v=” with “v/”

This solution recommends modifying YouTube video URLs by replacing “watch?v=” with “v/”. The goal is to adjust the URL format to potentially bypass X-Frame-Options restrictions related to embedding YouTube videos.

var url = url.replace("watch?v=", "v/");

Explanation:

• This solution proposes replacing “watch?v=” with “v/” in the URL.
• The var url = url.replace("watch?v=", "v/"); line uses the replace function to replace occurrences of “watch?v=” with “v/” in the URL.

Use target attribute in iframe

This solution proposes adding the target="_parent" attribute to the <iframe> tag. The attribute instructs the browser to open the embedded content in the same window, potentially helping to bypass X-Frame-Options restrictions.

<iframe src="URL" target="_parent"></iframe>

Explanation:

• Adding the target="_parent" attribute to the iframe tag may help open the embedded page in the same window.
• This can be useful when dealing with X-Frame-Options restrictions by instructing the browser to load the content in the parent window.

Use the YouTube embed code

Instead of using a standard YouTube URL, this solution suggests using the official YouTube embed code. The provided <iframe> tag includes the necessary attributes for embedding a YouTube video with the embed code.

<iframe width="560" height="315" src="https://www.youtube.com/embed/YOUR_VIDEO_CODE" frameborder="0" allowfullscreen></iframe>

Explanation:

• Instead of using a standard YouTube URL, this solution recommends using the embed code provided by YouTube.
• The <iframe> tag with the specified attributes is an example of how to embed a YouTube video using the official embed code.

Adjust Google Docs Viewer iframe

This solution addresses X-Frame-Options issues related to Google Docs Viewer. It involves modifying the <iframe> tag’s src attribute by adding &embedded=true to the Google Docs Viewer URL.

iframe src="https://docs.google.com/viewer?url=' + url_your_document + '&embedded=true'"

Explanation:

• Modify the iframe for Google Docs Viewer by changing the URL format.
• The addition of &embedded=true to the Google Docs Viewer URL may resolve X-Frame-Options issues when embedding documents.

Use parent location for Google authentication

Specifically targeted for handling Google authentication redirects, this solution involves using the window.parent.location.replace() method to navigate to the specified URL in the parent window.

var loc = redirect_location;
window.parent.location.replace(loc);

Explanation:

• When dealing with Google authentication redirects, this solution suggests using the parent window’s location to navigate to the specified URL (loc).
• window.parent.location.replace(loc); is used to replace the parent window’s location with the provided URL.

Create an AngularJS filter for YouTube videos

This solution proposes creating a custom AngularJS filter called scrurl. The filter modifies YouTube video URLs by replacing “watch?v=” with “embed/”. The provided code demonstrates how to use the filter in an AngularJS template to dynamically adjust YouTube video URLs before embedding.

app.filter('scrurl', function($sce) {
    return function(text) {
        text = text.replace("watch?v=", "embed/");
        return $sce.trustAsResourceUrl(text);
    };
});
<iframe class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}" frameborder="0"></iframe>

Explanation:

• This solution involves creating an AngularJS filter (scrurl) to modify YouTube video URLs before embedding them.
• The filter uses the replace function to replace “watch?v=” with “embed/” in the provided URL.
• The <iframe> tag demonstrates how to use the filter in the AngularJS template to dynamically modify the YouTube video URL.

By understanding each solution and its corresponding code snippet, you can choose the approach that best fits your requirements to address the X-Frame-Options issue in your AngularJS application.