svg-foreignObject.svg

cirosantilli · cirosantilli · commit 8e394cdb012c · 2020-07-21T01:00:00.000Z
diff --git a/README.md b/README.md
@@ -12,3 +12,6 @@ Tests to see how Git web interfaces like GitHub and GitLab work exactly detect b
 1.  asciidoc
     1.  [adoc.adoc](adoc.adoc)
     1.  [xref-header-infinite-loop.adoc](xref-header-infinite-loop.adoc)
+
+<img src="svg.svg">
+<img src="svg-foreignObject.svg">
diff --git a/files.md b/files.md
@@ -85,4 +85,5 @@ XSS attempts:
 - [<script>](<script>)
 - `<script src="data:text;utf8,alert('xss')">`
 - [svg.svg](svg.svg), with an XSS attempt
+  - [svg-foreignObject.svg](svg-foreignObject.svg), CSS + XSS attempt
 - [sym-xss](sym-xss). It's path is an XSS attempt.
diff --git a/svg-foreignObject.svg b/svg-foreignObject.svg
@@ -0,0 +1,91 @@
+<svg fill="none" viewBox="0 0 800 400" width="800" height="400" xmlns="http://www.w3.org/2000/svg">
+	<foreignObject width="100%" height="100%">
+		<div xmlns="http://www.w3.org/1999/xhtml">
+			<style>
+				@keyframes rotate {
+					0% {
+						transform: rotate(3deg);
+					}
+					100% {
+						transform: rotate(-3deg);
+					}
+				}
+
+				@keyframes gradientBackground {
+					0% {
+						background-position: 0% 50%;
+					}
+					50% {
+						background-position: 100% 50%;
+					}
+					100% {
+						background-position: 0% 50%;
+					}
+				}
+
+				@keyframes fadeIn {
+					0% {
+						opacity: 0;
+					}
+					66% {
+						opacity: 0;
+					}
+					100% {
+						opacity: 1;
+					}
+				}
+
+				.container {
+					font-family:
+						system-ui,
+						-apple-system,
+						'Segoe UI',
+						Roboto,
+						Helvetica,
+						Arial,
+						sans-serif,
+						'Apple Color Emoji',
+						'Segoe UI Emoji';
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					margin: 0;
+					width: 100%;
+					height: 400px;
+					background: linear-gradient(-45deg, #fc5c7d, #6a82fb, #05dfd7);
+					background-size: 600% 400%;
+					animation: gradientBackground 10s ease infinite;
+					border-radius: 10px;
+					color: white;
+					text-align: center;
+				}
+
+				h1 {
+					font-size: 50px;
+					line-height: 1.3;
+					letter-spacing: 5px;
+					text-transform: uppercase;
+					text-shadow:
+						0 1px 0 #efefef,
+						0 2px 0 #efefef,
+						0 3px 0 #efefef,
+						0 4px 0 #efefef,
+						0 12px 5px rgba(0, 0, 0, 0.1);
+					animation: rotate ease-in-out 1s infinite alternate;
+				}
+
+				p {
+					font-size: 20px;
+					text-shadow: 0 1px 0 #efefef;
+					animation: 5s ease 0s normal forwards 1 fadeIn;
+				}
+			</style>
+			<div class="container">
+				<h1>Made with HTML &amp; CSS<br/>not an animated GIF</h1>
+				<p>Click to see the source</p>
+				<script>alert(1)</script>
+			</div>
+		</div>
+	</foreignObject>
+</svg>
