From 57db13c8a89d9ca6d1023e723fef80521c753714 Mon Sep 17 00:00:00 2001 From: Cameron DeCoster Date: Mon, 18 Aug 2025 15:36:51 -0600 Subject: [PATCH] Update devtools to enable strict mode via query param --- devtools/test_dashboard/index-strict.html | 29 ------------------ devtools/test_dashboard/index.html | 3 ++ devtools/test_dashboard/server.mjs | 37 ++++++++++++++++++----- devtools/test_dashboard/strict.js | 7 +++++ devtools/test_dashboard/style.css | 5 +++ 5 files changed, 45 insertions(+), 36 deletions(-) delete mode 100644 devtools/test_dashboard/index-strict.html create mode 100644 devtools/test_dashboard/strict.js diff --git a/devtools/test_dashboard/index-strict.html b/devtools/test_dashboard/index-strict.html deleted file mode 100644 index 6c309cd211b..00000000000 --- a/devtools/test_dashboard/index-strict.html +++ /dev/null @@ -1,29 +0,0 @@ - - - - - Plotly.js "strict" Devtools - - - - - -
- - - - - -
- -
-
-
-
-
- - - - - - diff --git a/devtools/test_dashboard/index.html b/devtools/test_dashboard/index.html index c2fc16aa4c5..0669c349b3e 100644 --- a/devtools/test_dashboard/index.html +++ b/devtools/test_dashboard/index.html @@ -21,6 +21,9 @@
+ + + diff --git a/devtools/test_dashboard/server.mjs b/devtools/test_dashboard/server.mjs index 7c2ea17f60f..b0adbd7ece4 100644 --- a/devtools/test_dashboard/server.mjs +++ b/devtools/test_dashboard/server.mjs @@ -62,22 +62,45 @@ console.log('watching esbuild...'); await ctx.watch(); function devServer() { - var server = http.createServer(ecstatic({ + const staticFilesHandler = ecstatic({ root: constants.pathToRoot, cache: 0, gzip: true, cors: true - })); + }); + + const server = http.createServer((req, res) => { + if(strict) { + res.setHeader( + 'Content-Security-Policy', + // Comment/uncomment for testing CSP. Changes require a server restart. + [ + // "default-src 'self'", + "script-src 'self'", + "style-src 'self' 'unsafe-inline'", + // "img-src 'self' data: blob:", + // "font-src 'self' data:", + // "connect-src 'self'", + // "object-src 'none'", + // "base-uri 'self';", + "worker-src blob:", + ].join("; ") + ) + } + + staticFilesHandler(req, res) + }) // Start the server up! server.listen(PORT); + let indexName = 'index'; + if(mathjax3) indexName += '-mathjax3' + else if(mathjax3chtml) indexName += '-mathjax3chtml' + indexName += '.html' + // open up browser window - open('http://localhost:' + PORT + '/devtools/test_dashboard/index' + ( - strict ? '-strict' : - mathjax3 ? '-mathjax3' : - mathjax3chtml ? '-mathjax3chtml' : '' - ) + '.html'); + open(`http://localhost:${PORT}/devtools/test_dashboard/${indexName}${strict ? '?strict=true' : ''}`); } function getMockFiles() { diff --git a/devtools/test_dashboard/strict.js b/devtools/test_dashboard/strict.js new file mode 100644 index 00000000000..56d664265ae --- /dev/null +++ b/devtools/test_dashboard/strict.js @@ -0,0 +1,7 @@ +if ((new URLSearchParams(location.search)).get("strict")) { + const strictDiv = document.createElement("div"); + strictDiv.id = "strict-div"; + strictDiv.textContent = "STRICT MODE"; + document.querySelector("#reload-time").insertAdjacentElement('afterend', strictDiv); + document.querySelector("title").innerText = "Plotly.js 'strict' Devtools"; +} diff --git a/devtools/test_dashboard/style.css b/devtools/test_dashboard/style.css index bea18056312..fb876d2cfc8 100644 --- a/devtools/test_dashboard/style.css +++ b/devtools/test_dashboard/style.css @@ -33,6 +33,11 @@ header span{ font-size: 10px; line-height: 40px; } +#strict-div{ + color: #F00; + font-weight: 600; + display: inline-block; +} #mocks-list{ position: fixed; right: 0px;