Canva embed code works with blog posts but not LifterLMS quizzes.
Reproduction Steps
- Create a new post and use the Custom HTML block to embed the Canva embed code below.
- Create a LifterLMS quiz and paste the Canva embed code below in the Description field of the quiz's General Settings.
<div style="position: relative; width: 100%; height: 0; padding-top: 100.0000%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
<iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https://www.canva.com/design/DAF-jiwqrl0/O0oi5A-lhobvd3-jS5GtAA/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
</div>
<a href="https://www.canva.com/design/DAF-jiwqrl0/O0oi5A-lhobvd3-jS5GtAA/view?utm_content=DAF-jiwqrl0&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Design</a> by Nick
Expected Behavior
Both the blog post and the quiz should correctly display the output in the front-end.
Actual Behavior
Only the blog posts displays the correct output on the frontend, as you can see in this screenshot. The quiz does not display it correctly on the frontend, as you can see in this other screenshot
Why this happens
The style attribute of the <iframe> is being stripped away by the quiz. Blog posts do not do this in the block editor (Gutenberg).
This issue has been recreated:
- [x] Locally
- [ ] On a staging site
- [x] On a production website
- [x] With only LifterLMS and a default theme
My guess is we are escaping the content in the quiz descriptions. If we intend for admins to be able to embed any HTML, including iframes, and possibly scripts, we can update our code to use wp_kses_post or similar sanitization vs the likely stricter sanitization we are doing here.