diff options
| author | Osmium Sorcerer <os@sof.beauty> | 2026-06-06 02:27:32 +0000 |
|---|---|---|
| committer | Osmium Sorcerer <os@sof.beauty> | 2026-06-06 03:09:27 +0000 |
| commit | 8bf3cae6ac89de9569a7ec629594954804a2b55a (patch) | |
| tree | d897073049c414e15dd33c0ad1dac4345801b22e /public | |
| parent | e0ce108e0806d18353ad85125b2b5f1b1c67e07d (diff) | |
CSP hardening: remove inline styles
Similar to removal of inline scripts, everything was taken out into the
CSS files, with the same styles applied there directly. This lets us
use `script-src 'self'` in the CSP.
Additionally, serve Golden Layout CSS locally to avoid third-party
connection.
Diffstat (limited to 'public')
| -rw-r--r-- | public/client.html | 111 | ||||
| -rw-r--r-- | public/index.html | 2 |
2 files changed, 40 insertions, 73 deletions
diff --git a/public/client.html b/public/client.html index 55214d30..1cb2b1f7 100644 --- a/public/client.html +++ b/public/client.html @@ -82,24 +82,15 @@ <link type="text/css" rel="stylesheet" - href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" + href="golden/css/goldenlayout-dark-theme.css" /> - <style> - #client_ooclog { - text-align: left; - } - - #client_ooclog a { - color: white; - } - </style> <script src="lib/jdataview.min.js" async defer></script> </head> <body> <div id="client_waiting"> <noscript> - <p style="color: red">webAO requires JavaScript to work</p> + <p class="error">webAO requires JavaScript to work</p> </noscript> <div id="client_loading"> <h1 id="client_loadingtext">Loading</h1> @@ -116,7 +107,7 @@ <div id="client_chartable"></div> </div> </div> - <div id="client_error_overlay" style="display: none"> + <div id="client_error_overlay"> <div id="client_error"> <div id="client_error_icon">⚠</div> <h2 id="client_errortext"></h2> @@ -214,7 +205,7 @@ alt="Shout overlay" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" /> - <div id="client_chatcontainer" style="font-size: 12px; opacity: 0"> + <div id="client_chatcontainer"> <div id="client_chatdecoration"></div> <div id="client_name"> <p id="client_inner_name"></p> @@ -290,8 +281,7 @@ <button id="button_4" alt="Custom" - class="client_button" - style="display: none" + class="client_button nodisplay" data-action="toggle-shout" data-id="4" > @@ -327,8 +317,7 @@ <button id="button_flip" alt="Flip" - class="client_button" - style="display: none" + class="client_button nodisplay" data-action="toggle-effect" > Flip @@ -344,8 +333,7 @@ <button id="button_shake" alt="Shake" - class="client_button" - style="display: none" + class="client_button nodisplay" data-action="toggle-effect" > Shake @@ -387,22 +375,20 @@ </button> <br /> <br /> - <span id="pairing" style="display: none"> + <span id="pairing"> <button id="button_toggle_pairing" alt="Pairing" - class="client_button" + class="client_button nodisplay" > Pairing </button> - <span id="pairing_settings" style="display: none"> + <span id="pairing_settings" class="nodislpay"> <label for="pair_select">Pairing partner:</label> <select name="pair_select" id="pair_select"> <option value="-1">None</option> </select> - <table - style="border: none; margin-left: auto; margin-right: auto" - > + <table id="pairing_table"> <tr> <td> <p>Horizontal offset:</p> @@ -418,7 +404,7 @@ /> </td> </tr> - <tr id="y_offset" style="display: none"> + <tr id="y_offset" class="nodisplay"> <td> <p>Vertical offset:</p> </td> @@ -443,7 +429,7 @@ </span> <br /> <br /> - <span id="cccc" style="display: none"> + <span id="cccc" class="nodisplay"> <label for="ic_chat_name">Custom Showname:</label> <input id="ic_chat_name" name="ic_chat_name" type="text" /> <br /> @@ -461,13 +447,13 @@ </span> <br /> <br /> - <span id="2.7" style="display: none"> + <span id="2.7" class="nodisplay"> <label for="check_loopsfx">Looping SFX:</label> <input type="checkbox" name="check_loopsfx" id="check_loopsfx" /> </span> <br /> <br /> - <span id="2.8" style="display: none"> + <span id="2.8" class="nodisplay"> <label for="check_additive">Additive:</label> <input type="checkbox" name="check_additive" id="check_additive" /> <br /> @@ -484,63 +470,49 @@ </span> </div> </div> - <fieldset style="margin: 10px"> + <fieldset id="judge_fieldset"> <legend>Actions</legend> <!-- Judge Commands --> - <span id="judge_action" style="display: none"> + <span id="judge_action" class="nodisplay"> <span id="menu_wt" class="judge_button" - style="color: blue" ><i>Witness<br />Testimony</i></span > <span id="menu_ce" class="judge_button" - style="color: red" ><i>Cross<br />Examination</i></span > <span id="menu_nguilty" class="judge_button" - style=" - color: white; - font-family: serif; - text-shadow: - -1px 0 #000, - 0 1px #000, - 1px 0 #000, - 0 -1px #000; - font-size: 1.5em; - line-height: 0.75; - " >Not<br />Guilty</span > <span id="menu_guilty" class="judge_button" - style="color: black; font-family: serif; font-size: 1.5em" >Guilty</span > <br /> - <span style="display: inline-block; vertical-align: middle"> + <span class="menu-hp-bar"> <span id="menu_rhpd" class="healthchange_button"> ⊟ </span> - <span style="font-size: 1.25em">Defense</span> + <span class="menu-hp-label">Defense</span> <span id="menu_ahpd" class="healthchange_button"> ⊞ </span> </span> - <span style="display: inline-block; vertical-align: middle"> + <span class="menu-hp-bar"> <span id="menu_ahpp" class="healthchange_button"> ⊞ </span> - <span style="font-size: 1.25em">Prosecution</span> + <span class="menu-hp-label">Prosecution</span> <span id="menu_rhpp" class="healthchange_button"> ⊟ </span> @@ -551,7 +523,7 @@ <br /> <br /> <span id="muting"> - <label for="mute_select" style="float: left" + <label for="mute_select" id="mute_label" >Mute a character: </label> <select @@ -586,7 +558,7 @@ </span> <span id="menu_cm" class="menu_button"> <b class="menu_icon">🚨</b> - <div class="menu_text" style="color: #ce2727">Call Mod</div> + <div id="callmod_button" class="menu_text">Call Mod</div> </span> </div> <div class="hrtext"> @@ -597,7 +569,7 @@ <meta name="frame-title" lang="en" content="Areas" /> <div id="areas"></div> <br /> - <fieldset style="text-align: left"> + <fieldset class="l-fieldset"> <legend>Current Area Background</legend> <span> <img @@ -607,20 +579,20 @@ data-error="img" /> </span> - <span style="display: inline-block"> + <span id="bg_span"> <label for="bg_filename">Background:</label> <br /> <select id="bg_select" name="bg_select" - style="margin-top: 10px" + class="bg-selection" ></select> <br /> <input id="bg_filename" name="bg_filename" type="text" - style="margin-top: 10px" + class="bg-selection" /> <br /> <br /> @@ -633,7 +605,7 @@ </button> </span> </fieldset> - <fieldset style="text-align: left; display: none"> + <fieldset class="l-fieldset nodisplay"> <legend>Timers</legend> <span id="client_timer0">00:00:00</span> <span id="client_timer1">00:00:00</span> @@ -662,12 +634,10 @@ <!-- Evidence section --> <span class="menu_content" id="content_2"> <meta name="frame-title" lang="en" content="Evidence" /> - <fieldset - style="text-align: left; display: flex; flex-direction: column" - > + <fieldset id="evi_fieldset"> <legend>Information</legend> <hr /> - <div style="display: flex"> + <div id="evi_info"> <img id="evi_preview" class="evi_icon" @@ -697,7 +667,7 @@ </div> </div> <hr /> - <div style="display: flex; padding-top: 5px"> + <div id="evi_desc_container"> <textarea id="evi_desc" name="evi_desc" @@ -706,7 +676,7 @@ placeholder="Evidence description" ></textarea> </div> - <div style="display: block; text-align: center; padding-top: 20px"> + <div id="evi_add_container"> <button id="evi_add" alt="Add Evidence" @@ -905,7 +875,7 @@ </span> <br /> <br /> - <fieldset style="margin: 1rem auto; padding: 1rem; max-width: 200px;"> + <fieldset id="auth_fieldset"> <legend>Authenticate</legend> <div><button type="button" id="use_passkey" class="client_button hover_button">Use passkey</button></div> </fieldset> @@ -920,7 +890,7 @@ <span class="menu_content" id="content_4"> <meta name="frame-title" lang="en" content="About" /> <img id="about-logo" src="logo-new.png" alt="Attorney Online logo" /> - <h1 style="line-height: 0.3em">webAO</h1> + <h1 id="webao_title">webAO</h1> <h3 id="client_version">version</h3> <p> Client created by @@ -953,11 +923,8 @@ <template id="ooc"> <meta name="frame-title" lang="en" content="Server" /> - <div - id="client_ooc" - style="height: 100%; display: flex; flex-direction: column" - > - <div id="client_ooclog" style="flex: 1 auto" readonly></div> + <div id="client_ooc"> + <div id="client_ooclog" readonly></div> <span id="client_oocinput"> <input id="OOC_name" name="OOC_name" type="text" /> <input @@ -967,17 +934,17 @@ </span> <span id="client_replaycontrols" - style="display: none; white-space: nowrap" + class="nodisplay" > <input id="client_replaygo" - style="width: 25%" + class="replay-control" type="button" value="GO" /> <input id="client_replaytimer" - style="width: 25%" + class="replay-control" type="number" value="2000" /> diff --git a/public/index.html b/public/index.html index 7970295d..8558d2ba 100644 --- a/public/index.html +++ b/public/index.html @@ -107,7 +107,7 @@ </nav> <form id="serverlist_container" class="monocle-enriched"> <h2>Server List</h2> - <div id="ms_error" class="error" style="display: none"> + <div id="ms_error" class="error"> <p>Could not connect to the master server.</p> <p>Showing saved list.</p> </div> |