Broken publication article: iframe embedded content covers post body

Describe the bug There is a forum post reporting that a publication article is broken. I could reproduce the problem on my end. https://forum.freecodecamp.org/t/cant-read-article-on-website-due-to-gray-rectangle/707631

From what I can see in the DevTools, the issue seems to be caused by the element that appears to be an embedded content from Canva.</p> <p>I'm not sure if this is related to the Hashnode migration.</p> <p><strong>To Reproduce</strong> Steps to reproduce the behavior:</p> <ol> <li>Go to <a rel="noreferrer nofollow" target="_blank" href="https://www.freecodecamp.org/news/singleton-design-pattern-with-javascript/">https://www.freecodecamp.org/news/singleton-design-pattern-with-javascript/</a></li> <li>Scroll down the page</li> </ol> <p><strong>Expected behavior</strong> The article should be visible and laid out properly.</p> <p><strong>Screenshots</strong> <img referrerpolicy="no-referrer" src="https://github.com/user-attachments/assets/b65794ad-a730-4549-9686-013ad8df86d0" alt="image (4)" /></p> <p><strong>Desktop (please complete the following information):</strong></p> <ul> <li>OS: Windows</li> <li>Browser: chrome</li> <li>Version: 127.0.6533.120</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raisedadead"><img src="https://avatars.githubusercontent.com/u/1884376?v=4" />raisedadead</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <blockquote> <p>I'm not sure if this is related to the Hashnode migration.</p> </blockquote> <p>Yes this author has been moved to Hashnode and I believe there is no support for embeds involving iframe because it is a security issue. </p> <p>Most likely solution should be to get the article edited and have a simple link and then generate an embed ourselves in the SSG - which also needs a feasibility check.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raisedadead"><img src="https://avatars.githubusercontent.com/u/1884376?v=4" />raisedadead</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>See <a href="https://support.hashnode.com/en/articles/6423225-markdown-guidelines#h_01a920df32">https://support.hashnode.com/en/articles/6423225-markdown-guidelines#h_01a920df32</a> so we have to get an equivalent with this <a href="https://embed.ly/provider/canva">https://embed.ly/provider/canva</a>. More providers are here <a href="https://embed.ly/providers">https://embed.ly/providers</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ihechikara"><img src="https://avatars.githubusercontent.com/u/54513385?v=4" />ihechikara</a> commented <strong> 1 week ago</strong> </div> <div class="markdown-body"> <p>Hi @raisedadead @sidemt, this issue has been resolved. Although <a href="https://support.hashnode.com/en/articles/6435289-which-embeds-are-supported-by-hashnode">Hashnode supports embeds from CodeSandbox</a>, we had this issue because the format that generates an iframe was used.</p> <p>I used the option that generates an embed URL instead: <a href="https://codesandbox.io/embed/zqbo69?view=editor+%2B+preview">https://codesandbox.io/embed/zqbo69?view=editor+%2B+preview</a></p> <h3>Screenshots</h3> <p><strong>Embed options on CodeSandbox</strong></p> <p><img src="https://github.com/user-attachments/assets/070d28ea-4847-46c2-bfa0-6c4fc8819dc6" alt="image" /></p> <p><strong>Embed on <a href="https://www.freecodecamp.org/news/singleton-design-pattern-with-javascript/">/news</a></strong></p> <p><img src="https://github.com/user-attachments/assets/dc233ef3-69e9-4dda-aeb0-16814c1a1848" alt="image" /></p> <p><strong>The article is now visible and laid out properly</strong></p> <p><img src="https://github.com/user-attachments/assets/c1dfe15a-2b6f-4484-bddf-efac273d2e1a" alt="image" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/raisedadead"><img src="https://avatars.githubusercontent.com/u/1884376?v=4" />raisedadead</a> commented <strong> 6 days ago</strong> </div> <div class="markdown-body"> <p>Thanks @ihechikara !</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

freeCodeCamp / news

Broken publication article: iframe embedded content covers post body #967