捕获锚标记

Question

我编写了一个覆盖原生 alert() 方法的 JavaScript 代码。 我需要捕获包含 alert() 执行代码的 HTML 元素。 前两个案例是例子。我已经在 console.log 中打印了元素。

案例 1 - 捕获<script> 标签：

HTML: <script> alert(1); </script>

JS：

window.alert = function()
{ 
    console.log(document.currentScript); // <script> is printed
}

案例 2 - 捕获<img> 标签：

HTML: <img src='1' onerror="alert(1)">

JS:

window.alert = function()
{ 
    console.log(arguments.callee.caller.arguments[0].target);
    // arguments.callee --> console.log()
    // arguments.callee.caller --> onerror(event) {}
    // arguments.callee.caller.arguments[0] --> event
    // arguments.callee.caller.arguments[0].target --> <img>
}

案例问题 - 捕获<a> 标签：

HTML: <a href="javascript:alert(1);">Click here for alert</a>

JS:

window.alert = function()
{ 
    console.log( // how to find <a> element) 
}

请不要建议我通过包含 <a> 或类似的 ID 来修改 HTML。考虑到 HTML 是纯静态的，我无法修改任何内容。我可以只添加一个 JavaScript，但我只是想知道如何做到这一点。

Answer 1

您也许可以找到此类警报并将其转换为点击事件。像这样的东西。请注意，单击事件警报调用可能会更加复杂，并且可能会使用 eval()，但我将其留给您冒险。

window.alert = (function(){
  var selected = document.querySelectorAll("a[href^='javascript:alert('");

  Array.from(selected).forEach(function(item){
    var old = item.href
    item.addEventListener("click", function(){ alert(old.substring(11)); });
    item.href="javascript:void(0);";
  });

  var _alert = function(msg) {
    console.log(msg);
    console.log(arguments.callee.caller.arguments[0].target);
  };
  
  return _alert;
})();

<a href="javascript:alert(1);">test</a>

Answer 2

您可以在window 使用load 事件；选择器"a[href='javascript:alert(1);']" 处的click 事件以获取href 属性的值；在click 处理程序中调用event.preventDefault()； String.prototype.match() 创建具有 href 属性的值数组；全局定义匹配； new Function(); Function.prototype.call() 将 this 设置为 <a> 元素；在选择器上调用.click() ：<a> 元素与.match() 返回的匹配参数

window.alert = function() {
  console.log(arguments, this)
}

window.addEventListener("load", function() {

  a = document.querySelector("a[href='javascript:alert(1);']");
  a.addEventListener("click", function(event) {
    event.preventDefault();
    var data = this.href.replace(/javascript/, "");
    matches = data.match(/\w+(?=\()|(\(.*\))/g);
    matches[1] = matches[1].replace(/\(|\)/g, "");
    var fn = new Function(matches[0] + ".call(a, matches[1])");
    fn();
  });

  a.click();

});

<a href="javascript:alert(1);"></a>

Answer 3

不要使用 href 属性调用 JavaScript。应该避免。不推荐使用。请改用 onclick 事件。见这里：https://stackoverflow.com/a/10242595/5969411

<script>
    window.alert = function(msg, element) {
        console.log('Msg:', msg);
        console.log('Element:', element);
    };
</script>
<a href="#" onclick="alert(1, this);return false;">Test 1</a>
<a href="#" onclick="alert(2, this);return false;">Test 2</a>
<a href="#" onclick="alert(3, this);return false;">Test 3</a>

我已经从上面的 onclick 事件中返回 false 以阻止锚点转到 '#' URL 指令，但如果你愿意，你可以在这里轻松地返回 true。