Embed PDF media file in Django template

Question

The question is that I want to embed a PDF file through <embed>, <iframe> tag, or similar in a Django template using {{ object.file.url }}, which is presumed to be a file saved in the /MEDIA/ folder by a Django model.

The fact is that if I embed a PDF file coming from /STATIC/ folder, everything goes well. However, if I try the same with the {{ object.file.url }}, it does not work.

The curious thing is that if I simply display the {% static 'path/pdf.pdf' %} and {{ object.file.url }}, they both give me a valid link like this:

/static/img/111.pdf
/media/projects/phases-guide/111.pdf

If I try to open them separately, they work perfectly. But at the moment of embedding them in a HTML tag, it only works with the static url file.

Can someone tell me any idea why this is happening?

Anyway, is there any alternative to "EMBED FILE COMING FROM MEDIA FOLDER ROOT"?

I tried to enable read media files, but anyway it is not working.

Answer 1

The problem is that clickjack protection is being enabled on the MEDIA files that you are trying to embed. You can see in the error console in your browser’s developer mode that ”X-Frame-Options” is set to ”Deny” for MEDIA files but not for STATIC files.

There are several ways of changing this per view using method or class decorators, but that didn’t work in my code, so I did a generic change in SETTINGS.py like this:

X_FRAME_OPTIONS = ”SAMEORIGIN”

Then it worked for me.