Avoid HTML injection in standalone errors (#36839)
## Summary - Render standalone DevTools server errors with DOM nodes instead of HTML strings. - Preserve the existing error box classes and copy while inserting error text with `textContent`. ## How did you test this? - `corepack yarn prettier` - `corepack yarn lint packages/react-devtools-core/src/standalone.js`
Minh Vu committed
Jun 23, 2026 at 12:28 UTC
99e86060ac35ea81153ac39ddab9b4cd744d9391
1 file changed
+23
-20
packages/react-devtools-core/src/standalone.js
+23
-20
@@ -176,31 +176,34 @@ function onDisconnected() {
176
disconnectedCallback();
177
}
178
179
+function showErrorMessage(headerText: string, contentText: string) {
180
+ const box = document.createElement('div');
181
+ box.className = 'box';
182
+
183
+ const header = document.createElement('div');
184
+ header.className = 'box-header';
185
+ header.textContent = headerText;
186
+ box.appendChild(header);
187
+
188
+ const content = document.createElement('div');
189
+ content.className = 'box-content';
190
+ content.textContent = contentText;
191
+ box.appendChild(content);
192
+
193
+ node.textContent = '';
194
+ node.appendChild(box);
195
+}
196
+
197
function onError({code, message}: $FlowFixMe) {
198
safeUnmount();
199
200
if (code === 'EADDRINUSE') {
183
- node.innerHTML = `
184
- <div class="box">
185
- <div class="box-header">
186
- Another instance of DevTools is running.
187
- </div>
188
- <div class="box-content">
189
- Only one copy of DevTools can be used at a time.
190
- </div>
191
- </div>
192
- `;
201
+ showErrorMessage(
202
+ 'Another instance of DevTools is running.',
203
+ 'Only one copy of DevTools can be used at a time.',
204
+ );
205
} else {
194
- node.innerHTML = `
195
- <div class="box">
196
- <div class="box-header">
197
- Unknown error
198
- </div>
199
- <div class="box-content">
200
- ${message}
201
- </div>
202
- </div>
203
- `;
206
+ showErrorMessage('Unknown error', String(message));
207
}
208
}
209