Staff report: CSP frame-ancestors + frame-mode + WebForm-mw Civi extension

App side:
- Per-route CSP: /staff/report now sets frame-ancestors 'self'
  <CIVI_BASE_URL origin> and drops X-Frame-Options so the CiviCRM
  extension can iframe it. All other routes keep frame-ancestors
  'none' + X-Frame-Options: DENY via a path-negation source.
- Staff page recognises ?frame=1 and renders without SiteHeader/
  SiteFooter so it fills the iframe cleanly.
- StaffReportView posts its scrollHeight to the parent window via
  postMessage when framed; the Civi tab listens and auto-resizes
  the iframe (no nested scrollbar). Anchor strip drops its sticky
  positioning in frame mode since there's no internal scroll.

CiviCRM extension (civi-extension/webform-mw/, key webform-mw):
- info.xml + main hook file (webform_mw.php) implementing
  hook_civicrm_tabset to add an 'Engagement Report' tab to
  Organization contact-view pages.
- CRM/WebformMw/Page/Tab.php + Smarty template render an iframe
  pointing at <WEBFORM_MW_APP_URL>/staff/report?org=<cid>&key=&frame=1,
  with a postMessage listener that validates event.origin against
  the configured app URL before resizing.
- Config via PHP constants in civicrm.settings.php (WEBFORM_MW_APP_URL,
  WEBFORM_MW_STAFF_KEY) or matching env vars. Help banner shown when
  unconfigured.
- README documents install, config, behaviour, security caveats.
This commit is contained in:
Joel Brock
2026-06-05 17:42:35 -07:00
parent b548b6425b
commit 4ca3c194d7
9 changed files with 457 additions and 58 deletions
@@ -0,0 +1,40 @@
{* Engagement Report tab content. *}
{if $configured}
<div id="wfmw-engagement-report-wrap" style="margin:-1em -1em 0 -1em;">
<iframe
id="wfmw-engagement-report"
src="{$iframeSrc|escape:'htmlall'}"
title="Engagement Report"
style="width:100%;height:1200px;border:0;display:block;background:transparent;"
referrerpolicy="same-origin"
loading="eager"
></iframe>
</div>
<script>
(function () {
var APP_ORIGIN = {$appOrigin|json_encode};
var frame = document.getElementById('wfmw-engagement-report');
if (!frame) return;
window.addEventListener('message', function (e) {
if (APP_ORIGIN && e.origin !== APP_ORIGIN) return;
var d = e && e.data;
if (!d || d.type !== 'webform-mw-height' || typeof d.height !== 'number') return;
// Add a little headroom so the report's own bottom padding isn't clipped.
var h = Math.max(600, Math.floor(d.height) + 24);
frame.style.height = h + 'px';
}, false);
})();
</script>
{else}
<div class="messages status no-popup">
<p><strong>{ts}Engagement Report is not configured.{/ts}</strong></p>
<p>
{ts}Add the following to your <code>civicrm.settings.php</code> (or set both as environment variables on the CiviCRM server) and reload:{/ts}
</p>
<pre>define('WEBFORM_MW_APP_URL', 'https://survey.fci.coop');
define('WEBFORM_MW_STAFF_KEY', '...the STAFF_REPORT_KEY shared with the app...');</pre>
<p>
{ts}See the extension's README.md for details.{/ts}
</p>
</div>
{/if}