harden: drop 'unsafe-inline' from style-src (closes #328)
check / check (push) Failing after 3s
e2e / e2e-chrome (push) Failing after 3s
e2e / e2e-firefox (push) Failing after 2s

The popup's markup no longer carries style attributes. The 42 in
index.html and in the HTML the view helpers build are now Tailwind
classes, each computing to the value it replaced, so style-src is 'self'
in both manifests, pinned in tests/manifest.test.js.

The address dot's 16 colours are written out as whole classes, because
Tailwind builds only the classes it finds in the source. The Settings
debug well is shown and hidden with the hidden class, since clearing an
inline display no longer uncovers it. Two tests that found the colour dot
by its inline style now find it by its class. Script that sets
element.style is unaffected.

Model: opus-5-5
This commit was merged in pull request #467.
This commit is contained in:
2026-10-05 15:26:06 +02:00
parent a0360a7874
commit e590b83df0
13 changed files with 108 additions and 147 deletions
+32 -83
View File
@@ -110,8 +110,7 @@
</div>
<div
id="add-wallet-phrase-warning"
class="text-xs mb-2 border border-border border-dashed p-2"
style="visibility: hidden"
class="text-xs mb-2 border border-border border-dashed p-2 invisible"
>
Write these words down and keep them safe. Anyone with
them can take your funds; if you lose them, your wallet
@@ -262,10 +261,7 @@
<!-- recent transactions across all addresses -->
<div>
<div
class="font-bold bg-section py-1 px-2"
style="margin-left: -0.5rem; margin-right: -0.5rem"
>
<div class="font-bold bg-section py-1 px-2 -mx-2">
Recent Transactions
</div>
<div id="home-tx-list">
@@ -273,7 +269,7 @@
</div>
</div>
<div class="py-1" style="margin: 0 -0.5rem">&nbsp;</div>
<div class="py-1 -mx-2">&nbsp;</div>
<div class="text-xs text-muted">
<span
@@ -409,8 +405,7 @@
</p>
<div
id="export-privkey-flash"
class="text-xs mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs mb-2 min-h-[1.25rem] invisible"
></div>
<div id="export-privkey-password-section" class="mb-2">
<label class="block mb-1">Password</label>
@@ -542,8 +537,7 @@
/>
<div
id="send-to-error"
class="text-xs"
style="min-height: 1.25rem; color: #cc0000"
class="text-xs min-h-[1.25rem] text-[#cc0000]"
></div>
</div>
<div class="mb-2">
@@ -619,7 +613,7 @@
<div class="text-xs text-muted mb-1">Your balance</div>
<div id="confirm-balance" class="text-xs"></div>
</div>
<div id="confirm-fee" class="mb-3" style="visibility: hidden">
<div id="confirm-fee" class="mb-3 invisible">
<div class="text-xs text-muted mb-1">Network fee</div>
<div id="confirm-fee-amount" class="text-xs"></div>
<!-- Holds its one line of space from the first paint, so
@@ -627,22 +621,13 @@
nothing. The placeholder is never seen. -->
<div
id="confirm-fee-reserve"
class="text-xs text-muted"
style="visibility: hidden"
class="text-xs text-muted invisible"
>
reserve pending
</div>
</div>
<div
id="confirm-warnings"
class="mb-2"
style="visibility: hidden"
></div>
<div
id="confirm-recipient-warning"
class="mb-2"
style="visibility: hidden"
>
<div id="confirm-warnings" class="mb-2 invisible"></div>
<div id="confirm-recipient-warning" class="mb-2 invisible">
<div
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
>
@@ -655,14 +640,9 @@
in confirmTx.js sets it. -->
<div
id="confirm-contract-warning"
class="mb-2 border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
style="visibility: hidden"
class="mb-2 border border-red-500 border-dashed p-2 text-xs font-bold text-red-500 invisible"
></div>
<div
id="confirm-burn-warning"
class="mb-2"
style="visibility: hidden"
>
<div id="confirm-burn-warning" class="mb-2 invisible">
<div
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
>
@@ -670,11 +650,7 @@
here are permanently destroyed and cannot be recovered.
</div>
</div>
<div
id="confirm-etherscan-warning"
class="mb-2"
style="visibility: hidden"
>
<div id="confirm-etherscan-warning" class="mb-2 invisible">
<div
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
>
@@ -684,13 +660,11 @@
</div>
<div
id="confirm-errors"
class="mb-2 border border-border border-dashed p-2"
style="visibility: hidden; min-height: 1.25rem"
class="mb-2 border border-border border-dashed p-2 invisible min-h-[1.25rem]"
></div>
<div
id="confirm-amount-fee-error"
class="mb-2 border border-border border-dashed p-2 text-xs"
style="visibility: hidden"
class="mb-2 border border-border border-dashed p-2 text-xs invisible"
>
Your balance does not cover this amount plus the network
fee. Please go back and send a smaller amount.
@@ -699,15 +673,13 @@
in confirmTx.js sets it. -->
<div
id="confirm-gas-error"
class="mb-2 border border-border border-dashed p-2 text-xs"
style="visibility: hidden"
class="mb-2 border border-border border-dashed p-2 text-xs invisible"
></div>
<!-- Its sentence names why the fee could not be estimated,
so show() in confirmTx.js sets it. -->
<div
id="confirm-fee-unknown-error"
class="mb-2 border border-border border-dashed p-2 text-xs"
style="visibility: hidden"
class="mb-2 border border-border border-dashed p-2 text-xs invisible"
></div>
<div class="mb-2">
<label class="block mb-1 text-xs">Password</label>
@@ -719,8 +691,7 @@
</div>
<div
id="confirm-tx-password-error"
class="text-xs mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs mb-2 min-h-[1.25rem] invisible"
></div>
<button
id="btn-confirm-send"
@@ -835,8 +806,7 @@
</button>
<div
id="receive-erc20-warning"
class="text-xs border border-border border-dashed p-2 mt-3"
style="visibility: hidden"
class="text-xs border border-border border-dashed p-2 mt-3 invisible"
></div>
</div>
@@ -864,8 +834,7 @@
</div>
<div
id="add-token-info"
class="text-xs text-muted mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-muted mb-2 min-h-[1.25rem] invisible"
></div>
<div class="mb-2">
<label class="block mb-1 text-xs text-muted"
@@ -1051,8 +1020,7 @@
type="text"
inputmode="numeric"
id="settings-dust-threshold"
class="border border-border p-1 text-xs bg-bg text-fg"
style="width: 10ch"
class="border border-border p-1 text-xs bg-bg text-fg w-[10ch]"
/>
<span class="text-xs text-muted">gwei</span>
</div>
@@ -1129,8 +1097,7 @@
<div
id="settings-debug-well"
class="bg-well p-3 mx-1 mb-3"
style="display: none"
class="bg-well p-3 mx-1 mb-3 hidden"
>
<h3 class="font-bold mb-1">Debug</h3>
<label
@@ -1158,8 +1125,7 @@
</p>
<div
id="delete-wallet-flash"
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
></div>
<div class="mb-2">
<label class="block mb-1">Password</label>
@@ -1232,8 +1198,7 @@
</div>
<div
id="delete-wallet-lost-flash"
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
></div>
<button
id="btn-delete-wallet-lost-confirm"
@@ -1288,8 +1253,7 @@
</p>
<div
id="delete-address-flash"
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
></div>
<button
id="btn-delete-address-confirm"
@@ -1318,8 +1282,7 @@
</div>
<div
id="show-phrase-flash"
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
></div>
<div id="show-phrase-password-section" class="mb-2">
<label class="block mb-1">Password</label>
@@ -1401,8 +1364,7 @@
/>
<div
id="settings-addtoken-info"
class="text-xs text-muted mt-1 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-muted mt-1 min-h-[1.25rem] invisible"
></div>
<button
id="btn-settings-addtoken-manual"
@@ -1635,8 +1597,7 @@
</div>
<div
id="approve-tx-error"
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem]"
style="visibility: hidden"
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem] invisible"
></div>
<div class="flex justify-between">
<button
@@ -1672,15 +1633,7 @@
<div
id="approve-sign-danger-warning"
class="mb-3 p-2 text-xs font-bold"
style="
visibility: hidden;
min-height: 1.25rem;
background: #fee2e2;
color: #991b1b;
border: 2px solid #dc2626;
border-radius: 6px;
"
class="mb-3 p-2 text-xs font-bold invisible min-h-[1.25rem] bg-[#fee2e2] text-[#991b1b] border-2 border-[#dc2626] rounded-[6px]"
></div>
<div class="mb-3">
@@ -1697,8 +1650,7 @@
<div class="text-xs text-muted mb-1">Message</div>
<div
id="approve-sign-message"
class="text-xs break-all"
style="max-height: 12rem; overflow-y: auto"
class="text-xs break-all max-h-48 overflow-y-auto"
></div>
</div>
@@ -1706,8 +1658,7 @@
<div class="text-xs text-muted mb-1">Raw data</div>
<div
id="approve-sign-hex"
class="text-xs break-all"
style="max-height: 6rem; overflow-y: auto"
class="text-xs break-all max-h-24 overflow-y-auto"
></div>
</div>
@@ -1721,8 +1672,7 @@
</div>
<div
id="approve-sign-error"
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem]"
style="visibility: hidden"
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.875rem] invisible"
></div>
<div class="flex justify-between">
<button
@@ -1846,8 +1796,7 @@
</div>
<div
id="state-recovery-flash"
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
style="visibility: hidden"
class="text-xs text-red-500 mb-2 min-h-[1.25rem] invisible"
></div>
<button
id="btn-state-recovery-reset"