Sablier

Summary

The progressCircle function in the SVGElements library incorrectly uses the transform attribute in the <circle> element. The transform attribute is used twice, which is incorrect and can lead to unexpected behavior in the SVG rendering.

Specifying the rotation and the origin point in a single transform attribute simplifies the transformation process and ensures that the rotation occurs around the correct point. This is crucial for achieving the desired visual effect, especially when elements need to be aligned or positioned precisely relative to other elements in the SVG.

Vulnerability details

Look at this part of the code:

https://github.com/Cyfrin/2024-05-Sablier/blob/43d7e752a68bba2a1d73d3d6466c3059079ed0c6/v2-core/src/libraries/SVGElements.sol#L218

The transform attribute is used for rotation, but the transform-origin should be part of the transform attribute itself.

According to the SVG specification, the rotate transformation can include the center of rotation directly within the transform attribute, like rotate(angle cx cy). This method is standard for SVG and ensures compatibility across different rendering engines and platforms. Read more here: https://www.sarasoueidan.com/blog/svg-transformations/

Impact

The incorrect usage of the transform attribute can lead to improper rendering of the progress circle in the SVG. This can affect the visual representation of the progress indicator, making it appear incorrectly rotated or misplaced.

Using separate attributes for transform and transform-origin can lead to redundancy and confusion. In SVG, unlike in CSS, transform-origin is typically used within a style context and behaves differently. Combining the rotation and the origin into one attribute streamlines the code and reduces potential errors or inconsistencies in rendering

Tools Used

• Manual review

• SVG docs

Recommendations

Combine the rotate and transform-origin attributes into a single transform attribute. Like this

In the recommendation above, the transform attribute combines both the rotation and the origin in a single attribute: transform="rotate(-90 166 50)". This ensures that the rotation is applied correctly around the specified origin point.

Combining the rotation and the origin into a single transform attribute aligns with SVG standards, simplifies the transformation process, ensures accuracy in the rendering, and improves performance by reducing computational needs. This is beneficial in complex graphics where we want precise control over element positioning and transformation.