Get govmetric to open in a modal (iframe) instead of a new tab

[SilviaAmAm]

Thema / Theme

Frontend

Omschrijving / Description

Continuation of this ticket: https://github.com/open-formulieren/open-forms/issues/4115

If using this snippet in a standalone HTML file, clicking on a GovMetric smiley opens a modal in an iframe.

    <div id="sidebar" class="govmetric_snippet gm_sidebar c3">
        <h2>Wat vindt u van dit formulier?</h2>
        <ul class="govmetric_snippet__faces kif_wrap">
            <li class="govmetric_snippet__face kif_item">
                <a href="https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=issue-4115-govmetruc&amp;Q_RATINGID=3" class="gm_sidebar_anchor" title="Beoordeel dit formulier als 'goed'" rel="nofollow" role="button">
                    <img src="https://websurveys2.govmetric.com/imgs/smileys/medium/Good.png" alt="Groene smiley (positief)" />
                </a>
                <strong>Goed</strong>
            </li>
            <li class="govmetric_snippet__face kif_item">
                <a href="https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=issue-4115-govmetruc&amp;Q_RATINGID=2" class="gm_sidebar_anchor" title="Beoordeel dit formulier als 'matig'" rel="nofollow" role="button">
                    <img src="https://websurveys2.govmetric.com/imgs/smileys/medium/Average.png" alt="Oranje smiley (neutraal)" />
                </a>
                <strong>Matig</strong>
            </li>
            <li class="govmetric_snippet__face kif_item">
                <a href="https://websurveys2.govmetric.com/theme/kf/1234?Q_Formid=issue-4115-govmetruc&amp;Q_RATINGID=4" class="gm_sidebar_anchor" title="Beoordeel deze formulier als slecht" rel="nofollow" role="button">
                    <img src="https://websurveys2.govmetric.com/imgs/smileys/medium/Poor.png" alt="Rode smiley (negatief)" />
                </a>
                <strong>Slecht</strong>
            </li>
        </ul>
    </div>


<script type="text/javascript" src="https://websurveys2.govmetric.com/js/client/gm_sidebar.js"></script>

However, when using this snippet in the last page of the SDK, the modal does not seem to work.

What I did:

• When trying to get it to work with the SDK embedded in the backend, I added the <script> tag to the master.html (https://github.com/open-formulieren/open-forms/blob/2ce682b940c5255f4ab278045d04d07d7a16e1c2/src/openforms/templates/master.html#L70). I also added the CSP rule frame-src https://*.govmetric.com in the admin.
• In the development SDK, I added the <script> tag to this file: https://github.com/open-formulieren/open-forms-sdk/blob/main/public/index.html

Note about DigiD: you are not allowed to include DigiD in iframes, but iframes are not completely disallowed in the application.