Why can't Django sites be embedded inside another HTML(iframe)?

Question

I tried embedding a django form in another html page but it does not work. I tried my other django sites. But nothing works. Also tested for some other sites. Is django restricted to be used in iframe? How to make it work? form needed to be embedded Programming competition form

Template:

<form method="post">
  {% csrf_token %}
  <b>{{form.as_p}}</b>
  <input type="submit" value="Submit" title="Submit" />
</form>

Try to embedded as:

<html>
<iframe frameborder="1" src="http://form.classof20.cf/Programming_Competition/"></iframe>
</html>

It give a border and nothing inside.

Maybe the other site doesn't want to be embedded. If it's not your site, you have no control over how it behaves. — tadman
– tadman, Commented Sep 6, 2017 at 16:42
You should show what code you've created that's giving you trouble. We can't guess what's wrong. — tadman
– tadman, Commented Sep 6, 2017 at 16:44
embedding has nothing to do with django ... its just html ... — Joran Beasley
– Joran Beasley, Commented Sep 6, 2017 at 16:49
@tadman just make an empty django project, add his view code, use his HTML to embed it: you'll get the same error. That said, directly using the URL did make it easier to answer the question, this working URL is just a bonus point for the OP. But I do get your point, and will think about it next time I see a question that's not self contained (which is not the case here, as demonstrated). — jpic
– jpic, Commented Sep 7, 2017 at 7:09

jpic · Accepted Answer · 2017-09-06 19:51:27Z

Here is the error in webkit inspector after trying to load your HTML:

Refused to display 'http://form.classof20.cf/Programming_Competition/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE

And indeed, here's a dump of the response headers by curl:

$ curl -I http://form.classof20.cf/Programming_Competition/

HTTP/1.1 200 OK
Server: nginx/1.10.3 (Ubuntu)
Date: Wed, 06 Sep 2017 19:44:16 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 765
Connection: keep-alive
Vary: Cookie
X-Frame-Options: SAMEORIGIN
Set-Cookie: csrftoken=UJZltdTzJMe6961QMNRSgZ7vKWa1vUEf2lEB8lmaaZXgROf1zyALsuwsKpvtcby6; expires=Wed, 05-Sep-2018 19:44:16 GMT; Max-Age=31449600; Path=/

So, where does it come from ? It comes from Django clickjacking protection.

Solution 0: make sure your django response allows your other site in X-Frame-Options, ie:

X-Frame-Options: ALLOW-FROM http://your-other-site-which-embeds/

Solution 1: exempt your form view from clickjacking protection:

When using the middleware there may be some views where you do not want the X-Frame-Options header set. For those cases, you can use a view decorator that tells the middleware not to set the header:
from django.http import HttpResponse
from django.views.decorators.clickjacking import xframe_options_exempt

@xframe_options_exempt
def ok_to_load_in_a_frame(request):
    return HttpResponse("This page is safe to load in a frame on any site.")

Collectives™ on Stack Overflow

Why can't Django sites be embedded inside another HTML(iframe)?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related