CSP and dynamic values

[glossy thunder]

Hi! I'm working on supporting CSP on a complex site and I wonder how to tackle this kind of dynamic case:

---
const { angle, offsetX, offsetY, scale } = Astro.props
---

<div class="relative size-full">
  <div
    class="absolute"
    style={{
      left: `calc(50% + ${offsetX || 0}px)`,
      bottom: `calc(50% - ${offsetY || 0}px)`,
      transform: `
        rotate(${angle || 0}deg)
        translate(-50%, +50%)
        scale(${scale || 1})
      `,
    }}
  >
  </div>
</div>

I know I'm supposed to generate a hash but I can't since it's so dynamic. I also looked at attr() level 3 but it's still not implemented enough by major browsers.

So what's the solution here?

Right now what I'm thinking is only allow picking specific values (eg. 0,1,2,3,... for angle), pre-generate tailwind classes and use them instead of inline styles

[lime heath]

Don't know what the "right" answer is, but your solution makes sense to me.

[glossy thunder]

Next problem: svg components. They add inline attributes so they are not compatible...

Why does CSP have to be so complicated

Actually it's "just" a matter of updating thousands of svgs to use tailwind classes

Any tool you could recommend to parse svgs and transform them, rehype?

[lime heath]

Rehype can yeah.

Which inline attributes are the problem here? fill etc.?

[glossy thunder]

style

For example

style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:10"

[lime heath]

Does astro add those? Or they're in the SVG files?

[glossy thunder]

No actually it's from the icon sets

[lime heath]

I think you can just run them through svgo then

Those can all be attributes instead

[glossy thunder]

we already do, I need to check what's the setting

[lime heath]

I don't think the default settings remove styles

It's also possible it doesn't move styles to attributes?

In which case you'd still need something custom to parse the style and move to attributes I guess

[glossy thunder]

Yeah I'll probably need a custom plugin 👍

[glossy thunder]

It's very simple:

          {
            name: "inline-style-to-attrs",
            fn: () => {
              return {
                element: {
                  enter: (node) => {
                    if (node.attributes.style === undefined) {
                      return;
                    }
                    const parsed = node.attributes.style.split(";").map((v) => {
                      const [key, value] = v.split(":");
                      return {
                        key,
                        value,
                      };
                    });
                    delete node.attributes.style;
                    for (const { key, value } of parsed) {
                      node.attributes[key] = value;
                    }
                  },
                },
              };
            },
          },

[lime heath]

Oh, nice. Is that a custom SVGO plugin?

I guess in theory you could double check that the CSS properties found are valid attributes but I guess you already know that that's the case.

[glossy thunder]

Yeah I assumed it wouldn't be the case but surely that could be made more robust