Episode Details

417: Iframe Allow Attribute Saga

Published 8 months, 1 week ago

Description

There was a day not long ago where a Google Chrome browser update left any page with a CodePen Embed on it throwing a whole big pile of red JavaScript errors in the console. Not ideal, obviously.

The change was related to how the browser handles allow attributes on iframes (i.e. ). CodePen was calculating the appropriate values inside an iframe for a <em>nested</em> iframe. That must have been a security issue of sorts, as now those values need to be present on the <em>outside</em> iframe as well.</p> <p class="wp-block-paragraph"><a href="https://blog.codepen.io/2025/10/20/google-chrome-iframe-allow-permissions-problems/">We documented all this in a blog post</a> so hopefully we could get some attention from Chrome on this, and for other browser makers as well since it affects all of us. </p> <p class="wp-block-paragraph">And I posted it on the ol' social media:</p> <p class="wp-block-paragraph">Huge thanks to Bramus Van Damme who saw this, triaged it at Chrome, and had a resolution within a day:</p> <p class="wp-block-paragraph">I think <a href="https://chromium-review.googlesource.com/c/chromium/src/+/7074672">the patch</a> is a great change so hats off to everyone involved for getting it done so quickly. It's already in Canary and don't really know when it'll get the stable but that sure will be good. It follows how Safari is doing things where values that aren't understood are just ignored (which we think is fine and inline with how HTML normally works). </p> <p class="wp-block-paragraph">Fortunately we were able to mitigate the problem <em>a little</em> until then. For <em>most</em> Embedded Pens, a <script> is loaded on the page embedding it, and we dynamically create the <iframe> for you. This is just nice as it makes making an accessible fallback easier and gives you access to API-ish features for the embeds. We were able to augment that script to do a little browser user-agent sniffing and apply the correct set of allow attributes on the iframe, as to avoid those JavaScript errors we were seeing.</p> <p class="wp-block-paragraph">But there's the rub: we'd rather not do any user-agent sniffing at all. </p> <p class="wp-block-paragraph">If we could just put <em>all</em> the possible allow attributes we want on there, and not be terribly concerned if any particular browser didn't support any particular value, that would be ideal. We just can't have the scary console errors, out of concern for our users who may not understand them. </p> <p class="wp-block-paragraph">Where we're at in the saga now is that:</p> <ol class="wp-block-list"> <li>We're waiting for the change to Chrome to get to stable.</li> <li>We're hoping Safari stays the way it is.</li> <li>OH HI FIREFOX.</li> </ol> <p class="wp-block-paragraph">On that last point, if we put all the allow attributes we would want to on an <iframe> in Firefox, we also get console-bombed. This time not with red-errors but with yellow-warnings. </p> <p class="wp-block-paragraph">So yes, hi Firefox, if you could also not display these warnings (unless a reporting URL is set up) that would be great. We'd be one less website out there relying on user-agent sniffing. </p> </div> </div> <div class="mb-4"> <h5 class="mb-3">Listen Now</h5> <audio controls class="w-100"> <source src="https://radio.codepenassets.com/cpr-417.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> </div> </div>  <div class="card-footer bg-light"> <div hx-get="/episode/summary/short/45367149116/" hx-trigger="load" hx-swap="outerHTML"> </div> </div>  <div class="card-footer bg-light"> <div hx-get="/episode/summary/long/45367149116/" hx-trigger="load" hx-swap="outerHTML"> </div> </div> </div> </div> </div> </main>  <div class="mt-5 mb-4"> <div class="text-center mb-4"> <div class="card border-0 shadow-lg mx-auto" style="max-width: 600px; background: var(--gradient-primary); color: white;"> <div class="card-body p-4"> <i class="bi bi-heart-fill fs-1 mb-3 d-block"></i> <h4 class="mb-3">Love PodBriefly?</h4> <p class="mb-3">If you like Podbriefly.com, please consider donating to support the ongoing development.</p> <a href="https://buy.stripe.com/14k3eNe8a7u78eceUY" target="_blank" class="btn btn-light btn-lg"> <i class="bi bi-gift me-2"></i>Support Us </a> </div> </div> </div> </div> <footer class="footer container-fluid"> <div class="container"> <div class="row mb-4"> <div class="col-md-4 text-center text-md-start mb-3 mb-md-0"> <h5 class="mb-3">PodBriefly</h5> <p class="text-muted">Your Podcast Listener Companion</p> </div> <div class="col-md-4 text-center mb-3 mb-md-0"> <h5 class="mb-3">Follow Us</h5> <div class="d-flex justify-content-center gap-3"> <a href="https://www.youtube.com/@DevAsService" target="_blank" class="btn btn-outline-light btn-sm"> <i class="bi bi-youtube"></i> </a> <a href="https://x.com/DevAsService" target="_blank" class="btn btn-outline-light btn-sm"> <i class="bi bi-twitter-x"></i> </a> </div> </div> <div class="col-md-4 text-center text-md-end"> <h5 class="mb-3">Other Projects</h5> <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-end gap-2"> <a href="https://cloudhomelab.com" target="_blank" class="text-decoration-none">Cloud Home Lab</a> <span class="d-none d-md-inline">•</span> <a href="https://developer-service.io" target="_blank" class="text-decoration-none">Developer Service</a> </div> <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-end gap-2 mt-2"> <a href="https://imaginator.developer-service.io" target="_blank" class="text-decoration-none">Imaginator</a> <span class="d-none d-md-inline">•</span> <a href="https://courses.developer-service.blog" target="_blank" class="text-decoration-none">Courses</a> <span class="d-none d-md-inline">•</span> <a href="https://isitclickbait.com" target="_blank" class="text-decoration-none">Is It Clickbait</a> </div> </div> </div> <hr class="border-secondary"> <div class="row"> <div class="col-12 text-center"> <p class="mb-0">© 2026 <a href="https://developer-service.io" target="_blank" class="text-decoration-none">Developer Service</a>. All rights reserved.</p> </div> </div> </div> </footer>  <script src="/static/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="/static/assets/js/theme.min.js"></script> </body> </html>