隨著WEB應用開發的普及,Javascript已成為web應用最為重要的語言之一。在前端開發中,Javascript遇到的問題就多了起來,最為棘手的問題是防止XSS攻擊。一種有效的方式是實現偽url。
偽Url其實也就是一個字符串,當用戶點擊該字符串時,執行相關js代碼。一般而言,偽url會被插入到HTML文檔的某個元素(如span,div等)的innerHTML中。示例代碼如下:
<div onclick="alert('hello,world!')">Click me!</div>
實際上,如果想要使得偽url更加靈活,我們可以使用JavaScript的事件來定義偽url。
<a href="javascript:void(0)" onclick="alert('hello,this is a fake url!')">Click me!</a>
此處我們將“javascript:void(0)”設置為href。當用戶點擊該鏈接時將不會發送任何請求,但是會觸發onclick事件。可以將任意javascript代碼作為onclick事件的處理程序。
在實際的開發中,我們通常需要根據需要在偽url上添加相應的參數,比如URL跟蹤、添加產品、用戶特定定制等。這時候我們需要在偽url中使用變量參數。
<a href="javascript:void(0)" onclick="foo('param1','param2')">Click me!</a> <script type="text/javascript"> function foo(param1, param2) { alert(param1+','+param2); } </script>
上述代碼中,使用了foo函數,該函數接受兩個參數param1和param2,并彈出相應的參數值。
另外,我們還可以使用ES6新特性---模板字符串,對偽url進行更加簡潔的定義。
<a href="`javascript:void(0)`" onclick="foo(`param1`,`param2`)">Click me!</a> <script type="text/javascript"> function foo(param1, param2) { alert(param1+','+param2); } </script>
如此一來,我們便可以在偽url中隨意添加需要的參數,但是也要注意,這種方式容易被攻擊者利用,進行XSS攻擊。因此,在使用偽url時,一定要加以注意。
綜上所述,偽url是Javascript中很常見的概念,可以為我們提供很大的靈活性。但是我們也需要注意安全性,不要被攻擊者利用造成損失。