gocodebox / lifterlms

LifterLMS, a WordPress LMS Solution: Easily create, sell, and protect engaging online courses.
https://lifterlms.com
GNU General Public License v3.0
174 stars 134 forks source link

Canva embed code works with blog posts but not LifterLMS quizzes. #2610

Closed dominiquemariano closed 1 week ago

dominiquemariano commented 4 months ago

Reproduction Steps

  1. Create a new post and use the Custom HTML block to embed the Canva embed code below.
  2. 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:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAF-jiwqrl0&#x2F;O0oi5A-lhobvd3-jS5GtAA&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
<a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAF-jiwqrl0&#x2F;O0oi5A-lhobvd3-jS5GtAA&#x2F;view?utm_content=DAF-jiwqrl0&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;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:

ideadude commented 1 month ago

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.