I'm working on a website that's hosted on my pany network and only accessible from within the network, so I have no concern with cross-domain requests.

Anyways, this particular website I'm working on I added a "Provide Feedback" link in the navigation bar. This "Provide Feedback" link opens a jQuery modal dialog, and inside this dialog is an iframe that loads from an URL whose server is different than the one this particular website is hosted on, hence the error I'm getting.

MVC4 worked fine, no problems like this, it's only when I upgraded to MVC5. There's something different about MVC5 that prevents content from being loaded into a frame.

I've read about setting the X-Frame options to "ALLOWFROM" - but does this mean I need to set this on the app URL loaded in the iframe, or the calling application (the website that has this link in the nav bar)? I'll also add that this problem only showed up when I upgraded the application that's supposed to be loading in the iframe from MVC4/WebAPI to MVC5/WebAPI version 2. I had no issues with this using the previous version of MVC. How can I resolve this issue?

Larger version of Firebug:

Here's my client-side code in the app that contains the code for "Provide Feedback":

$(document).ready(function () {
            $('body').append("<div id='dialog-modal'><iframe width='900' height='420' src=''></iframe></div>");
            $("#dialog-modal").dialog({
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                },
                title: "Provide Feedback!",
                autoOpen: false,
                height: 560,
                width: 940,
                modal: true,
                overlay: {
                    backgroundColor: "#000000",
                    opacity: 0.75
                },
                resizable: true,
                open: function () {
                    $('.ui-widget-overlay').bind('click', function () {
                        $('#dialog-modal').dialog('close');
                    })
                }
            });

            $("a.feedback").live("click", function (event) {
                event.preventDefault();
                $("#dialog-modal").dialog("open");
            });

I'm working on a website that's hosted on my pany network and only accessible from within the network, so I have no concern with cross-domain requests.

Anyways, this particular website I'm working on I added a "Provide Feedback" link in the navigation bar. This "Provide Feedback" link opens a jQuery modal dialog, and inside this dialog is an iframe that loads from an URL whose server is different than the one this particular website is hosted on, hence the error I'm getting.

MVC4 worked fine, no problems like this, it's only when I upgraded to MVC5. There's something different about MVC5 that prevents content from being loaded into a frame.

I've read about setting the X-Frame options to "ALLOWFROM" - but does this mean I need to set this on the app URL loaded in the iframe, or the calling application (the website that has this link in the nav bar)? I'll also add that this problem only showed up when I upgraded the application that's supposed to be loading in the iframe from MVC4/WebAPI to MVC5/WebAPI version 2. I had no issues with this using the previous version of MVC. How can I resolve this issue?

Larger version of Firebug:

Here's my client-side code in the app that contains the code for "Provide Feedback":

$(document).ready(function () {
            $('body').append("<div id='dialog-modal'><iframe width='900' height='420' src='http://blah.blah/ApplicationName/AppFeedback/Create?appId=TestApp'></iframe></div>");
            $("#dialog-modal").dialog({
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                },
                title: "Provide Feedback!",
                autoOpen: false,
                height: 560,
                width: 940,
                modal: true,
                overlay: {
                    backgroundColor: "#000000",
                    opacity: 0.75
                },
                resizable: true,
                open: function () {
                    $('.ui-widget-overlay').bind('click', function () {
                        $('#dialog-modal').dialog('close');
                    })
                }
            });

            $("a.feedback").live("click", function (event) {
                event.preventDefault();
                $("#dialog-modal").dialog("open");
            });

• javascript
• jquery
• asp-mvc-4
• iframe
• asp-web-api

2 Answers 2

Putting this in Global.asax worked for me:

protected void Application_PreSendRequestHeaders(object sender, EventArgs e)
{
    HttpContext.Current.Response.Headers.Remove("X-Frame-Options");
}

Apparently there's a difference between MVC4 and MVC5, where it worked in MVC4, but not in MVC5, which is what I'm using.

You should set this response header on the application that you are including inside the iframe.