3af是Web Application Audit和Attack Framework的簡寫。它是開源的基于Python的Web漏洞掃描工具。
w3af有GUI版本也有命令行版本,功能都一樣。本文分別介紹怎么使用這兩個不同版本掃描網站漏洞。
w3af GUI版本
啟動W3af:
# w3af_gui
在Profiles窗口中選擇full_audit。就是配置使用哪些插件。
在plugins窗口中,打開crawl,勾選其中的web_spider,并勾選only_forward選項。
告訴W3af生成html格式的結果,在output窗口中勾選html_file。
在Target輸入框中輸入目標地址,點擊Start開始掃描:
掃描完成之后,切換到Results窗口查看掃描到的漏洞,或查看~/resule.html文件:
SQL注入攻擊參考另外一篇文章:
w3af命令行版本
w3af GUI版本并不穩定,我在執行上面掃描時卡死了兩次。我建議使用命令行版本。
w3af的命令行版本和GUI版本功能完全一樣,上面掃描用命令行:
內容來源于@什么值得買APP,觀點僅代表作者本人 |作者:突突兔too禿
老婆做進出口的,前一段發了一個知識貼給我,以為是要打印,搞了半天是因為網頁不讓復制,所以分享給我。
這可笑壞我了,還有什么方法能突破“禁止復制”禁術,當然唯我漩渦鳴人的影分身之術了。看我如何活學活用,復制粘貼。
實際上,我覺得老婆大人的方法是最實際的了。這絕不僅僅是出于對老婆大人的尊重,而是實事求是。不讓復制就不復制唄。我也就平時存起來備查。當然,如果實在找不到人分享,那就分享給“文件傳輸助手”吧。
有一種孤獨叫智能發給穿書助手
同樣的寂寞(劃掉)方法,我們也可以通過QQ把地址分享給“我的Android手機”。
比方法1稍微高級一點的是,將有關內容在微信中打開后,選擇“收藏”,這樣以后就可以直接在我的“收藏”中找到了。
當然,以上方法還只是迂回作戰,說白了禁術還在,只是找了個方法替代。真的如果需要復制的時候就白瞎了。
使用Chrome瀏覽器或者360瀏覽器,然后直接選擇部分文字,鼠標按住左鍵,就可以把文字拖拽到QQ對話框了。
step1
step2
同樣是在360瀏覽器上面,鼠標選擇要復制的文字,然后右擊鼠標,選擇保存為文本。
step1
再選擇一個文件夾保存。
step2
打開指定文件夾中的TXT文檔,就能得到相應的文字了。
如果要評論這種生拉硬拽的方法,那就是霸氣。
當然,也有不足,每一次都要這么拖拽,鼠標手是跑不掉的了。而且并沒有辦法一次性全部選擇。
step1:使用QQ對話框的截圖工具。
step2:然后右擊圖片,選擇提取圖中文字。
step3:點擊下載。
step4:就可以在指定文件夾中找到picture和result兩個文件。馬上就能下載了。
當然,這個和方法3一樣,不能全選,需要反復的復制粘貼。
使用手機自帶功能進行滾動截屏后,再打開微信小程序“傳圖識字”,然后進行orc識字,就可以復制了。
step1:我的手機是華為的,使用指關節寫一個“S”,就可以滾動截屏。
step2:然后進入傳圖識字后,點擊“從相冊中選取”。
step3:點擊全選,然后復制,就可以在對話框中張貼了。
不過需要注意的是,過長的圖片也可能出現識別失敗。像這次,我就只選擇了一半。而orc識別最大的問題,還是準確性。只能安慰自己就當是檢查作業,外加復習了唄。
step1:使用手機edge,然后在網址中點擊閱讀模式;
step2:選擇“全選”-“復制”;
step3:再粘貼到備忘錄中。
同樣的方式,也可以在UC上使用。
比起edge和UC還要使用閱讀模式,夸克直接跳過了第一步。
難怪這款手機App會受到大家的喜歡。
在谷歌瀏覽器上打開網頁,點擊“F12”,又或者在網頁上點擊右鍵,選擇“檢查”。
然后再選擇“setting”或者直接按“F1”,然后找到debugger-disable Javascript,勾選,就可以復制粘貼了。
不過,記得用完取消勾選disable-Javascript,需要的時候才開啟。
總結一下,其實無非就是三種方法,一種是聽之任之,一種是使用其他工具進行orc識別,最后一種就是破壞網頁的規則。以上的方法大部分也是小白級別,還沒涉及到油猴腳本等等。但是貴在實用,平時有文案撰寫、論文寫作等需求的值友歡迎收藏,畢竟用的時候才能記得住。
Zag 和 PandaCSS 都是出自 chakra 團隊之手,Zag 聚焦于處理組件的邏輯,而 PandaCSS 聚焦于通過 ts 來維護樣式,將兩者進行搭配會有怎么樣的使用體驗呢?這篇文章將繼續以 vuesax 中 checkbox 組件的樣式作為參考,結合 Zag 和 PandaCSS 進行 vue3 版本的重構,實現一個超絲滑的勾選框組件。
Zag 中將 Checkbox 分為三個組成部分:
我們首先在 Zag Checkbox 文檔中復制 JSX 的實例代碼:
import * as checkbox from "@zag-js/checkbox"
import { normalizeProps, useMachine } from "@zag-js/vue"
import { defineComponent, h, Fragment, computed } from "vue"
export default defineComponent({
name: "Checkbox",
setup() {
const [state, send]=useMachine(checkbox.machine({ id: "checkbox" }))
const apiRef=computed(()=>
checkbox.connect(state.value, send, normalizeProps),
)
return ()=> {
const api=apiRef.value
return (
<label {...api.rootProps}>
<span {...api.labelProps}>
Input is {api.isChecked ? "checked" : "unchecked"}
</span>
<div {...api.controlProps} />
<input {...api.hiddenInputProps} />
</label>
)
}
},
})
這段代碼使用了 useMachine 函數創建了一個狀態機,并且寫了一個無樣式的基礎 checkbox 結構:
接下來我們為 checkbox 組件補充樣式.
想要實現絲滑的勾選框效果,最直觀的是打勾的動畫。這個效果可以通過 SVG 或者純 css 實現,這里我使用的是 css 來實現的。:
首先我們要想想如何實現一個勾勾的效果,??由一長一短兩個斜邊組成,那么我們只需要放置一個矩形,設置一定的旋轉角度,并設置其中的兩個邊框,就能實現一個??的形狀:
代碼實現如下:
import { defineComponent } from "vue";
import { css, cx } from "@/styled-system/css";
const IconCheck=defineComponent({
props: {
color: {
type: String,
default: css({ colorPalette: "gray" }),
},
size: {
type: String,
default: css({ colorPalette: "gray" }),
},
customCSS: {
type: String,
},
},
setup(props) {
return ()=> (
<i
class={cx(
css({
display: "flex",
alignItems: "center",
justifyContent: "center",
}),
props.customCSS,
)}
>
<div
class={css({
position: "relative",
width: "80%",
height: "40%",
transform: "rotate(-45deg)",
})}
>
<div
class={css({
position: "absolute",
left: "0",
width: "full",
height: "full",
borderLeft: "2px solid white",
animation: "checkShort 0.15s",
})}
/>
<div
class={css({
position: "absolute",
left: "0",
width: "full",
height: "full",
borderBottom: "2px solid white",
animation: "checkLong 0.5s",
})}
/>
</div>
</i>
);
},
});
export default IconCheck;
上面這段代碼中,定義了一個矩形,寬高分別為最外層容器的 80% 和 40%,transform: "rotate(-45deg)", 則設置了矩形的旋轉角度,內部放置兩個與矩形寬高一致的容器,分別設置 borderLeft 和 borderBottom ,這樣就組成了一長一短兩條線。
這里之所以需要在內部放兩個容器單獨設置邊框,而不是直接在矩形設置邊框,是為了更好的實現動畫效果,長短邊分別設置了兩個持續時間不同的動畫 checkShort 0.15s 和 checkLong 0.5s:
checkShort: {
"0%": {
height:0,
},
"100%":{
height: "full",
}
},
checkLong: {
"0%": {
width: 0,
},
"30%":{
width: 0,
},
"100%": {
width: "full",
}
}
短邊從最開始就執行動畫,持續時間為長邊動畫的 30%,長邊則在 0-30% 時不執行,30% 之后開始執行,這樣就能實現短邊動畫執行完成后,長邊動畫再執行的效果。
之所以不使用 animation-delay 去延遲執行長邊動畫,是因為這種方式會導致動畫延遲執行前,長邊會先展示出來,效果就不對了。如果要使用這種方式還得單獨做一些動畫延遲前的隱藏處理,會比較麻煩:
為了讓用戶更容易感知勾選框是可以交互的,我們為勾選框增加未勾選和關狀態的 hover 效果。
未勾選狀態的 hover 效果,默認只有灰色邊框,鼠標懸浮后變為灰色背景:
這里有個注意點,我們鼠標懸浮在勾選框的最外層,也可以觸發內層的 hover 樣式,如果直接使用 hover 效果是沒法做到的,這樣只能鼠標懸浮在邊框內才能觸發。
如果我們沒有使用任何樣式庫,實現這個效果可以通過維護一個 鼠標是否 hover 的狀態,并通過 onMouseEnter 和 onMouseLeave 來更新這個狀態,再在內層根據這個狀態動態渲染樣式。
但這里我們可以使用 pandaCSS 的 group 選擇器來實現。
首先在勾選框最外層元素增加 group 類名:
<label
{...api.rootProps}
class={[
css({
display: "flex",
alignItems: "center",
cursor: "pointer",
}),
+ "group",
]}
>
然后在內層的 control 元素增加基礎樣式:
<div
{...api.controlProps}
class={css({
width: "24px",
height: "24px",
borderRadius: "8px",
border: api.isChecked
? "none"
: "token(colors.gray.200) solid 2px",
transition: "all 0.3s",
marginRight: "4px",
flexShrink: "0",
_groupHover: {
background: "gray.200",
},
})}
>
// ...
</div>
這里的 _groupHover 即為 group 選擇器,當帶有 group 類名的元素觸發 hover 時,內部的元素都可以使用 _groupHover 設置特定樣式。這樣我們就實現了前文圖中的效果。
在勾選時,會有一個藍色色塊放大漸出的效果,我們先來實現這個樣式。
<Transition
enterFromClass={css({
transition: "all 0.2s",
transform: "scale(0.5)",
opacity: "0",
})}
enterToClass={css({
transition: "all 0.2s",
transform: "scale(1)",
opacity: "1",
})}
leaveToClass={css({
transition: "all 0.2s",
transform: "scale(0.5)",
opacity: "0",
})}
>
{api.isChecked && (
<div
class={cx(
props.color,
css({
width: "full",
height: "full",
background: "colorPalette.600",
borderRadius: "inherit",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.3s",
}),
)}
>
<IconCheck
customCSS={css({
width: "18px",
height: "18px",
})}
/>
</div>
)}
</Transition>
這里我們使用 vue 中的 Transition 組件來實現動畫效果,通過改變scale 和 opacity 實現元素大小和透明度的過渡動畫,內部包裹著勾選的圖標。
實現了勾選的效果,繼續實現勾選后的 hover 樣式。勾選后在 hover 時,勾選框的外層有一個與主題色相同的外層陰影效果:
這里我們依然使用 group 選擇器來設置 hover 樣式:
<div
class={cx(
props.color,
css({
width: "full",
height: "full",
background: "colorPalette.600",
borderRadius: "inherit",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.3s",
+ _groupHover: {
+ boxShadow:
+ "0px 3px 15px 0px color-mix(in srgb, token(colors.colorPalette.600) 40%, transparent)",
+ },
}),
)}
>
<IconCheck
customCSS={css({
width: "18px",
height: "18px",
})}
></IconCheck>
</div>
在陰影效果的代碼中 0px 3px 15px 0px color-mix(in srgb, token(colors.colorPalette.600) 40%, transparent) ,前面幾個設置陰影大小的參數很容易理解,但是后面陰影顏色的實現大家可能比較陌生,單獨解釋一下:
我這里用法的含義是在 srgb 的色彩模式下,將主題色(token(colors.colorPalette.600)) 與透明色(transparent),以 40% 的比例進行混合,最終合成的顏色就是 40% 透明度的主題色。 color-mix() 函數是 pandaCSS 中推薦用戶用于為內置顏色設置透明度的方法,除此以外并沒有發現其他更簡便的方式。
最后我們完善一下勾選框的雙向綁定邏輯邏輯,
實現的代碼如下:
const [state, send]=useMachine(
checkbox.machine({
id: useId("checkbox"),
onCheckedChange(detail) {
emit("update:modelValue", detail.checked);
},
}),
);
const apiRef=computed(()=>
checkbox.connect(state.value, send, normalizeProps),
);
watch(
()=> props.modelValue,
()=> {
apiRef.value.setChecked(props.modelValue);
},
);
? 使用 Vue+Zag+PandaCSS 實現一個超絲滑的勾選框組件
原文鏈接:https://juejin.cn/post/7295954109404463155
*請認真填寫需求信息,我們會在24小時內與您取得聯系。