博文

[DOM]-11.XSS跨網站指令碼注意事項

-
innerHTML -方法：組完字串後，傳進語法進行渲染 -優點：效能快 -缺點：資安風險，要確保資料來源沒問題 craeteElement -方法 ：以DOM節點來處理 -優點：安全性高 -缺點：效能差 XSS(跨站指令攻擊)：蓄意用HTML標籤與JavaScript埋一些惡意程式碼來攻擊的動作 <textarea name="" id="content" cols="30" rows="10"></textarea> <input type="button" id="send" value="送出"> <div id="main"></div> document.querySelector('#send').onclick= function(){ var str = document.querySelector('#content').value; document.querySelector('#main').innerHTML = str; } 如在表單駭客可自行利用JavaScript的語法載入，例如在表單上打<script>alert('你被入侵了');</script>，可偷資料庫也可攻擊能力用JavaScript的語法去改寫成能載入的檔案進去，能亂塞JavaScript的語法，所以innerHTML盡量不要作成表單.可信任的資料如Open data等等可以使用innerHTML codepen
发表评论
阅读全文

六角學院-高雄資訊旅遊

-
終於將高雄資訊旅遊完成，做的過程蠻煎熬因為不停的想不停的看別人怎做的，畢竟自己的還沒做過題目高手都蠻多的， 雖然煎熬但是一個題目真的可以學到東西，蠻充實的..一開始還好但是碰到一個頁數監聽跟熱門監聽還有表單的監聽要融合起來真的蠻頭痛，熱門跟表單還好。就差在頁數監聽卡兩天的時間， 想一想不行找codepen看前輩們是怎麼做的模式，看到好幾個真的看得不是很懂，有一個的模式蠻特別以函式為順序先監聽在一個一個函式寫將每筆生成陣列最後顯現渲染，顯現渲染是一個函式這個函式也是共用，也在熱門監聽跟表單監聽做融合 然後再這兩個裡面放頁數監聽，後來才解決頁數的問題。因為真的不知道監聽裡面還可以放監聽而且函式可以共用也就是說熱門監聽跟表單監聽可以用一個函式來融合。真的感恩這位 大大的程式碼 完成
发表评论
阅读全文

[DOM]-10.createElement與for運用

-
在這裡與innerHTML的差異在於，innerHTML要用字串在for迴圈累加，累加後再以innerHTML將累加後的字串全都渲染出來。 createElement的for迴圈不需要字串，在for迴圈每一次跑一次迴圈就增加一次。在前一個[DOM]-9.createElement寫法有提過不會像innerHTML將先前的資料刪除。 <h1>每個農場的農夫名字</h1> <ul class="list"> </ul> var farms =[ { farmer:'卡斯伯', dog:['張姆仕','龐德'] }, { farmer:'查理', dog:['皮皮'] } ]; var el = document.querySelector('.list'); var farmLen = farms.length; for(var i=0; i<farmLen; i++){ var str = document.createElement('li'); str.textContent = farms[i].farmer; el.appendChild(str); } codepen
发表评论
阅读全文

[DOM]-9.createElement寫法

-
以DOM節點來處理，先以createElement來新增html的元素再以textContent寫入內容， 再以setAttribute新增元素掛入父元素加入子節點，在這裡不會像innerHTML會將先前的資料都刪除(同元素的標籤)， 但是這裡的寫法會比較長安全性高。 <h1 class="title"></h1> var str =document.createElement('em'); str.textContent ='123'; //增加子節點 str.setAttribute('class','blue'); document.querySelector('.title').appendChild(str); .blue{ color: blue; } codepen
发表评论
阅读全文

[DOM]-8.innerHTML與for運用

-
<h1>每個農場的農夫名字</h1> <ul class="list"></ul> var farms =[ { farmer:'卡斯伯', dog:['張姆仕','龐德'] }, { farmer:'查理', dog:['皮皮'] } ]; var el = document.querySelector('.list'); var farmLen = farms.length; var str =''; for(var i=0; i<farmLen; i++){ var content ='<li>'+farms[i].farmer+'</li>'; str +=content; } el.innerHTML=str; 如沒有用空字串累加是沒辦法列出兩筆li的資料，原因是innerHTML渲染之前會刪除原本的資料，利用空字串是累加完一次渲染出來 codepen
发表评论
阅读全文

[DOM]-7.innerHTML(下)

-
<ul class="list"></ul> var el = document.querySelector('.list'); var link ='http://www.google.com.tw'; var name = '查理'; el.innerHTML ='<li><a href="'+link+'">'+name+'</li>'; 1.如href以及文字內容設為變數，在寫入字串到innerHTML的字串裡面加入href以及文字內容需要加入'+變數+' codepen
发表评论
阅读全文

[DOM]-6.innerHTML(上)

-
<div id="main"></div> var el = document.getElementById('main'); var str = '<h1 class="blue">1234</h1>'; el.innerHTML = str+str; .blue{ color: blue; } 1.如在html的id="main"文字加Hello使用innerHTML會清空 2.Element html標籤拉進去在裡面使用innerHTML 3.textContent是新增文字的節點 codepen
发表评论
阅读全文