fixed copy and download button in wave reports

[munishchouhan]

Summary

Fixed Content Security Policy (CSP) violations preventing copy and download functionality in Wave UI by replacing all inline event handlers with data attributes and external JavaScript event listeners.

Problem

Users encountered CSP violations when clicking copy and download buttons:

Executing inline event handler violates the following Content Security Policy directive
'default-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a
nonce ('nonce-...') is required to enable inline execution.

This error blocked all copy and download functionality across Wave view pages (builds, scans, containers, mirrors, inspect).

Root Cause

The application has a strict CSP policy configured in src/main/resources/application.yml:63:

content-security-policy: "default-src 'self'; frame-ancestors 'none'"

This policy blocks all inline JavaScript execution, including inline event handlers like onclick="...". All HBS template files were using inline event handlers, which violated this security policy.

Solution

Replaced all inline event handlers with data attributes and attached event listeners via external JavaScript.

Before (Insecure - CSP Violation)

<button onclick="copyToClipboard('{{digest}}', this)" title="Copy digest">
    <svg>...</svg>
</button>
<button onclick="window.location.href='{{url}}'" title="Download">
    <svg>...</svg>
</button>

After (Secure - CSP Compliant)

<button data-copy="{{digest}}" title="Copy digest">
    <svg>...</svg>
</button>
<button data-download-url="{{url}}" title="Download">
    <svg>...</svg>
</button>

Changes

JavaScript Changes

File: src/main/resources/io/seqera/wave/assets/copy.js

Added Event Listener Initialization

document.addEventListener('DOMContentLoaded', function() {
    // Handle copy buttons with data-copy attribute
    document.querySelectorAll('[data-copy]').forEach(button => {
        button.addEventListener('click', function() {
            const textToCopy = this.getAttribute('data-copy');
            copyToClipboard(textToCopy, this);
        });
    });

    // Handle copy buttons with data-copy-from-element attribute
    document.querySelectorAll('[data-copy-from-element]').forEach(button => {
        button.addEventListener('click', function() {
            const elementId = this.getAttribute('data-copy-from-element');
            const element = document.getElementById(elementId);
            if (element) {
                copyToClipboard(element.textContent, this);
            }
        });
    });

    // Handle download buttons with data-download-url attribute
    document.querySelectorAll('[data-download-url]').forEach(button => {
        button.addEventListener('click', function() {
            const url = this.getAttribute('data-download-url');
            if (url) {
                window.open(url, '_blank');
            }
        });
    });

    // Handle evict from cache button
    const evictButton = document.getElementById('evictFromCacheBtn');
    if (evictButton) {
        evictButton.addEventListener('click', evictFromCache);
    }
});

Fixed evictFromCache Function

• Moved from inline <script> in container-view.hbs to copy.js
• Updated to retrieve button reference internally instead of relying on global scope

Checklist

• All inline onclick handlers removed from HBS files
• Event listeners properly attached in copy.js
• Copy functionality tested across all views
• Download functionality tested across all views
• Cache eviction tested
• No CSP errors in browser console
• Browser compatibility verified
• Code follows existing patterns and conventions
• No breaking changes introduced

[munishchouhan]

tested in dev

Screen.Recording.2026-01-20.at.08.12.20.mov

[pditommaso]

Well done. I've trimmed down the JS to a more compact solution replacing multiple querySelectorAll loops with a single click event listener using event delegation pattern. This simplifies the code and removes the need for DOMContentLoaded.

Please give it a try

[munishchouhan]

Well done. I've trimmed down the JS to a more compact solution replacing multiple querySelectorAll loops with a single click event listener using event delegation pattern. This simplifies the code and removes the need for DOMContentLoaded.

Please give it a try

yes its working

[munishchouhan]

Screen.Recording.2026-01-20.at.11.09.53.mov

[munishchouhan]

@pditommaso I cannot merge it because it contains unverified commits

[pditommaso]

Opps