What is the best, modern and most secure way to embed a PDF (preview) into a website?

02:23 19 Jun 2026

Aim

Just embed a PDF (preview) into a website. This is very likely a well-known use case.

Given I have this use case for showing a PDF preview, I am searching for a solution. And yes I know e.g. MDN always recommends just linking to PDF files, but user's UX in some applications (like document management etc.) is just much improved, when you have a preview of your file content directly in your website/application.

Research

I have read this MDN article on embedding technologies. There are basically embed/object and iframe (except of the tags specifically for video and audio etc., which are not relevant for this use case). It goes into the history etc., but what matters is what it recommends. And first, it reads as if it recommends embed/object for PDF:

the </code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed" rel="nofollow noreferrer"><code><embed></code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object" rel="nofollow noreferrer"><code><object></code></a> elements. <code><iframe></code>s are for embedding other web pages, and the other two allow you to embed external resources such as PDF files.</p> </blockquote> <p>And later:</p> <blockquote> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/embed" rel="nofollow noreferrer"><code><embed></code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/object" rel="nofollow noreferrer"><code><object></code></a> elements serve a different function to <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe" rel="nofollow noreferrer"><code><iframe></code></a> — these elements are general purpose embedding tools for embedding external content, such as PDFs.</p> </blockquote> <p>There is even a full example code for PDF embedding.</p> <h3>The problem/contradiction: sandboxing</h3> <p>However <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#sandbox" rel="nofollow noreferrer">in the security section</a> one big part is <a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/General_embedding_technologies#always_use_the_sandbox_attribute" rel="nofollow noreferrer">to always use the <code>sandbox</code> attribute</a>.</p> <p>I tested it and at least in Firefox embedding PDFs in an iframe e.g. with <code>sandbox="allow-scripts allow-downloads allow-top-navigation-by-user-activation"</code> works. I would assume, due to the sandboxing being applied, this is a security advantage in favor of object/embed? So these parts are a little contradictory, because I cannot use sandbox with <code>object</code> at all.</p> <h3>Further research</h3> <p>I found <a href="https://stackoverflow.com/questions/16417833/what-is-the-best-option-for-embedding-content/16417884#16417884">What is the best option for embedding content</a> (it's not about PDF) and <a href="https://stackoverflow.com/questions/16660559/difference-between-iframe-embed-and-object-elements">a generic explanation of the differences</a>, but all are too generic and do not explain this use case. <a href="https://stackoverflow.com/questions/66609249/displaying-and-downloading-a-pdf-in-an-iframe">Also this question just explores the technical 'how-to' aspect</a>, which is not a problem here - how to do it technically is fine.</p> <h2>Question</h2> <p>Thus the 'simple' question is: What is the best, modern and (especially) most <strong>secure</strong> way to embed a PDF (preview) into a website?</p> </div> </div> <div class="tags"> <span class="tag">html</span> <span class="tag">pdf</span> <span class="tag">iframe</span> <span class="tag">embed</span> <span class="tag">preview</span>   </div> </div>  <div id="addAnswerSection" class="add-answer" style="display: none;"> <h4>Your Answer</h4> <form> <div class="mdl-textfield mdl-js-textfield"> <textarea class="mdl-textfield__input" rows="4" id="answer" ></textarea> <label class="mdl-textfield__label" for="answer">Write your answer...</label> </div> <button type="submit" class="mdl-button mdl-js-button mdl-button--raised submit-btn" > Submit Answer </button> </form> </div>  <div id="loginPrompt" class="login-prompt" style="display: none;"> <i class="material-icons" style="font-size:40px;color:#3f51b5;">lock_outline</i> <p>You need to log in to submit an answer.</p> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> Log In </button> </div> </div>  </div> <style> code{ background-color: #000; color:#0FF; border-radius:8px; } .o-q-answer{ background-color:#eee; padding:48px; border-radius:24px; margin:24px; } .o-q-question{ background-color:#ddd; padding:48px; border-radius:24px; margin:24px; } </style>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script> // Highlight all <pre><code> blocks automatically document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll('pre code, code').forEach(block => { hljs.highlightElement(block); // highlight.js detects language automatically }); }); </script> <script> // Simulated login flag const isLoggedIn = false; // change to true to simulate logged-in state const addAnswerSection = document.getElementById("addAnswerSection"); const loginPrompt = document.getElementById("loginPrompt"); if (isLoggedIn) { addAnswerSection.style.display = "block"; } else { loginPrompt.style.display = "block"; } </script> </main> <aside class="sidebar"> <div class="card"> <h4>Newsletter</h4> <p class="muted">Subscribe for updates</p> <form style="display:flex; gap:8px; margin-top:8px; flex-wrap:wrap;" onsubmit="event.preventDefault(); alert('Subscribed!');"> <input type="email" placeholder="you@company.com" required style="flex:1; padding:10px; border-radius:8px; border:1px solid #e6e9ef;"> <button class="btn-primary" type="submit">Subscribe</button> </form> </div> <div style="height:20px"></div> <div class="card"> <h4>Advertisement</h4> <div class="ad"> <style> .prct-ad { width:250px; height:250px; font-family:'Inter',Arial,sans-serif; background:linear-gradient(180deg,#ffffff 0%,#f3f7fb 100%); border:1px solid #e0e0e0; border-radius:10px; box-shadow:0 3px 8px rgba(0,0,0,0.05); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:14px; box-sizing:border-box; text-decoration:none; color:#222; } .prct-header { color:#1976d2; font-weight:700; font-size:18px; margin-bottom:4px; text-align:center; } .prct-title { font-size:15px; font-weight:600; color:#0b2540; margin-bottom:6px; text-align:center; line-height:1.2; } .prct-text { font-size:12px; color:#555; line-height:1.4; margin-bottom:8px; text-align:center; } .prct-list { list-style:none; padding:0; margin:0 0 10px 0; } .prct-list li { font-size:12px; color:#2f3c48; position:relative; padding-left:14px; margin-bottom:4px; } .prct-list li::before { content:''; position:absolute; left:0; top:6px; width:6px; height:6px; background:#1976d2; border-radius:50%; } .prct-cta { display:block; width:100%; text-align:center; background:#1976d2; color:#fff; text-decoration:none; font-weight:600; font-size:13px; padding:8px 0; border-radius:6px; box-shadow:0 3px 8px rgba(25,118,210,0.2); transition:background 0.2s ease,transform 0.2s ease; margin-top:6px; } .prct-cta:hover { background:#1565c0; transform:translateY(-1px); } .prct-footer { font-size:11px; color:#555; display:flex; justify-content:space-between; align-items:center; margin-top:10px; } .prct-url { font-weight:600; color:#0b2540; font-size:11px; } </style> <a class="prct-ad" href="https://play.google.com/store/apps/details?id=com.offlinew.android" target="_blank" rel="noopener noreferrer"> <div> <div class="prct-header">OffLine</div> <div class="prct-title">Watch Videos — No Internet</div> <div class="prct-text">Enjoy trending videos, watch offline anytime. Create, share & stay entertained — even when you’re offline.</div> <ul class="prct-list"> <li>Watch without internet connection</li> <li>Create & share your videos</li> <li>Fast, smooth & high-quality</li> </ul> <span class="prct-cta">Download Now</span> </div> <div class="prct-footer"> <span>No signup needed</span> <span class="prct-url">offlinew.com</span> </div> </a></div> </div> </aside> </div> <footer class="site-footer"> <div class="links"> <a href="https://offlinew.com/p/terms_of_use">Terms</a> <a href="https://offlinew.com/p/privacy_policy">Privacy</a> <a href="https://offlinew.com/practica/contact_us.php">Support</a> </div> <div style="margin-top:10px; font-size:0.9rem; opacity:0.85;">© 2025 OffLinew — All rights reserved</div> </footer> </div> <script> atOptions = { 'key' : 'f9fe0d77e38a2b0fb4ffb65a1ffc69d7', 'format' : 'iframe', 'height' : 250, 'width' : 300, 'params' : {} }; </script> <script src="https://www.highperformanceformat.com/f9fe0d77e38a2b0fb4ffb65a1ffc69d7/invoke.js"></script> <script src="https://quge5.com/88/tag.min.js" data-zone="257238" async data-cfasync="false"></script> <div id="gdpr-consent"> <h3>Privacy & Cookie Consent</h3> <p>We use cookies to ensure the best experience on our website. This includes analytics, personalization, and marketing purposes. Some cookies are essential for the website to function properly.</p> <p>By clicking "Accept", you consent to our use of cookies. You can read more about how we use cookies and how you can change your preferences in our <a href="https://offlinew.com/privacy-policy.html">Privacy Policy</a>.</p> <div class="buttons"> <button class="decline">Decline</button> <button class="accept">Accept</button> </div> </div> <script> const consentBox = document.getElementById('gdpr-consent'); const acceptBtn = consentBox.querySelector('.accept'); const declineBtn = consentBox.querySelector('.decline'); // Check if consent is already given if (localStorage.getItem('gdpr-consent') == 'accepted') { consentBox.style.display = 'none'; } acceptBtn.addEventListener('click', () => { localStorage.setItem('gdpr-consent', 'accepted'); consentBox.style.display = 'none'; // Here you can initialize analytics or other cookie-dependent scripts }); declineBtn.addEventListener('click', () => { localStorage.setItem('gdpr-consent', 'declined'); consentBox.style.display = 'none'; // Optionally, prevent non-essential cookies from being set }); </script> </body> </html>