ASP.NET Core托管网站运行脚本及ASP.NET跨站点击跟踪技术问询

首先得明确：要是目标网站不是你维护的，浏览器的同源策略会彻底阻止你在对方网站的上下文里运行脚本，别想着硬来，换思路从跳转环节入手跟踪才是正道。

方法1：中间页面跳转（最可靠的方式） #

建一个专门的跳转页面，用户点链接时先跳这儿，记录完点击事件再跳去目标网站。

步骤： #

1. 加一个跳转处理的Razor页面（比如Redirect.cshtml）：

@page "/redirect"
@model RedirectModel
@{
    var targetUrl = Request.Query["url"];
    if (!string.IsNullOrEmpty(targetUrl))
    {
        // 服务器端记录点击：写进数据库、日志，或者发去统计服务
        _logger.LogInformation($"用户跳转链接：{targetUrl}");
        // 也可以调用统计工具的服务器端API，比如Google Analytics Measurement Protocol
    }
}

<script>
    // 客户端也可以加跟踪事件，比如用统计工具的JS SDK
    window.gtag?.('event', 'link_click', {
        'target_url': '@targetUrl'
    });

    // 延迟100毫秒跳转，确保跟踪请求发完
    setTimeout(() => {
        window.location.href = '@targetUrl';
    }, 100);
</script>

对应的页面模型：

public class RedirectModel : PageModel
{
    private readonly ILogger<RedirectModel> _logger;

    public RedirectModel(ILogger<RedirectModel> logger)
    {
        _logger = logger;
    }

    public void OnGet()
    {
        // 服务器端跟踪逻辑也可以写在这儿
    }
}

2. 修改原跳转链接，指向这个中间页面：

<!-- 原来的链接：<a href="https://目标网站.com">去目标网站</a> -->
<a href="/redirect?url=https%3A%2F%2F目标网站.com">去目标网站</a>

记得对目标URL做URL编码，避免参数解析出错。

方法2：客户端事件跟踪（无中间页面，体验更好） #

用户点击链接时，先发跟踪请求再跳转。这里推荐用navigator.sendBeacon，它专门解决页面卸载时请求丢失的问题：

<a href="https://目标网站.com" onclick="handleLinkClick(event, this)">去目标网站</a>

<script>
function handleLinkClick(event, link) {
    // 先阻止默认跳转
    event.preventDefault();
    const targetUrl = link.href;

    // 发送跟踪请求，sendBeacon会在后台完成，不受页面卸载影响
    navigator.sendBeacon('/api/track-click', JSON.stringify({
        targetUrl: targetUrl,
        clickTime: new Date().toISOString()
    }));

    // 延迟50毫秒跳转，确保请求发出（其实sendBeacon不需要，但保险起见）
    setTimeout(() => {
        window.location.href = targetUrl;
    }, 50);
}
</script>

然后在服务器端加一个接收跟踪数据的API：

[ApiController]
[Route("api/[controller]")]
public class TrackClickController : ControllerBase
{
    private readonly ILogger<TrackClickController> _logger;

    public TrackClickController(ILogger<TrackClickController> logger)
    {
        _logger = logger;
    }

    [HttpPost]
    public IActionResult Post([FromBody] ClickTrackData data)
    {
        // 记录数据到数据库或日志
        _logger.LogInformation($"用户点击：{data.TargetUrl} 时间：{data.ClickTime}");
        return Ok();
    }
}

public class ClickTrackData
{
    public string TargetUrl { get; set; }
    public string ClickTime { get; set; }
}

这种方法用户体验更好，但如果用户在请求发送前强制关闭页面，还是可能丢数据，不过sendBeacon已经比普通AJAX可靠多了。

方法3：特殊情况——目标网站允许嵌入脚本 #

要是你和目标网站的运维方有合作，他们允许你加第三方脚本，那可以把跟踪脚本嵌进去，但这种情况非常少见。比如让对方在页面里加你的统计脚本，或者用iframe嵌套（但iframe也受同源策略限制，除非对方设置了允许）。绝大多数情况还是优先用前两种方法。

内容的提问来源于stack exchange，提问作者Samavi