摘要：前端如何防范跨站腳本攻擊是一種攻擊者向用戶的瀏覽器注入惡意代碼腳本的攻擊。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā)事件。
前端如何防范XSS
跨站腳本攻擊, 是一種攻擊者向用戶的瀏覽器注入惡意代碼腳本的攻擊。
XSS攻擊的種類：
持續(xù)型XSS攻擊
攻擊者輸入惡意代碼并通過評論或表單提交等方式將其提交到網(wǎng)站, 而網(wǎng)站的后端卻對用戶的數(shù)據(jù)不做任何處理進(jìn)而直接存入數(shù)據(jù)庫, 當(dāng)其他用戶訪問該網(wǎng)站并且需要請求網(wǎng)站的評論數(shù)據(jù)時(shí)網(wǎng)站后端直接從數(shù)據(jù)庫中取出帶有惡意代碼的數(shù)據(jù)返回給用戶頁面此時(shí)用戶就會遭受到攻擊, 比如while { alert( "Attack!" ) } 這樣的惡意腳本。
反射型XSS攻擊
用戶向網(wǎng)站發(fā)送get請求某個(gè)網(wǎng)頁的url, 但用戶點(diǎn)開的是帶攻擊的url類似于:
/* http://xxx?name= <-- evil url
ctx.render("index.html", { name:name });
--index.html--
${name}
*/
基于DOM的XSS攻擊
它是反射型攻擊的一種, 此時(shí)服務(wù)器返回的頁面是正常的, 只是頁面在執(zhí)行JS時(shí)會將惡意腳本一并執(zhí)行。
/*
http://xxx?name= <-- evil url
--index.js--
var name = getparm("name");
document.querySelector("div").innerHTML = name;
*/
防止XSS注入的一些方法：
function htmlEncode(html) {
var sub = document.createElement("div");
sub.textContent != null ? sub.textContent = html : sub.innerText = html;
var output = sub.innerHTML;
sub = null;
return output;
}
//既然有轉(zhuǎn)義當(dāng)然也有反轉(zhuǎn)義的方法
function htmlDecode(text) {
var sub = document.createElement("div");
sub.innerHTML = text;
var output = sub.textContent || sub.innerText;
sub = null;
return output;
}
/*
@ escape()
@ encodeURI()
@ encodeURIComponent()
-- 對應(yīng)的解碼方法 --
@ unescape()
@ unencodeURI()
@ unencodeURIComponent()
*/
CSP的實(shí)質(zhì)就是白名單制度, 開發(fā)者明確告訴客戶端, 哪些外部資源可以加載和執(zhí)行, 等同于提供白名單。它的實(shí)現(xiàn)和執(zhí)行全部由瀏覽器完成, 開發(fā)者只需提供配置, CSP大大增強(qiáng)了網(wǎng)頁的安全性。
有兩種方法可以啟用CSP, 一種是通過設(shè)置HTTP頭信息的Content-Security-Policy 字段, 另外一種是通過網(wǎng)頁中的 標(biāo)簽。
CSP通過設(shè)置限制選項(xiàng)來提供我們所需的白名單：
/* @ script-src: 外部腳本 @ style-src: 樣式表 @ img-src: 圖像 @ media-src: 媒體文件 ( 音頻和視頻 ) @ font-src: 字體文件 @ object-src: 插件 ( 比如Flash ) @ child-src: 框架 @ connect-src: HTTP 連接 ( 通過 XHR、WebSockets、EventSource等 ) ...... */
default-src 用來設(shè)置上面每個(gè)選項(xiàng)的默認(rèn)值:
Content-Security-Policy: default-src "self" // 限制所有的外部資源, 只能從當(dāng)前域名加載
其他的一些限制：
/* @ block-all-mixed-content：HTTPS 網(wǎng)頁不得加載 HTTP 資源（瀏覽器已經(jīng)默認(rèn)開啟） @ upgrade-insecure-requests：自動(dòng)將網(wǎng)頁上所有加載外部資源的 HTTP 鏈接換成 HTTPS 協(xié)議 @ sandbox：瀏覽器行為的限制，比如不能有彈出窗口等 */
使用report-uri 還可以記錄XSS注入的行為并報(bào)告給指定的url：
Content-Security-Policy: default-src "self"; ...; report-uri https://retroastro.com;
設(shè)置多個(gè)值, 用空格分隔：
Content-Security-Policy: script-src "self" https://host1.com https://host2.com
script-src 中的一些特殊值：
/*
@ nonce: 每次HTTP回應(yīng)給出一個(gè)授權(quán)token，頁面內(nèi)嵌腳本必須有這個(gè)token，才會執(zhí)行。
@ hash: 列出允許執(zhí)行的腳本代碼的Hash值，頁面內(nèi)嵌腳本的哈希值只有吻合的情況下，才能執(zhí)行。
*/
/* nonce值的例子：
Content-Security-Policy: script-src "nonce-EDNnf03nceIOfn39fn3e9h3sdfa"
設(shè)置的nonce值要與內(nèi)嵌腳本中的nonce相等才會執(zhí)行代碼
*/
/* hash值的例子：
Content-Security-Policy: script-src "sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng="
服務(wù)器給出一個(gè)允許執(zhí)行代碼片段的hash值, 對應(yīng)的代碼才會執(zhí)行, 因?yàn)閔ash值相等。
*/
JavaScript的各種寬高屬性
網(wǎng)上看到有一篇博客講的挺好挺全面的, 有需要的可以去看看：
戳這里看JS中的各種寬高圖解
場景：實(shí)現(xiàn)bilibili右側(cè)導(dǎo)航欄的切換導(dǎo)航效果。
// HTML
Live
Comics
Drama
Native
Music
Dance
Game
Science
Life
Kichiku
Advertise
Entertain
Fashion
TVshows
Film
Movies
// CSS
.elevator-module{
position:fixed;
top:20px;
left:50%;
margin-left:590px;
transition:all .4s ease;
z-index:10;
}
.elevator-module .nav-list{
position:relative;
background-color:#f6f9fa;
border:1px solid #e5e9ef;
overflow:hidden;
border-radius:4px;
}
.elevator-module .nav-list .item{
width:48px;
height:32px;
line-height:32px;
text-align:center;
transition:all .3s;
cursor:pointer;
}
.elevator-module .nav-list .item.on, .elevator-module .nav-list .item:hover{
background-color:#00a1d6;
color:#fff;
}
.nav-list .item.active{
color:#fff;
background:#00a1d6;
}
.elevator-module .s-line{
position:relative;
border-left:1px solid #ffffd;
border-right:1px solid #ffffd;
height:9px;
width:30px;
margin:0 auto;
}
.elevator-module .back-top:hover{
background-color:#00a1d6;
border-color:#00a1d6;
}
.elevator-module .back-top{
position:relative;
display:block;
cursor:pointer;
height:50px;
background-color:#f6f9fa;
overflow:hidden;
border: 1px solid #e5e9ef;
border-radius:4px;
text-align: center;
}
.circle{
display:inline-block;
width:30px;
height:30px;
margin-top:10px;
border-radius:50%;
background:#ffafc9;
}
.part{
width:800px;
height:600px;
margin:20px auto;
background:#00a1d6;
text-align:center;
line-height:600px;
font-size:13em;
font-family:Comic Sans MS;
color:#fff;
font-weight:700;
border-radius:4px;
}
.container{
width:1160px;
margin:0 auto;
position:relative;
}
// JavaScript
var ElevatorModule = {
init() {
this.scrollEvent();
},
scrollEvent() {
var elevator = document.querySelector(".elevator-module");
var navList = document.querySelector(".nav-list");
var items = document.querySelectorAll(".nav-list .item");
var modules = document.querySelectorAll(".part");
var backtop = document.querySelector(".back-top");
window.addEventListener("scroll", slipper);
navList.addEventListener("click", moveTo);
backtop.addEventListener("click", fly);
function slipper() {
for ( var item of items ) {
var rect = item.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop;
var item_top = rect.top + scrollTop; //獲取右側(cè)導(dǎo)航每個(gè)分區(qū)上方到頁面最頂部的距離
var fetch = getLocation();
var id = item.getAttribute("data-id");
if ( item_top >= fetch[id] - 100 ) { //移到哪個(gè)分區(qū)右側(cè)的hover就停留在哪
items.forEach((el) => {
el.classList.remove("active");
})
item.classList.add("active");
}
}
}
var flag = true;
//定位到指定分區(qū)
function moveTo() {
var e = window.event;
items.forEach((item) => {
item.classList.remove("active");
})
if ( e.target && e.target.nodeName == "DIV" ) {
var id = e.target.getAttribute("data-id");
e.target.classList.add("active");
var fetch = getLocation();
if ( flag ) {
AnimationFrame(fetch[id]);
id ? flag = false : flag = true;
//設(shè)置節(jié)流效果, 即在運(yùn)動(dòng)的過程中不允許再次觸發(fā)AnimationFrame函數(shù)
}
}
}
//scrollTop過渡
function AnimationFrame(future_top) {
let current_top = document.documentElement.scrollTop;
var timer = setInterval( () => {
if ( current_top > future_top ) {
current_top -= 60;
document.documentElement.scrollTop = current_top;
} else if ( current_top < future_top ) {
current_top += 60;
document.documentElement.scrollTop = current_top;
}
if ( current_top >= future_top - 30 && current_top <= future_top + 30 ) {
//當(dāng)移動(dòng)到指定的范圍內(nèi)時(shí)直接定位到對應(yīng)的位置
document.documentElement.scrollTop = future_top;
clearInterval(timer);
flag = true;
}
},10)
}
//獲取pageY
function getLocation() {
var arr = [];
modules.forEach((module) => {
var thing = pageY(module);
arr.push(thing);
})
return arr;
}
//獲取頁面中間每個(gè)分塊上方到頁面最頂部的距離
function pageY(el) {
if ( el.offsetParent ) {
return el.offsetTop + pageY(el.offsetParent);
} else {
return el.offsetTop;
}
}
//平滑返回頁面頂部
function fly() {
cancelAnimationFrame(timer);
var timer = requestAnimationFrame( function fn() {
var top = window.pageYOffset;
if ( top > 0 ) {
document.documentElement.scrollTop = top - 80;
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
}
})
}
}
}
ElevatorModule.init();
PS：
一些需要注意的常見js事件屬性：
event.stopPropagation()
終止事件在傳播過程的捕獲、目標(biāo)處理或起泡階段進(jìn)一步傳播。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。
event.preventDefault()
該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認(rèn)動(dòng)作（如果存在這樣的動(dòng)作）。
不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。對應(yīng)mouseout
只有在鼠標(biāo)指針穿過被選元素時(shí)，才會觸發(fā) mouseenter 事件。對應(yīng)mouseleave
參考文章：
https://www.cnblogs.com/caizh... XSS
https://www.cnblogs.com/zzgbl... 轉(zhuǎn)義方法
http://www.ruanyifeng.com/blo... CSP
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107658.html
摘要：禁止內(nèi)聯(lián)腳本執(zhí)行規(guī)則較嚴(yán)格，目前發(fā)現(xiàn)使用。合理使用上報(bào)可以及時(shí)發(fā)現(xiàn)，利于盡快修復(fù)問題。因?yàn)槭录哪繕?biāo)元素一層層冒泡至對象。允許給一個(gè)事件注冊多個(gè)監(jiān)聽。表示在捕獲階段觸發(fā)，表示在冒泡階段觸發(fā)。 關(guān)于【Step-By-Step】 Step-By-Step (點(diǎn)擊進(jìn)入項(xiàng)目) 是我于 2019-05-20 開始的一個(gè)項(xiàng)目，每個(gè)工作日發(fā)布一道面試題。每個(gè)周末我會仔細(xì)閱讀大家的答案，整理最一份...
摘要：要錢的簡單理解百度的廣告就是不用錢的自己配置提高搜索引擎的權(quán)重是一種技術(shù)，主要是用于提高網(wǎng)站瀏覽量而做的優(yōu)化手段為什么需要我們搜一下微信公眾號發(fā)現(xiàn)排名是有先后的，博客園都是靠前的。 CDN 什么是CDN 初學(xué)Web開發(fā)的時(shí)候，多多少少都會聽過這個(gè)名詞->CDN。 CDN在我沒接觸之前，它給我的印象是用來優(yōu)化網(wǎng)絡(luò)請求的，我第一次用到CDN的時(shí)候是在找JS文件時(shí)。當(dāng)時(shí)找不到相對應(yīng)的JS文件...
摘要：要錢的簡單理解百度的廣告就是不用錢的自己配置提高搜索引擎的權(quán)重是一種技術(shù)，主要是用于提高網(wǎng)站瀏覽量而做的優(yōu)化手段為什么需要我們搜一下微信公眾號發(fā)現(xiàn)排名是有先后的，博客園都是靠前的。 CDN 什么是CDN 初學(xué)Web開發(fā)的時(shí)候，多多少少都會聽過這個(gè)名詞->CDN。 CDN在我沒接觸之前，它給我的印象是用來優(yōu)化網(wǎng)絡(luò)請求的，我第一次用到CDN的時(shí)候是在找JS文件時(shí)。當(dāng)時(shí)找不到相對應(yīng)的JS文件...
摘要：禁止內(nèi)聯(lián)腳本執(zhí)行規(guī)則較嚴(yán)格，目前發(fā)現(xiàn)使用。典型的攻擊流程受害者登錄站點(diǎn)，并保留了登錄憑證。站點(diǎn)接收到請求后，對請求進(jìn)行驗(yàn)證，并確認(rèn)是受害者的憑證，誤以為是無辜的受害者發(fā)送的請求。攻擊完成，攻擊者在受害者不知情的情況下，冒充受害者完成了攻擊。 隨著互聯(lián)網(wǎng)的發(fā)展，各種Web應(yīng)用變得越來越復(fù)雜，滿足了用戶的各種需求的同時(shí)，各種網(wǎng)絡(luò)安全問題也接踵而至。作為前端工程師的我們也逃不開這個(gè)問題，今天一起...
閱讀 647·2021-11-24 09:39
閱讀 3489·2019-08-30 15:53
閱讀 2528·2019-08-30 15:44
閱讀 3246·2019-08-30 12:54
閱讀 2216·2019-08-29 12:23
閱讀 3312·2019-08-26 14:05
閱讀 2113·2019-08-26 13:36
閱讀 3445·2019-08-26 13:33
