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

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

HTML

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

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

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

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

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

HTTP

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

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

HTML

<script nonce='每天換的神秘亂數密碼'>
  // GTM 的扣（Code）放這裡
</script>

工程師真心話

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

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

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

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

步驟非常簡單，把 <script> 到 </script> 之間的程式碼內容，丟到 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 都會被瀏覽器當成恐怖份子。

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

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

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

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

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

<script>console.log('連我都不能跑是怎樣');</script>

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

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

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

<style>h1 { color: yellow; }</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 的龜毛規則，雖然設定時會寫到抓狂，但至少能保住大家的飯碗，不讓網站變成駭客的免費遊樂園！

之前使用過 :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 功能。

異常情況, 是無法產生 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 居然也行, 真太神奇了, 呵呵.

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

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

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

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

<p class="text-right">Right aligned text on all viewport sizes.</p>

我實際執行畫面：

原本的 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:

<div>No foo</div>
<div foo="">Empty foo</div>
<div foo="x">XXX</div>
<div foo="y">YYY</div>
<div foo="z">ZZZ</div>

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 template

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

實做的結果:

Step 1:

Step 2:

Step 3:

使用的 html:

<div id="form-total" role="application" class="form-register wizard clearfix">
	<div class="steps clearfix">
		<ul role="tablist">
			<li role="tab" aria-disabled="false" class="first current" aria-selected="true" id="your_table_nav_1">
				<div>
				<span class="title">1</span></div>
			</li>
			<li role="tab" aria-disabled="false" class="" aria-selected="true" id="your_table_nav_2">
				<div>
				<span class="title">2</span></div>
			</li>
			<li role="tab" aria-disabled="false" class="last" id="your_table_nav_3">
				<div>
				<span class="title">3</span></div>
			</li>
		</ul>
	</div>

	<div id="your_table_tab_1" class="">
                <div class="col-12">
                  <label for="your_table-field1-id" class="form-label">Field1</label>
                    <select class="form-select" aria-label="Default select" id="your_table-field1-id">
                    </select>
                </div>
	</div>
	<div id="your_table_tab_2" class="disappear">
                <div class="col-12">
                  <label for="your_table-field2-id" class="form-label">Field2</label>
                    <select class="form-select" aria-label="Default select" id="your_table-field2-id">
                    </select>
                </div>
                <div class="col-12">
                  <label for="your_table-field3-id" class="form-label">Field3</label>
                    <select class="form-select" aria-label="Default select" id="your_table-field3-id">
                    </select>
                </div>
	</div>
	<div id="your_table_tab_3" class="disappear">
                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">User</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-user_name-confirm"></div>
	                </div>
                </div>

                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">Field1</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-field1-confirm"></div>
	                </div>
                </div>

                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">Field2</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-field2-confirm"></div>
	                </div>
                </div>

                <div class="row">
	                <div class="col-3">
	                  <label class="form-label">Field3</label>
	                </div>
	                <div class="col">
	                  <div id="your_table-field3-confirm"></div>
	                </div>
                </div>
	</div>

</div>

下方的按鈕們:

<button type="button" class="btn btn-secondary disappear" id='your_table-btn-previous_1' onclick="javascript:your_table_previous_1();">
	<span>Previous</span>
</button>

<button type="button" class="btn btn-primary" id='your_table-btn-next_1' onclick="javascript:your_table_next_1();">
	<span>Next</span>
</button>

<button type="button" class="btn btn-secondary disappear" id='your_table-btn-previous_2' onclick="javascript:your_table_previous_2();">
	<span>Previous</span>
</button>

<button type="button" class="btn btn-primary" id='your_table-btn-next_2' onclick="javascript:your_table_next_2();">
	<span>Next</span>
</button>

使用的 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<active_at) {
			$("#"+ table_name +"_nav_"+i).addClass("done");
		}

		$("#"+ table_name +"_tab_"+i).addClass("disappear");

		$("#"+ table_name +"-btn-previous_"+i).addClass("disappear");
		$("#"+ table_name +"-btn-next_"+i).addClass("disappear");
	}

	$("#"+ table_name +"_nav_"+active_at).addClass("current");

	$("#"+ table_name +"_tab_"+active_at).removeClass("disappear");

	$("#"+ table_name +"-btn-previous_"+(active_at-1)).removeClass("disappear");
	$("#"+ table_name +"-btn-next_"+active_at).removeClass("disappear");
}

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 效果.

• addClass() – Adds one or more classes to the selected elements
• removeClass() – Removes one or more classes from the selected elements
• toggleClass() – Toggles between adding/removing classes from the selected elements
• css() – Sets or returns the style attribute

新增 class 範例:

$(“button”).click(function(){
  $(“div”).addClass(“important”);
});

移除 class 範例:

$(“button”).click(function(){
  $(“div”).removeClass(“blue”);
});

比較常見的是用切換某一個屬性, 可以用 toggle

$(“button”).click(function(){
  $(“h1, h2, p”).toggleClass(“blue”);
});

純 CSS 製作箭頭(arrow)
https://stackoverflow.max-everyday.com/2023/02/css-arrow/

服用下方的 css 可以產生這個左則三角型效果:

div.three:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  transform: translateY(-50%);
  left: -20px;
}

如果想調整為到上方, css 調整為:

  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 7px 0px 7px;
  border-color: black transparent transparent transparent;
  transform: translateX(-50%);
  top: -20px;

左側的線, 可以用 after 來畫:

div.three:after {
    content: '';
    height: 1px;
    background: black;
    width: 75px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    left: -76px;
    position: absolute;
    top: 50%;
}

如果想畫在上側, 可以使用:

    content: '';
    height: 50px;
    background: black;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    top: -66px;
    position: absolute;
    left: 50%;

CSS border-width 基本語法

分別設定四的邊框的寬度 border-width: 上邊框寬度 右邊框寬度 下邊框寬度 左邊框寬度;

Step 1) Add HTML:

Example

<p>Right arrow: <i class="arrow right"></i></p>
<p>Left arrow: <i class="arrow left"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>
<p>Down arrow: <i class="arrow down"></i></p>

Step 2) Add CSS:

Example

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}


.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

資料來源:
https://www.w3schools.com/howto/howto_css_arrows.asp

要畫正三角型, 向右的, 參考看看:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-right

css:

.triangle-right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #555;
	border-bottom: 25px solid transparent;
}

要畫出實心的三角型, 例如下圖:

在完全不設定 transparent 的情況下, border-width: 7px 0 7px 20px; 效果紅色的部份如下:

以結果上來看, 可以說:

• 要變尖的部份border-width:設為0, 底部滿的部份為 20px. 其他二側為 7px.
• 要變尖的部份border-color: black, 其餘為transparent

下面的css 比較笨, 是用向右來做旋轉:

.arrow2 {
  border: solid black;
  display: inline-block;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  transform: translateY(-50%);
}

.right2 {

}

.left2 {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
}

.up2 {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.down2 {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

資料來源

How to put arrow between two divs using html and css
https://stackoverflow.com/questions/45030914/how-to-put-arrow-between-two-divs-using-html-and-css?newreg=1cee82f737294b81935dadd5cdaee11c

比較神奇的畫線, 是這一個 github repo:
https://github.com/anseki/leader-line