css筆記 – Max的程式語言筆記

CSP (Content Security Policy) 的網站要如何安全的使用 Inline script

max-stackoverflow — Thu, 18 Jun 2026 09:01:22 +0000

當你在幫網站做健康檢查，看到弱掃報告（像是 ZAP ）跳出一個橘黃色的 Medium 警告，寫著 style-src 'unsafe-inline' 或是發現 script-src 滿是漏洞時，心裡是不是頓時涼了一半？

簡單來說，如果你的 CSP （網頁安全政策）開了 unsafe-inline ，就等於是在大門裝了密碼鎖，卻把密碼用便利貼貼在門口一樣。駭客只要找到機會塞一段惡意腳本（ XSS 攻擊），你的網站就直接變成他的遊樂場。

但是偏偏像是 Google Tag Manager （ GTM ）這種必裝的分析工具，官方給的程式碼裡面就是有一大段 Inline Script ：

HTML

既想要防禦 XSS 攻擊，又不能把 GTM 拔掉，這時候你有兩條路可以走，讓我們來看看這兩個相愛相殺的解決方案。

方案一：使用 Nonce （一次性密碼鎖）

這個方法就像是去看演唱會，每次進場工作人員都會在你的手上蓋一個當天限定、過期失效的印章。

在 CSP 標頭（ Header ）裡，你可以這樣設定：

HTTP

Content-Security-Policy: script-src 'nonce-每天換的神秘亂數密碼'; img-src www.googletagmanager.com

然後在你的網頁程式碼中，那段 GTM 的標籤也必須帶上相同的密碼：

HTML

工程師真心話

優點：超級安全。因為駭客根本猜不到你下一個 Request 的亂數密碼是什麼，就算他成功塞了惡意指令，也會因為沒有通關密碼而被瀏覽器直接擋在門外。
缺點（也就是坑）：這非常考驗後端的大腦。你的伺服器必須在「每次」收到請求時，都用高強度的加密演算法生出一組全新的隨機字串。最慘的是，你的網頁從此跟「回應快取」（ Response Cache ）說再見，因為一旦網頁被快取，密碼就不會變了，那這個鎖就形同虛設。

方案二：使用 Hash （驗收指紋認證）

如果你的網站是 SPA （單頁應用程式），或是部署在 GitHub Pages 這種根本沒有後端可以幫忙生密碼的靜態伺服器，那 Hash 就是你的救星。

這個概念是，瀏覽器會直接去核對這段程式碼的「指紋」。

步驟非常簡單，把之間的程式碼內容，丟到 SHA256 線上計算工具裡面去跑一下，會得到一串像是 0bbd063b7... 的雜湊值（ Hash ）。

接著把這串指紋放進你的 CSP 設定裡：

HTTP

Content-Security-Policy: script-src 'sha256-計算出來的那串指紋'; img-src www.googletagmanager.com

工程師真心話

優點：前端自己就能搞定，不需要後端伺服器配合，而且網頁依然可以開開心心地做快取，提升載入速度。
缺點（最雷的地方）：
1. 字元敏感度破表：SHA256 是一個極度龜毛的演算法。只要你的程式碼裡面多了一個空格、少了一個換行，甚至不同工程師的電腦存檔時，斷行符號一個是 LF （ \n ）一個是 CRLF （ \r\n ），算出來的指紋就完全不一樣。指紋一對不上，你的 GTM 就會直接被 CSP 射下來。
2. 維護地獄：哪天行銷團隊突然要求修改 GTM 裡面的參數，只要動到一個字，你就必須重新計算一次 Hash 值、重新更新 CSP 標頭。如果交接沒做好，後續接手的工程師改了程式碼發現網站功能壞掉，可能要在電腦前哭著找兇手找很久。

總結防禦指南

想要高枕無憂、後端架構也撐得住，請選 Nonce 。

如果是靜態網站、追求速度與快取，請選 Hash ，但每次改動程式碼時，請記得去燒香拜拜順便更新指紋。

總之，快把 unsafe-inline 從你的 CSP 裡面拿掉，別再讓你的網站裸奔了。

網頁開發者必看！用白話秒懂 CSS Injection 與 CSP 防禦

max-stackoverflow — Thu, 18 Jun 2026 06:39:22 +0000

為什麼連寫個看起來無害的 CSS 都會被瀏覽器當成恐怖份子。

瀏覽器的大內總管：CSP 到底在嚴格什麼？

各位前端與後端苦力們，有沒有遇過這種慘劇？

當你興高采烈地在網站加上這行內容安全政策（CSP）：

Content-Security-Policy: default-src 'self';

本以為從此高枕無憂，結果下一秒打開網頁，發現自己寫的行內腳本（inline-script）全部陣亡：

好啦，大家都知道 JavaScript 權限大、壞人最愛用，所以瀏覽器預設不讓它亂跑很合理。為了安撫大內總管，我們還得乖乖去算雜湊值（Hash）或是塞個 nonce 安全憑證，像是這樣：

Content-Security-Policy: default-src 'self'; script-src 'sha256-xxx...';

但是，最讓人傻眼的是，連單純想幫網頁化妝的行內樣式（inline-style）也被一起關進大牢了：

CSS 到底做錯了什麼？它只是個孩子啊！

警匪片現場：當 CSS 變成滲透工具

資安世界有三大神聖支柱：機密性、完整性、可用性。而隨便亂加的 CSS，其實正在默默破壞這一切。

疑犯一號：DOM 元素私生子（破壞完整性）

你可能會想：「這網頁是我寫的，裡面的 CSS 當然也是我寫的啊！」

事情可沒那麼簡單。在 JavaScript 的世界裡，壞人可以用各種神奇手法動態產生元素：

JavaScript

let style = document.createElement('style');
style.innerText = 'h1 { color: blue; }';
document.body.appendChild(style);

這段程式碼一旦被惡意注入，它就能神不知鬼不覺地改掉你的網頁外觀。這就是為什麼瀏覽器乾脆一不做二不休，預設把所有沒登記過的行內樣式全部封鎖。

疑犯二號：假藉美化名義的間諜（破壞機密性）

CSS 裡面有兩個看起來很無辜、但實際上超常被當作間諜的語法： @import 和 url() 。

當你用了背景圖片：

background-image: url(https://example.com/spy.jpg);

瀏覽器看到這行，就會自動發出一個請求去下載圖片。這時候，壞人就可以利用這個機制搞鬼：

偷看你的行蹤（Beacon 技術）： 只要把圖片網址加上個人專屬的編碼，當你一打開網頁，壞人的伺服器收到圖片請求，就知道「喔！某某某在幾點幾分看了這個頁面！」
Cookie 順風車： 如果網站沒設定好，這個請求甚至會順便把你的 Cookie 跨站送出去，直接把你的登入狀態雙手奉上。

所以，想要在有 CSP 的防護下安全地秀出圖片，你還必須跟總管報備圖片的白色名單：

Content-Security-Policy: default-src 'self'; style-src 'sha256-...'; img-src http://信任的圖片來源;

結論

在這個壞人招數層出不窮的時代，網頁開發者真的不能只活在「CSS 只是用來排版」的粉紅泡泡裡。多了解一點 CSP 的龜毛規則，雖然設定時會寫到抓狂，但至少能保住大家的飯碗，不讓網站變成駭客的免費遊樂園！

How to Use the :has() Selector in CSS

max-stackoverflow — Thu, 05 Dec 2024 01:41:05 +0000

之前使用過 :not() 覺得超級的實用，例如：選取所有checkbox 狀態是沒被打勾的。今天要來學習使用 :has().

:has()
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has
CSS :has() Pseudo-class
https://www.w3schools.com/cssref/sel_has.php
:has() 個案研究
https://developer.chrome.com/blog/css-ui-ecommerce-has?hl=zh-tw
How to Use the :has() Selector in CSS
https://www.freecodecamp.org/news/how-to-use-the-has-selector-in-css/

影片：Learn CSS :not() and :has() selector in 6 Minutes
https://www.youtube.com/watch?v=-pQZLQakz-c

滿神奇的，居然完全沒使用 javascript 就到過 filter 功能。

左側分類欄位組合右側收合

max-stackoverflow — Tue, 07 May 2024 07:33:30 +0000

在使用 clipchamp 時看到這一個功能，覺得很有趣。

比較簡單的解法，是使用 sidebar + collapse 就可以做到，範例程式：
https://getbootstrap.com/docs/5.3/examples/sidebars/

clipchame 的這個做法的優點是讓分類可以保持在左側sidebar 裡。

實作的方式是，sidebar 使用 tab 來實作，收合使用。 collapse, 參考看看 bootstrap 範例：
https://getbootstrap.com/docs/5.3/components/collapse/

一般 collapse 是上下收合，這個是左右收。

一般 tab 是上下的版面，這個是左右版面。

實際上用的到html程式碼：

css:

div.ifilter_chart {
    display: flex;
    height: 100%;	
}

.ifitler_chart_left_side_bar{
    display: flex;
    /*
    // why remark this become height: 100% 
    height: 100%; */
    position: relative;
    z-index: 5;	
}

.ifilter_chart_left_nav {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    border-inline-end: 1px solid rgb(230, 230, 230);
}

.ifilter_chart_left_nav_grid {
    flex-grow: 1;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.ifilter_chart_left_nav_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    /* overflow-y: scroll; */
}

.ifilter_chart_left_nav_btn.active {
    opacity: 1;
    color: var(--primary) !important;
    background: var(--rgba-primary-1);
    font-weight: 600;
    box-shadow: none;    
}
.ifilter_chart_left_nav_btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    color: #737B8B;
    line-height: 1.1;
    padding: 4px;
    width: 64px;
    height: 64px;
    font-weight: 400;
    cursor: pointer;
    /* transition: color 100ms ease-in-out 0s, background 100ms ease-in-out 0s; */
}

.ifilter_chart_left_nav_item_text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
    
.ifilter_chart_left_sidebar {
	position: relative;
    height: 100%;
}

.ifilter_chart_left_sidebar_grid {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_media {
    background-color: rgb(255, 255, 255);
    overflow: hidden overlay;
    flex-grow: 1;
}

.ifilter_chart_left_sidebar_section {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_grid_container {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_collapse_icon {
    position: absolute;
    top: calc(50% - 38px);
    height: 76px;
    width: 16px;
    color: rgb(39, 40, 54);
    transition: color 150ms ease-out 0s;
}
.ifilter_sidebar_button {
    position: absolute;
    top: calc(50% - 38px);
    transition: color 150ms ease-out 0s;	
}

.ifilter_chart_collapse_icon {
    left: 100%;
}
.ifilter_chart_collapse_icon_svg:not(.collapsed) {
    transform: rotate(90deg);
}
.ifilter_chart_collapse_icon_svg.collapsed {
    transform: rotate(270deg);
}

.ifilter_chart_collapse_icon_svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
}

.ifilter_chart_collapse_button {
    text-align: inherit;
    padding: 0px;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.ifilter_chart_canvas {
	width: 100%;
	text-align: -webkit-center;
	padding-top: 3rem;
    margin-left: 20px;
}

javascript:

var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_nav_btn'));
collapseElementList.map(function (collapseEl) {
	collapseEl.addEventListener("click", function(event){
        let targetElement = event.target || event.srcElement;
        //console.log(targetElement);
        if(targetElement.tagName=="I" || targetElement.tagName=="DIV") {
        	targetElement = targetElement.parentNode;
            //console.log(targetElement);
        }
    	
        let btn_href = targetElement.getAttribute("href");
    	let btn_selector = "";
    	let collapse_id = "";
    	if(btn_href=="#ifilter_tab_bar_config" || btn_href=="#ifilter_tab_bar_filter") {
    		collapse_id = "collapse_bar_sidebar";
    		btn_selector = 'button[data-bs-target="#'+ collapse_id +'"]';
    	}
    	const sidebar_btn = document.querySelector(btn_selector);
    	if(sidebar_btn) {
    		//console.log(sidebar_btn.getAttribute("class"));
    		if(sidebar_btn.getAttribute("class").indexOf("collapsed") > -1) {
    			const bsCollapse = new bootstrap.Collapse(document.querySelector('#'+collapse_id));
    			bsCollapse.toggle();
    		}
    	}
    });
});


var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_sidebar_grid'));
collapseElementList.map(function (collapseEl) {
	// hide.bs.collapse
	const element_selector = "button[data-bs-target=\"#"+ collapseEl.getAttribute("id") +"\"] svg.ifilter_chart_collapse_icon_svg";
	collapseEl.addEventListener("hidden.bs.collapse", function(event){
		$(element_selector).addClass("collapsed");
	});

	// show.bs.collapse
	collapseEl.addEventListener("shown.bs.collapse", function(event){
		$(element_selector).removeClass("collapsed");
	});
});

說明：你的使用情況可能比我簡單很多，我因為有多個圖表要共用 css, 所以程式碼會複雜一點點。

讓三欄式網格式的圖片自動縮小

max-stackoverflow — Mon, 05 Feb 2024 02:24:52 +0000

在套用bootstrap 時, 不小心把 img tag 放到 card 裡, 大多數的情況下, image 是以原圖方式顯示, 縮小的話, 需要自定寬度, 如果設定絕對的寬度, 就需要自義左右造成的空白間隙.

比較方便的做法, 是直接填滿某一個網格, 然後再格子裡設定間距, 做出來的執行效果:

中間神奇的關鍵是 row-cols-md-3, 滿神奇的, 加了這個class , 圖片就自動縮到格子裡, 後面加 g-3 是要讓邊邊不要直接摸到圖片的線條。

bootstrape validation 使用心得

max-stackoverflow — Tue, 26 Sep 2023 09:23:59 +0000

為什麼要使用 validation, 因為這個使用上很直覺, 可以直接跟user講那一個欄位分別是合法,還有各自的錯誤訊息, 也不會因讓畫面有奇怪的彈跳, 使用的效果相較於彈出式的alert/dialog/modal 而言, 比較推薦使用.

在 input tag, 並不是使用 onchange 來觸發每一個輸入的字元, onchange 是在離開input 輸入框時, 才會觸發, 每打一個字, 使用的是事件是 oninput.

在 input 的 parent 加入 .was-validated 就可以觸發讓輸入框有打勾與”必填”的視覺上的效果. 如果是要類似的 ajax 的使用方法, 必需在”完成檢查” 並且沒有錯誤, 才 addClass, 反之要 removeClasss, 就可以有上面的效果.

但是, 如果是要在輸入框有值, 且要顯示為錯誤, 請手動讓正確的 form-control 加入 class .is-valid 有錯的 form-control 加入 .is-invalid .

官方的說明:
https://getbootstrap.com/docs/5.3/forms/validation/

tabulator 的寬度無法overflow:hidden

max-stackoverflow — Fri, 04 Aug 2023 10:33:26 +0000

正常情況下, overflow 的部分被隱藏, 並在內部元件產生橫向的scroll bar.

異常情況, 是無法產生 scrollbar, 畫面變超大,

努力地研究 tabulator 官方文件, 也看不出所以然:
https://tabulator.info/docs/5.5/layout#fittowidth

手動調整 tabulator 的 table width:100% 也無解.

產成的原因:

某一個爸爸 div 讓 tabulator 繼承到 display: grid; 而且上層又是用 flex, 交叉使用就掛掉.

解法1: 避開 grid 就OK了.

解法2: 在 tabulator 的上層設成 display: grid 居然也行, 真太神奇了, 呵呵.

Left align and right align within div in Bootstrap

max-stackoverflow — Tue, 18 Jul 2023 10:04:52 +0000

想把下面的按鈕們搬到右邊, 但都失敗, 成功後的執行畫面:

解法:
https://getbootstrap.com/docs/5.0/utilities/flex/


  Flex item
  Flex item
  Flex item

直接下 justify-content-end , 沒有效果,

使用 text-right 也失敗:
https://getbootstrap.com/docs/4.0/utilities/text/

Right aligned text on all viewport sizes.

css selector tester online: jsoup

max-stackoverflow — Fri, 14 Jul 2023 18:10:17 +0000

今天要分享一個跟css selector 有關的網站:
https://try.jsoup.org/

我實際執行畫面：

原本的 css selector 是寫 tr.status_tr 但是，會連 Soldout 也一起被選到，改用 tr[class=’status_tr’] 就解決了，沒有使用到 :NOT().

在網路上學習 css selector 的語法，想套用看看，例如我想試的是NOT 的用法：
https://www.geeksforgeeks.org/how-to-use-a-not-equal-css-attribute-selector/

相關討論：Can’t find a “not equal” css attribute selector
https://stackoverflow.com/questions/25287229/cant-find-a-not-equal-css-attribute-selector

One problem with the accepted answer is that it will also select elements that do not have a foo attribute at all. Consider:

No foo
Empty foo
XXX
YYY
ZZZ

div:not([foo='']) will select both the first and second div elements. If you only want div elements that have an attribute foo that is set to an empty string, you should use:

div[foo]:not([foo=''])

If you want all elements with attribute foo that is neither y nor z, you should use:

div[foo]:not([foo='y']):not([foo='z'])

Bootstrap Tabs Example

max-stackoverflow — Tue, 18 Apr 2023 07:41:44 +0000

最近有一個需求, 想做成 wizard 風格的操作界面, 首先是在 google 下 keyword:

bootstrap tabs template

使用下面的範例來修改:
https://colorlib.com/etc/bwiz/colorlib-wizard-30/index.html

實做的結果:

Step 1:

Step 2:

Step 3:

使用的 html:

下方的按鈕們:

使用的 css:

 .form-register .steps {
    margin-bottom: 33px;
    margin-top: 40px
}

.form-register .steps ul {
    display: flex;
    display: -webkit-flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center
}

.form-register .steps li,.form-register .steps li.current {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none
}

.form-register .steps li div {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #ccc;
    margin-right: 143px;
    position: relative;
    outline: none
}

.form-register .steps li div::before {
    position: absolute;
    content: "";
    background: #e5e5e5;
    width: 143px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 100%
}

.form-register .steps li.last div {
    margin-right: 0
}

.form-register .steps li.last div::before {
    content: none
}

.form-register .steps li.current div
,.form-register .steps li.current div:active
,.form-register .steps li.done div::before
,.form-register .steps li.done div
,.form-register .steps li.done div:active {
    background: #3760e5
}

.form-register .steps li .current-info {
    display: none
}

.form-register .steps li .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-family: montserrat,sans-serif
}

使用到的 javascript:

這段用來控制按鍵和區塊在切換時的顯示.

function switch_tab_step(table_name, active_at, tab_count) {
	for(let i=1; i<=tab_count; i++){
		$("#"+ table_name +"_nav_"+i).removeClass("current");
		$("#"+ table_name +"_nav_"+i).removeClass("done");
		
		if(i





next 與 previous 的控制:



function your_table_next_1() {
	switch_tab_step('your_table',2,3);
}

function your_table_previous_1() {
	switch_tab_step('your_table',1,3);
}

function your_table_next_2() {
	switch_tab_step('your_table',3,3);
	
	// final step
    // your code here...
}

function your_table_previous_2() {
	switch_tab_step('your_table',2,3);
}







大致上, 這樣就可以做出 wizard 效果.

css筆記 – Max的程式語言筆記

CSP (Content Security Policy) 的網站要如何安全的使用 Inline script

方案一：使用 Nonce （ 一次性密碼鎖 ）

工程師真心話

方案二：使用 Hash （ 驗收指紋認證 ）

工程師真心話

總結防禦指南

網頁開發者必看！用白話秒懂 CSS Injection 與 CSP 防禦

瀏覽器的大內總管：CSP 到底在嚴格什麼？

警匪片現場：當 CSS 變成滲透工具

疑犯一號：DOM 元素私生子（破壞完整性）

疑犯二號：假藉美化名義的間諜（破壞機密性）

結論

How to Use the :has() Selector in CSS

相關文章

左側分類欄位組合右側收合

讓三欄式網格式的圖片自動縮小

bootstrape validation 使用心得

tabulator 的寬度無法overflow:hidden

Left align and right align within div in Bootstrap

css selector tester online: jsoup

Bootstrap Tabs Example

方案一：使用 Nonce （一次性密碼鎖）

方案二：使用 Hash （驗收指紋認證）