harden: drop 'unsafe-inline' from style-src (closes #328)
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:
@@ -181,10 +181,10 @@ function renderTransactions(txs) {
|
||||
// it on the line above rather than replacing it.
|
||||
const nameStr = escapeHtml(title || ensName || "");
|
||||
const err = tx.isError ? " (failed)" : "";
|
||||
const opacity = tx.isError ? " opacity:0.5;" : "";
|
||||
const opacity = tx.isError ? " opacity-50" : "";
|
||||
const ago = escapeHtml(timeAgo(tx.timestamp));
|
||||
const iso = escapeHtml(isoDate(tx.timestamp));
|
||||
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
||||
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
|
||||
html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
|
||||
html += txCounterpartyHtml(counterparty, nameStr, amountStr);
|
||||
html += `</div>`;
|
||||
|
||||
@@ -258,10 +258,10 @@ function renderTransactions(txs) {
|
||||
// it on the line above rather than replacing it.
|
||||
const nameStr = escapeHtml(title || ensName || "");
|
||||
const err = tx.isError ? " (failed)" : "";
|
||||
const opacity = tx.isError ? " opacity:0.5;" : "";
|
||||
const opacity = tx.isError ? " opacity-50" : "";
|
||||
const ago = escapeHtml(timeAgo(tx.timestamp));
|
||||
const iso = escapeHtml(isoDate(tx.timestamp));
|
||||
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
||||
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
|
||||
html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
|
||||
html += txCounterpartyHtml(counterparty, nameStr, amountStr);
|
||||
html += `</div>`;
|
||||
|
||||
+23
-20
@@ -335,7 +335,7 @@ function balanceLine(symbol, amount, price, tokenId) {
|
||||
: "";
|
||||
return (
|
||||
`<div class="flex text-xs${clickClass}"${tokenAttr}>` +
|
||||
`<span class="flex justify-between" style="width:42ch;max-width:100%">` +
|
||||
`<span class="flex justify-between w-[42ch] max-w-full">` +
|
||||
`<span>${escapeHtml(displaySymbol(symbol))}</span>` +
|
||||
`<span>${qty}</span>` +
|
||||
`</span>` +
|
||||
@@ -430,23 +430,26 @@ function truncateMiddle(str, maxLen) {
|
||||
|
||||
// 16 colors evenly spaced around the hue wheel (22.5° apart),
|
||||
// all at HSL saturation 70%, lightness 50% for uniform vibrancy.
|
||||
// Each is a whole Tailwind class: Tailwind builds only the classes it finds
|
||||
// written out in the source, so the class name cannot be put together at
|
||||
// runtime.
|
||||
const ADDRESS_COLORS = [
|
||||
"#d92626",
|
||||
"#d96926",
|
||||
"#d9ac26",
|
||||
"#c2d926",
|
||||
"#80d926",
|
||||
"#3dd926",
|
||||
"#26d953",
|
||||
"#26d996",
|
||||
"#26d9d9",
|
||||
"#2696d9",
|
||||
"#2653d9",
|
||||
"#3d26d9",
|
||||
"#8026d9",
|
||||
"#c226d9",
|
||||
"#d926ac",
|
||||
"#d92669",
|
||||
"bg-[#d92626]",
|
||||
"bg-[#d96926]",
|
||||
"bg-[#d9ac26]",
|
||||
"bg-[#c2d926]",
|
||||
"bg-[#80d926]",
|
||||
"bg-[#3dd926]",
|
||||
"bg-[#26d953]",
|
||||
"bg-[#26d996]",
|
||||
"bg-[#26d9d9]",
|
||||
"bg-[#2696d9]",
|
||||
"bg-[#2653d9]",
|
||||
"bg-[#3d26d9]",
|
||||
"bg-[#8026d9]",
|
||||
"bg-[#c226d9]",
|
||||
"bg-[#d926ac]",
|
||||
"bg-[#d92669]",
|
||||
];
|
||||
|
||||
function addressColor(address) {
|
||||
@@ -456,12 +459,12 @@ function addressColor(address) {
|
||||
|
||||
function addressDotHtml(address) {
|
||||
const color = addressColor(address);
|
||||
return `<span style="width:8px;height:8px;border-radius:50%;display:inline-block;background:${color};margin-right:4px;vertical-align:middle;flex-shrink:0;"></span>`;
|
||||
return `<span class="inline-block w-[8px] h-[8px] rounded-[50%] ${color} mr-[4px] align-middle shrink-0"></span>`;
|
||||
}
|
||||
|
||||
function blockieHtml(address) {
|
||||
const src = makeBlockie(address);
|
||||
return `<img src="${escapeHtml(src)}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
|
||||
return `<img src="${escapeHtml(src)}" width="48" height="48" class="inline-block rounded-[50%] [image-rendering:pixelated]">`;
|
||||
}
|
||||
|
||||
// Look up an address across all wallets and return its title
|
||||
@@ -571,7 +574,7 @@ function timeAgo(timestamp) {
|
||||
|
||||
// Shared external-link icon SVG used across all views.
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<span class="inline-block w-[10px] h-[10px] ml-[4px] align-middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
|
||||
@@ -131,10 +131,10 @@ function renderHomeTxList(ctx) {
|
||||
const title = addressTitle(counterparty, state.wallets);
|
||||
const titleStr = title ? escapeHtml(title) : "";
|
||||
const err = tx.isError ? " (failed)" : "";
|
||||
const opacity = tx.isError ? " opacity:0.5;" : "";
|
||||
const opacity = tx.isError ? " opacity-50" : "";
|
||||
const ago = escapeHtml(timeAgo(tx.timestamp));
|
||||
const iso = escapeHtml(isoDate(tx.timestamp));
|
||||
html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
||||
html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover${opacity}" data-tx="${i}">`;
|
||||
html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
|
||||
html += txCounterpartyHtml(counterparty, titleStr, amountStr);
|
||||
html += `</div>`;
|
||||
@@ -241,7 +241,7 @@ function walletListHtml() {
|
||||
state.wallets.forEach((wallet, wi) => {
|
||||
const defect = walletDefect(wallet);
|
||||
html += `<div>`;
|
||||
html += `<div class="flex justify-between items-center bg-section py-1 px-2" style="margin:0 -0.5rem">`;
|
||||
html += `<div class="flex justify-between items-center bg-section py-1 px-2 -mx-2">`;
|
||||
html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${escapeHtml(wallet.name)}</span>`;
|
||||
// No "+" on a defective wallet: deriving another address from that
|
||||
// xpub would only add one more address the key does not produce
|
||||
@@ -255,12 +255,12 @@ function walletListHtml() {
|
||||
wallet.addresses.forEach((addr, ai) => {
|
||||
html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover" data-wallet="${wi}" data-address="${ai}">`;
|
||||
const isActive = state.activeAddress === addr.address;
|
||||
const infoBtn = `<span class="btn-addr-info text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg" style="padding:0" data-wallet="${wi}" data-address="${ai}">[info]</span>`;
|
||||
const infoBtn = `<span class="btn-addr-info text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg p-0" data-wallet="${wi}" data-address="${ai}">[info]</span>`;
|
||||
// Only where a wallet can spare the address: a wallet holding a
|
||||
// single address has no remove control, because its last address
|
||||
// is never removable.
|
||||
const removeBtn = canRemoveAddress(wallet)
|
||||
? `<span class="btn-remove-address text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg ml-1" style="padding:0" data-wallet="${wi}" data-address="${ai}" title="Remove this address from the wallet">[x]</span>`
|
||||
? `<span class="btn-remove-address text-xs cursor-pointer border border-border hover:bg-fg hover:text-bg ml-1 p-0" data-wallet="${wi}" data-address="${ai}" title="Remove this address from the wallet">[x]</span>`
|
||||
: "";
|
||||
const dot = addressDotHtml(addr.address);
|
||||
const titleBold = isActive ? "font-bold" : "";
|
||||
|
||||
@@ -213,12 +213,7 @@ function show() {
|
||||
versionClickCount = 0;
|
||||
|
||||
// Show debug well if debug mode is already enabled
|
||||
const debugWell = $("settings-debug-well");
|
||||
if (state.debugMode) {
|
||||
debugWell.style.display = "";
|
||||
} else {
|
||||
debugWell.style.display = "none";
|
||||
}
|
||||
$("settings-debug-well").classList.toggle("hidden", !state.debugMode);
|
||||
$("settings-debug-mode").checked = state.debugMode;
|
||||
|
||||
showView("settings");
|
||||
@@ -434,7 +429,7 @@ function init(ctx) {
|
||||
if (versionClickCount >= 10) {
|
||||
versionClickCount = 0;
|
||||
clearTimeout(versionClickTimer);
|
||||
$("settings-debug-well").style.display = "";
|
||||
$("settings-debug-well").classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user