Media Library functionality in the block editor causes CSP 'unsafe-eval' error

[michelleblanchette]

Trying to change a page post's featured image or attempting to "Open Media Library" action on wp:image blocks in the block editor causes the following error:

[react-dom.min.js?ver=18.3.1:10] Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src https: 'self' 'unsafe-inline'".

    at new Function (<anonymous>)
    at Function.template (underscore.min.js?ver=1.13.7:2:15243)
    at n.template (wp-util.min.js?ver=6.7.1:2:328)
    at n.render (wp-backbone.min.js?ver=6.7.1:2:2895)
    at n.attach (media-views.min.js?ver=6.7.1:2:86078)
    at n.open (media-views.min.js?ver=6.7.1:2:86461)
    at i.2836._.each.s.<computed> [as open] (media-views.min.js?ver=6.7.1:2:83610)
    at d.openModal (media-utils.min.js?ver=e10cc6bfcff4fe474479:2:5562)
    at n.<computed> (components.min.js?ver=130172abbae720694b1f:19:24767)
    at Object.Xa (react-dom.min.js?ver=18.3.1:10:105719)

template @ underscore.min.js?ver=1.13.7:2
(anonymous) @ wp-util.min.js?ver=6.7.1:2
render @ wp-backbone.min.js?ver=6.7.1:2
attach @ media-views.min.js?ver=6.7.1:2
open @ media-views.min.js?ver=6.7.1:2
i.2836._.each.s.<computed> @ media-views.min.js?ver=6.7.1:2
openModal @ media-utils.min.js?ver=e10cc6bfcff4fe474479:2
n.<computed> @ components.min.js?ver=130172abbae720694b1f:19
Xa @ react-dom.min.js?ver=18.3.1:10
B @ react-dom.min.js?ver=18.3.1:10
W @ react-dom.min.js?ver=18.3.1:10
qe @ react-dom.min.js?ver=18.3.1:10
Ke @ react-dom.min.js?ver=18.3.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1:10
dl @ react-dom.min.js?ver=18.3.1:10
V @ react-dom.min.js?ver=18.3.1:10
Je @ react-dom.min.js?ver=18.3.1:10
pe @ react-dom.min.js?ver=18.3.1:10
fe @ react-dom.min.js?ver=18.3.1:10

Context/Notes:

• UnderscoreJS does not seem willing to resolve this CSP vulnerability per ​https://github.com/jashkenas/underscore/issues/2995
• Gutenberg does not seem responsible per ​https://github.com/WordPress/gutenberg/issues/47619#issuecomment-2545695011
• CSP unsafe-inline has been discussed in depth on https://core.trac.wordpress.org/ticket/39941 and https://core.trac.wordpress.org/ticket/51407

[jornfranke]

Thanks a lot! I support that this ticket should be solved. We should not have in a content management system a CSP that needs to allow unsafe-*. A CMS is used by many people that may accidentality or maliciously do XSS or put hidden trackers.

I think the logical next step is to get rid of underscore in Wordpress.

Trac ticket: https://core.trac.wordpress.org/ticket/62894

## Description
This PR fixes issue #62894 where the Media Library functionality in the block editor triggers Content Security Policy (CSP) 'unsafe-eval' errors. The fix replaces dynamic template evaluation with direct DOM manipulation in the Frame view implementation.

## Changes proposed in this Pull Request:

• Removes usage of _.template which requires unsafe-eval
• Adds new createElement helper method for safe DOM creation
• Implements createFrameTemplate method using native DOM APIs
• Updates render method to use safe DOM manipulation
• Maintains all existing Frame view functionality