Files
flipper/static/index.dev.html
Pascal Hartig 3a657ed46a Use textContent for showing dev error message (#199)
Summary:
`innerHTML` seems unnecessarily dangerous, rendering unescaped content from the network in an execution context. It can also raise exceptions if the HTML received is invalid, so let's not do this?
Pull Request resolved: https://github.com/facebook/flipper/pull/199

Reviewed By: danielbuechele

Differential Revision: D9179150

Pulled By: passy

fbshipit-source-id: 911b2686150be73c8e9e42b94b2a96da62fd6ae7
2018-08-06 05:42:30 -07:00

111 lines
2.5 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="graphiql/graphiql.css">
<link rel="stylesheet" href="vis/vis.min.css">
<title>Sonar</title>
<style>
.__infinity-dev-box {
-webkit-app-region: drag;
z-index: 999999;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 50px;
color: #fff;
overflow: auto;
}
.__infinity-dev-box-loading {
background-color: #333;
}
.__infinity-dev-box-error {
background-color: #000;
font-family: monospace;
white-space: pre;
font-size: 16px;
}
.__infinity-dev-box-text {
font-size: 30px;
line-height: 200px;
margin-top: -100px;
width: 100%;
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
}
</style>
</head>
<body>
<div id="root"></div>
<div class="__infinity-dev-box __infinity-dev-box-loading">
<div class="__infinity-dev-box-text">Loading...</div>
</div>
<div class="__infinity-dev-box __infinity-dev-box-error" hidden>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
(function() {
global.electronRequire = window.require;
let suppressErrors = false;
const socket = io(location.origin);
socket.on('refresh', () => {
location.reload();
});
socket.on('hasErrors', (html) => {
openError(html);
suppressErrors = true;
});
function openError(text) {
if (suppressErrors) {
return;
}
const box = document.querySelector('.__infinity-dev-box-error');
box.removeAttribute('hidden');
box.textContent = text;
onLoad();
}
function onLoad() {
document.querySelector('.__infinity-dev-box-loading').setAttribute('hidden', true);
}
function init() {
const script = document.createElement('script');
script.src = window.process.env.BUNDLE_URL;
script.onerror = () => {
openError('Script failure. Check Chrome console for more info.');
};
script.onload = onLoad;
document.body.appendChild(script);
}
init();
})();
</script>
</body>
</html>