feat(frontend): rename inj roles to sys-front-*, add sys-svc-cdn, cache-busting lookup

Introduce sys-svc-cdn (cdn_paths/cdn_urls/cdn_dirs) and ensure CDN directories + latest symlink.

Rename sys-srv-web-inj-* → sys-front-inj-*; update includes/templates; serve shared/per-app CSS & JS via CDN.

Add lookup_plugins/local_mtime_qs.py for mtime-based cache busting; split CSS into default.css/bootstrap.css + optional per-app style.css.

CSP: use style-src-elem; drop unsafe-inline for styles. Services: fix SYS_SERVICE_ALL_ENABLED bool and controlled flush.

BREAKING CHANGE: role names changed; replace includes and references accordingly.

Conversation: https://chatgpt.com/share/68b55494-9ec4-800f-b559-44707029141d
This commit is contained in:
2025-09-01 10:10:23 +02:00
parent 3f8e7c1733
commit 231fd567b3
123 changed files with 1789 additions and 1393 deletions

View File

@@ -0,0 +1,24 @@
# 🌐 iFrame Notifier for Nginx
This Ansible role injects a small JavaScript snippet into your HTML responses that enables parent pages to get notified whenever the iframes location changes and forces external links to open in a new tab.
---
## Features
- **Location Change Notification**
Uses `postMessage` to inform the parent window of any URL changes inside the iframe (including pushState/popState events) for seamless SPA support.
- **External Link Handling**
Automatically sets `target="_blank"` and `rel="noopener"` on links pointing outside your primary domain to improve security and user experience.
- **Easy CSP Integration**
Calculates a CSP hash for the injected script so you can safely allow it via your Content Security Policy.
---
## Author
Developed by **Kevin Veen-Birkenbach**
[https://www.veen.world](https://www.veen.world) 🎉

View File

@@ -0,0 +1,24 @@
galaxy_info:
author: "Kevin Veen-Birkenbach"
description: "Injects a JS snippet into HTML to notify parent windows of iframe location changes and force external links to new tabs."
company: |
Kevin Veen-Birkenbach
Consulting & Coaching Solutions
https://www.veen.world
license: "Infinito.Nexus NonCommercial License"
repository: https://s.infinito.nexus/code
issue_tracker_url: https://s.infinito.nexus/issues
documentation: "https://docs.infinito.nexus/"
license_url: "https://s.infinito.nexus/license"
min_ansible_version: "2.9"
platforms:
- name: Archlinux
versions:
- rolling
galaxy_tags:
- nginx
- iframe
- javascript
- csp
- security
- postMessage

View File

@@ -0,0 +1,7 @@
- name: Deploy {{ INJ_DESKTOP_JS_FILE_NAME }}
template:
src: "{{ INJ_DESKTOP_JS_FILE_NAME }}.j2"
dest: "{{ INJ_DESKTOP_JS_FILE_DESTINATION }}"
owner: "{{ NGINX.USER }}"
group: "{{ NGINX.USER }}"
mode: '0644'

View File

@@ -0,0 +1,24 @@
- block:
- name: Include dependency 'srv-core'
include_role:
name: srv-core
when: run_once_srv_core is not defined
- include_tasks: 01_deploy.yml
- include_tasks: utils/run_once.yml
when: run_once_sys_front_inj_desktop is not defined
# --- Build tiny inline initializer (CSP-hashed) ---
- name: "Load iFrame init code for '{{ application_id }}'"
set_fact:
iframe_init_code: "{{ lookup('template','iframe-init_one_liner.js.j2') }}"
- name: "Collapse iFrame init code into one-liner for '{{ application_id }}'"
set_fact:
iframe_init_code_one_liner: "{{ iframe_init_code | to_one_liner }}"
- name: "Append iFrame init CSP hash for '{{ application_id }}'"
set_fact:
applications: "{{ applications | append_csp_hash(application_id, iframe_init_code_one_liner) }}"
no_log: "{{ MASK_CREDENTIALS_IN_LOGS | bool }}"
changed_when: false

View File

@@ -0,0 +1 @@
<script>{{ iframe_init_code_one_liner }}</script>

View File

@@ -0,0 +1 @@
<script src="{{ cdn_urls.shared.js }}/{{ INJ_DESKTOP_JS_FILE_NAME }}{{ lookup('local_mtime_qs', [playbook_dir, 'roles', 'sys-front-inj-desktop', 'templates', INJ_DESKTOP_JS_FILE_NAME ~ '.j2'] | path_join) }}"></script>

View File

@@ -0,0 +1,57 @@
(function (global) {
/**
* Initializes the iframe sync & external link forcing logic.
* @param {string} primary_domain
* @param {string} current_domain
* @param {string} allowedOrigin - Parent origin for postMessage
*/
function initIframeHandler(primary_domain, current_domain, allowedOrigin) {
function notifyParent() {
if (window.self !== window.top) {
try {
window.parent.postMessage(
{ type: "iframeLocationChange", href: window.location.href },
allowedOrigin
);
} catch (e) {}
}
}
function forceExternalLinks() {
Array.prototype.forEach.call(document.querySelectorAll("a[href]"), function (a) {
try {
var url = new URL(a.href, location);
// open new tab if link goes outside our primary OR current domain
if (!(url.hostname.endsWith(primary_domain) || url.hostname.endsWith(current_domain))) {
a.target = "_blank";
a.rel = "noopener";
}
} catch (e) {}
});
}
window.addEventListener("load", function () {
notifyParent();
forceExternalLinks();
});
window.addEventListener("popstate", function () {
notifyParent();
forceExternalLinks();
});
// SPA support
var _pushState = history.pushState;
history.pushState = function () {
_pushState.apply(history, arguments);
notifyParent();
forceExternalLinks();
};
{% if MODE_DEBUG | bool %}
try { console.log("[iframe-sync] initIframeHandler installed."); } catch (e) {}
{% endif %}
}
// expose for inline bootstrap
global.initIframeHandler = initIframeHandler;
})(window);

View File

@@ -0,0 +1,10 @@
document.addEventListener('DOMContentLoaded', function () {
initIframeHandler(
'{{ PRIMARY_DOMAIN }}',
'{{ domain }}',
'{{ domains | get_url("web-app-desktop", WEB_PROTOCOL) }}'
);
});
{% if MODE_DEBUG | bool %}
try { console.log("[iframe-sync] Sender for iframe messages is active."); } catch(e) {}
{% endif %}

View File

@@ -0,0 +1,2 @@
INJ_DESKTOP_JS_FILE_NAME: "iframe-handler.js"
INJ_DESKTOP_JS_FILE_DESTINATION: "{{ [cdn.shared.js, INJ_DESKTOP_JS_FILE_NAME] | path_join }}"