CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

🔍 搜尋結果：alert(1)

討論－淺談html/js之關係以及，延伸至XSS

>最近在忙著實作我的一些小項目，沒有上來發文，但還是一直學習JS， >累積滿多經驗，也累積不少疑問。 >之前站長阿川有跟我提到相關話題，也就是UJS，想說把它拿過來聊一聊。 >剛好最近弄的東西，跟這個也有一些關聯性。 ## html與JS的交互關係。 Inline JavaScript是什麼呢？就把JS寫在html裡面的一種手段，也就是onclick那些東西，在自學教材會學到唷：））。其中也有個東西叫做JavaScript pseudo-protocol，他好像有點像是給一個js的前綴，讓瀏覽器讀取html的時候知道要開始讀取JS了，用法如： `<a href="javascript:alert(1)">my website</a>` 這樣子的作法都讓JS侵入到html裡面，也就是行為跟結構沒有分離。是否要UJS，站長上次有提到這可以看專案大小來區分，這篇閒聊開起來可以提供更多細節。 --- 不過我不打算就此結束文章，我要額外分享與XSS相關的內容。 XSS其實是CSS，跨站指令碼Cross Site Script的意思，只是因為縮寫重複CSS樣式（Cascading Style Sheets ）所以用X代替。簡單理解它就是一種攻擊手段，讓別人網站上執行我的代碼。 --- 有趣的事情來了，那html跟JS交互關係跟XSS又有什麼關聯呢？想像一下，當今天小明要做一個討論區，讓使用者用html編輯打文章，就必須小心有人會放一些JS的代碼。小明想說，我要過濾`<script>`標籤來保證他們乖乖地寫html。請問這樣子是否就安全了呢？答案是否定的，這時候使用Inline JavaScript會發生什麼狀況？試想一下因為小明沒有CSP相關設定，防止使用者偷偷塞JS到html裡面，導致小明的壞朋友大胖，可以直接寫一個`<img src=x onerror="alert(1)">`在留言區裡面，完全沒有使用到`<script>`標籤，卻也能造成XSS。 --- ## 關於防禦： ### CSP 設定嚴格一點，可以阻止很多XSS，舉例來說文章一開始有`href="javascript:alert(1)"`，可以設定href後面只能接上http開頭的東西。 ### WAF 他是Web Application Firewall 的簡稱，中文通常叫作「網站應用程式防火牆」可以建立及管理避免網際網路威脅的規則，包括IP 位址、HTTP 標頭、HTTP 主體、URI 字串、跨網站命令檔(XSS)、SQL 隱碼攻擊及其他OWASP 定義的漏洞。 ### 自己建立fliter 自己過濾也是可行的（不建議），把字串符碼都轉成HTML Entities，例如把 (<)寫成 ` < or <` ，透過這樣的過濾render出來的就不會是指令了。為什麼不建議，是因為你過濾的東西有可能會被double encoded URL之類的手法繞過。或是你覆蓋了document.write，以為安全了，但是我用孿生函數(twin function)的document.writeIn你可能就忘了過濾。這剛好就是我最近在研究的東西。 ## 相關討論問題： 1.對於文章的內容，有沒有什麼錯誤呢？或相關名詞想法想補充？ 2.是否要UJS的實際使用，有哪些想法？或是有什麼經驗？

3個讚 4留言 315瀏覽

站長阿川 · 01月20日

JavaScript 系列五：第3課 ── 變數作用域、箭頭函式、ES6 語法

## 課程目標認識變數作用域認識函式的不同寫法與特性 ## 課程內容來認識一些程式語言觀念與名詞 ``` <button onclick="action1()"> global scope </button> <button onclick="action2()"> local scope </button> ``` ``` var counterA = 0; function action1() { counterA = counterA + 1; alert(counterA); } function action2() { var counterB = 0; counterB = counterB + 1; alert(counterB); } ``` 到 jsfiddle 跑跑看，會發現第一個計數器會不斷 +1 疊加上去；第二個計數器卻永遠顯示 1 這就是變數作用域的區別：變數宣告在很外面的，會在很大的範圍內都可使用這變數；變數宣告在很裡面的，只在裡面的範圍內才可使用這變數宣告在最外面的稱為全域變數（global），反之則稱為區域變數（local）目前為止的作業，其實你已經到處在寫 global 與 local 變數了，這觀念還算簡單、直觀 --- 用精確的技術名詞來說明的話在 ES6 (2015) 之前，JavaScript 中的變數作用域只有 Global Scope 跟 Function Scope 兩種並且，在使用 `var` 關鍵字時，要留意一種名為 Hoisting 的現象，這是一種會讓人搞錯變數作用域的現象在 ES6 之後，有了 `const` 與 `let` 兩種新關鍵字，宣告的變數為 Block Scope 使用這兩種關鍵字，就不會出現 Hoisting 的現象 --- 我個人認為，Hoisting 是一個設計失敗的程式語言特性應該要讓 JavaScript 引擎直接報錯、程式直接壞掉比較好一般程式語言沒有 Hoisting 這種現象，此為 JavaScript 獨有特性這是當年 Netscape 瀏覽器公司，為了衝市占率、歡迎大家亂寫 JS 程式碼的產物我不想細談 Hoisting，反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 實務上，現在大家都寫 `const` 與 `let`，比較不寫 `var` 了所以 Function Scope 跟 Block Scope 的差別在哪？簡單來說，這樣的程式碼，x 正常顯示，y 會報錯 ``` if (true) { var x = 1; const y = 2; } alert(x); alert(y); ``` `var` 會覺得變數作用域，只有 `function 函式` 內、外的差別，內就是同樣 local，外就是 global `const` `let` 會覺得變數作用域，每次遇到 `大括號 {}` 都算一次內、外的差別，大括號裡面就是 local，裡面的裡面就是 local 中的 local 看不太懂沒關係，總之，變數宣告時，遇到 bug，就往前面找大括號，把變數搬來搬去，試試看，會慢慢搞懂的本課先教你區分 global 與 local 兩種概念就好，這在大多數程式語言都是通用概念在本系列教材內容以及作業中，`const` `let` `var` 隨便混著用，都可以大概知道當前變數是 global 還是 local 就好反正改天你真的遇到問題，大概知道要往這方向研究就是了 --- 接下來談一談 JavaScript 中的函式之前的課程中，有過這樣的範例 ``` <button id="my-btn">Click me</button> ``` ``` function myFunction() { alert('你點擊了按鈕！'); } var btn = document.getElementById('my-btn'); btn.onclick = myFunction; ``` `myFunction` 被當成變數一樣，被指派給一個物件的屬性了在很多程式語言中，函式是不能這樣使用的！函式永遠只能單獨加上小括號去執行 `myFunction()` 這個差別有點像是，其他程式語言認為變數是「名詞」，函式是「動詞」。那些語言認為這樣才能溝通、描述世界而 JavaScript 認為變數是「名詞」，函式是「動詞」也是「動名詞」，也就是認為函式也是一種「名詞」。JavaScript 認為這樣才能溝通、描述世界中文說「我開車」跟「開車很好玩」，沒有在管「開車」是動詞還是名詞，中文使用者就是習慣這樣溝通英文說「I drive」跟「Driving is fun」，句子裡面主詞的部份一定要是名詞，如果想放動詞，就先改寫成 +ing 動名詞，英文使用者就是習慣這樣溝通上面通通看不懂沒關係，反正知道各種程式語言，都是設計者與社群的主觀偏好，然後都能完成任務、各有不同長處短處就好 --- 最後，跟大家談一下函式的不同寫法 ``` function func1() { alert(1); } var func2 = () => { alert(2); } func1(); func2(); ``` ES6 之後有所謂的箭頭函式他跟傳統寫法的主要差別，在於對於 `this` 關鍵字的認定在工程師主流推崇 OOP（物件導向程式設計）的年代，`this` 的使用很巧妙、也很讓人困惑實務上現在寫前端，比較少用 OOP 寫法，稍微偏向 FP（函數式程式設計）多一點，所以 `this` 問題變比較小我不想細談 `this` 以及兩種函式寫法的差別，在本系列教材內容以及作業中，隨便混著用，都可以反正改天你真的遇到問題，大概知道要往這方向研究就是了 ## 課後作業請使用 https://jsfiddle.net 用以下 html 為基礎（你可以稍微修改），id 跟 class 之類的你可以自由決定 ``` simple counter: <button>-</button> <button>+</button> <hr> simple calculator: <input type="text" /> <input type="text" /> <button>加/減/乘/除</button> ``` 這邊有兩個小型應用程式第一個應用程式，是簡單的計數器 - 第一次點擊 + 號按鈕，會用 alert 跳出 1 - 第二次點擊 + 號按鈕，會用 alert 跳出 2 - 依此類推，每次點 + 都會遞增，每次點 - 都會遞減 - 你會宣告一個全域變數，記錄這個累積的值，才能完成此功能第二個應用程式，是簡單的計算機 - 有兩個欄位可以輸入數字 - 點擊按鈕，連續跳出四個 alert，分別顯示「加/減/乘/除」的計算結果 - 例如：輸入 6 與 2 -> alert 顯示 8 -> alert 顯示 4 -> alert 顯示 12 -> alert 顯示 3 - 你會宣告兩個區域變數，分別記錄兩個輸入的值，接著用來進行四種計算，才能完成此功能 --- 做出以上功能，你就完成這次的課程目標了！

0個讚 19留言 1,012瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）