README

通过 CSS 分析用户交互，无需客户端 JavaScript。演示请访问 spycss.hcbogdan.com。

• 为什么？
• 因为我们能做到

如何工作

正如您可能所知，在 CSS 中，我们可以通过 url(resource) 属性添加外部资源。通常，这些资源只有在需要时才会加载。因此，我们可以创建跟踪用户交互的 HTML/CSS，并发送请求到我们的后端。

创建此库是为了简化跟踪 CSS 的创建。

如何使用

首先，使用 composer 安装库

composer require bogdaan/spycss

例如，您想跟踪链接的点击。我们可以使用 此片段 为您生成链接内的 CSS 和 HTML

<?php
// inside controller or DI:
$userId = 'get_from_cookie--OR--fetch_from_db';
$backendUrl = 'https://spy-css-backend/';
$s = new \SpyCss\SpyCss($userId, $backendUrl);

// inside you view, generates element:
// <a class="scsssXXXX" href="https://hcbogdan.com">Novikov Bogdan</a>
echo $s->builder()
    ->tag('a')
    ->content('Novikov Bogdan')
    ->attribute('href', 'https://hcbogdan.com')
    ->interactions([
        new \SpyCss\Interaction\Active('click_on_hcbogdan_com')
    ])
    ->get();

// generates special styles like:
// .scsssXXXX:active::after {content: url(https://spy-css-backend/userId/active/click_on_hcbogdan_com);}'
echo '<style>'.$s->extractStyles().'</style>';

您可以为 input type="text" 字段创建键盘记录器（片段在 jsfiddle）

<?php
// ... init SpyCss

// set alphabet
$logThisChars = 'abcdefgABCDEFG';

// create input field
echo $s->builder()
    ->tag('input')
    ->attribute('name', 'field')
    ->interactions([
        new \SpyCss\Interaction\Keylogger($logThisChars)
    ])
    ->get();

// generates special styles
echo '<style>'.$s->extractStyles().'</style>';

更多示例请参阅 spycss-demo

目录结构

./src/
├── Builder.php          # Tag builder with fluent interface
├── Interaction          #
│   ├── Active.php       # Track :active state
│   ├── Checked.php      # Track :checked state on input and option
│   ├── Focus.php        # Track :focus state
│   ├── Hover.php        # Track :hover state
│   ├── Keylogger.php    # Track key press on text fields
│   ├── Online.php       # Online tracking
│   ├── Pseudo.php       #
│   └── Valid.php        # Track :valid state
├── Interaction.php      # Base class for interactions
├── SpyCss.php           #
└── Util                 #
    └── Html.php         # Html tag helpers

待办事项

• 审查浏览器支持
• 更新演示
• 添加更多交互
• 实现 twig 辅助函数

阅读更多

• 后端 API
• 演示源代码
• Habrahabr (俄语)

贡献

欢迎 Pull request。

灵感来源于 jbtronics/CrookedStyleSheets。