Implementation of optical (Flicker) TAN

[lukas-staab]

Hello everyone, right now I have a running implementation for rendering Flicker Tans, i will open a pull request soon, but before I wish to have some Feedback how to do it. Right now I implemented it with an animated SVG, which should be a good compromise for both Backend and Frontend usage (I think). There is no JS or CSS involved in the implementation, I used only the animate-tag from SVG for the flickering. Therefore I used this composer dependency php-svg. I have not checked this repo for anything security wise, it was just the first I found and simple to use. I think another option would be using .gif files. A html canvas with some JS Code for the painting did not seem like a good option for me.

I think reimplementing of the features would not be a big issue, due to the low complexity of the resulting svg - but of course I would only do it if you think I/we should prevent 3rd party dependencies or not.

Here is the code of an example svg. I cannot embed it here (as far as I know) because github disabled user generated svgs because of XXS vulnerabilities, also SVG File attachments are not allowed for the same reason :(. Just copy the following content to a .svg file, save it and open it with your browser. It should work out of the box and your TAN Generator will give you a TAN for some dummy data (Transfer to Kontonr: 123456789 with amount of 0,01€). There is no JS code inside (as you can see), so don't worry about the XXS here. If your TAN Generator is bigger or smaller, just change the width (and height) ONLY in the first line of the svg. It will rescale then to your new given dimensions.

<svg xmlns="http://www.w3.org/2000/svg" width="280" height="140" viewBox="0 0 210 105" preserveAspectRatio="none">
    <rect x="0" y="0" width="210" height="105" rx="7.5" ry="7.5" style="fill: black"></rect>
    <polygon points="25,18 32,5 18,5" style="fill: grey"></polygon>
    <polygon points="185,18 192,5 178,5" style="fill: grey"></polygon>
    <rect x="10" y="20" width="30" height="75">
        <animate attributeName="fill" calcMode="discrete" repeatCount="indefinite" values="white;black;white"
                 keyframes="0;0.5;1" dur="0.1s"></animate>
    </rect>
    <rect x="50" y="20" width="30" height="75">
        <animate attributeName="fill" calcMode="discrete" repeatCount="indefinite" dur="4s"
                 values="white;black;white;white;white;white;black;black;white;black;black;white;white;white;black;white;white;black;black;white;black;white;black;white;black;white;white;white;black;white;black;white;black;black;black;white;white;white;white;black"
                 keyframes="0;0.025;0.05;0.075;0.1;0.125;0.15;0.175;0.2;0.225;0.25;0.275;0.3;0.325;0.35;0.375;0.4;0.425;0.45;0.475;0.5;0.525;0.55;0.575;0.6;0.625;0.65;0.675;0.7;0.725;0.75;0.775;0.8;0.825;0.85;0.875;0.9;0.925;0.95;0.975;1"></animate>
    </rect>
    <rect x="90" y="20" width="30" height="75">
        <animate attributeName="fill" calcMode="discrete" repeatCount="indefinite" dur="4s"
                 values="white;black;white;white;black;black;black;black;white;black;black;black;black;black;white;black;black;black;white;black;black;white;white;black;black;white;white;black;black;black;black;white;black;white;black;white;black;white;white;black"
                 keyframes="0;0.025;0.05;0.075;0.1;0.125;0.15;0.175;0.2;0.225;0.25;0.275;0.3;0.325;0.35;0.375;0.4;0.425;0.45;0.475;0.5;0.525;0.55;0.575;0.6;0.625;0.65;0.675;0.7;0.725;0.75;0.775;0.8;0.825;0.85;0.875;0.9;0.925;0.95;0.975;1"></animate>
    </rect>
    <rect x="130" y="20" width="30" height="75">
        <animate attributeName="fill" calcMode="discrete" repeatCount="indefinite" dur="4s"
                 values="white;black;white;white;black;black;white;black;white;black;white;black;white;black;black;white;white;black;black;black;white;black;white;white;black;white;white;black;white;black;black;black;white;black;black;black;black;black;white;black"
                 keyframes="0;0.025;0.05;0.075;0.1;0.125;0.15;0.175;0.2;0.225;0.25;0.275;0.3;0.325;0.35;0.375;0.4;0.425;0.45;0.475;0.5;0.525;0.55;0.575;0.6;0.625;0.65;0.675;0.7;0.725;0.75;0.775;0.8;0.825;0.85;0.875;0.9;0.925;0.95;0.975;1"></animate>
    </rect>
    <rect x="170" y="20" width="30" height="75">
        <animate attributeName="fill" calcMode="discrete" repeatCount="indefinite" dur="4s"
                 values="white;black;white;white;black;black;black;black;black;white;black;black;black;white;black;black;black;black;black;black;black;black;black;black;white;black;white;white;black;black;black;black;white;black;black;black;black;black;black;black"
                 keyframes="0;0.025;0.05;0.075;0.1;0.125;0.15;0.175;0.2;0.225;0.25;0.275;0.3;0.325;0.35;0.375;0.4;0.425;0.45;0.475;0.5;0.525;0.55;0.575;0.6;0.625;0.65;0.675;0.7;0.725;0.75;0.775;0.8;0.825;0.85;0.875;0.9;0.925;0.95;0.975;1"></animate>
    </rect>
</svg>

Would appreciate some feedback from the Maintainers / Contributors and everyone else. @nemiah

[seem2810]

Hi,

is there any possibility to implement flicker version 1.3.*? Our Sparkassen doesn't support 1.4 and don't want to implement it.

[lukas-staab]

Sure its possible, not sure how fast tho (by me). If you want to try it yourself let me know I could give you some pointers.