|
| 1 | +# /// script |
| 2 | +# requires-python = ">=3.11" |
| 3 | +# dependencies = [ |
| 4 | +# "pandas", |
| 5 | +# "altair", |
| 6 | +# "marimo", |
| 7 | +# ] |
| 8 | +# /// |
| 9 | +# Copyright 2024 Marimo. All rights reserved. |
| 10 | + |
| 11 | +import marimo |
| 12 | + |
| 13 | +__generated_with = "0.17.2" |
| 14 | +app = marimo.App(width="medium") |
| 15 | + |
| 16 | + |
| 17 | +@app.cell |
| 18 | +def _(): |
| 19 | + import marimo as mo |
| 20 | + return (mo,) |
| 21 | + |
| 22 | + |
| 23 | +@app.cell(hide_code=True) |
| 24 | +def _(mo): |
| 25 | + mo.md( |
| 26 | + """ |
| 27 | + # Altair Tooltip Images |
| 28 | +
|
| 29 | + This smoke test verifies that images in Altair tooltips render correctly |
| 30 | + and that the tooltip handler properly sanitizes potentially malicious content. |
| 31 | +
|
| 32 | + **Tests:** |
| 33 | + 1. External image URLs in tooltips |
| 34 | + 2. Base64-encoded images in tooltips |
| 35 | + 3. XSS vulnerability prevention |
| 36 | + """ |
| 37 | + ) |
| 38 | + return |
| 39 | + |
| 40 | + |
| 41 | +@app.cell |
| 42 | +def _(): |
| 43 | + import altair as alt |
| 44 | + import pandas as pd |
| 45 | + |
| 46 | + # Create sample data with image URLs |
| 47 | + source = pd.DataFrame( |
| 48 | + { |
| 49 | + "a": [1, 2], |
| 50 | + "b": [1, 2], |
| 51 | + "image": [ |
| 52 | + "https://marimo.io/logo.png", |
| 53 | + "https://marimo.io/favicon.ico", |
| 54 | + ], |
| 55 | + } |
| 56 | + ) |
| 57 | + |
| 58 | + # Create chart with image tooltip |
| 59 | + chart = ( |
| 60 | + alt.Chart(source) |
| 61 | + .mark_circle(size=200) |
| 62 | + .encode( |
| 63 | + x=alt.X("a", scale=alt.Scale(domain=[0, 3])), |
| 64 | + y=alt.Y("b", scale=alt.Scale(domain=[0, 3])), |
| 65 | + tooltip=["image"], |
| 66 | + ) |
| 67 | + .properties( |
| 68 | + title="Scatter Plot with Image Tooltips - Hover to see images", |
| 69 | + width=400, |
| 70 | + height=400, |
| 71 | + ) |
| 72 | + ) |
| 73 | + |
| 74 | + chart |
| 75 | + return alt, pd |
| 76 | + |
| 77 | + |
| 78 | +@app.cell(hide_code=True) |
| 79 | +def _(mo): |
| 80 | + mo.md( |
| 81 | + r""" |
| 82 | + ## Instructions |
| 83 | +
|
| 84 | + Hover over the circles to see the image tooltips. |
| 85 | + The images should render in the tooltip, not just show URLs as text. |
| 86 | + """ |
| 87 | + ) |
| 88 | + return |
| 89 | + |
| 90 | + |
| 91 | +@app.cell |
| 92 | +def _(alt, pd): |
| 93 | + # Example with base64 encoded image |
| 94 | + base64_image = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMjAiIGZpbGw9InJlZCIvPjwvc3ZnPg==" |
| 95 | + |
| 96 | + source2 = pd.DataFrame( |
| 97 | + { |
| 98 | + "x": [1, 2, 3], |
| 99 | + "y": [1, 2, 1], |
| 100 | + "name": ["Red Circle", "Blue Square", "Green Triangle"], |
| 101 | + "image": [ |
| 102 | + base64_image, |
| 103 | + "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMTAiIHk9IjEwIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIGZpbGw9ImJsdWUiLz48L3N2Zz4=", |
| 104 | + "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAiIGhlaWdodD0iNTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBvbHlnb24gcG9pbnRzPSIyNSw1IDQwLDQwIDEwLDQwIiBmaWxsPSJncmVlbiIvPjwvc3ZnPg==", |
| 105 | + ], |
| 106 | + } |
| 107 | + ) |
| 108 | + |
| 109 | + chart2 = ( |
| 110 | + alt.Chart(source2) |
| 111 | + .mark_point(size=300, filled=True) |
| 112 | + .encode( |
| 113 | + x=alt.X("x", scale=alt.Scale(domain=[0, 4])), |
| 114 | + y=alt.Y("y", scale=alt.Scale(domain=[0, 3])), |
| 115 | + tooltip=["name", "image"], |
| 116 | + ) |
| 117 | + .properties( |
| 118 | + title="Chart with Base64 Encoded Image Tooltips", |
| 119 | + width=400, |
| 120 | + height=300, |
| 121 | + ) |
| 122 | + ) |
| 123 | + |
| 124 | + chart2 |
| 125 | + return |
| 126 | + |
| 127 | + |
| 128 | +@app.cell(hide_code=True) |
| 129 | +def _(mo): |
| 130 | + mo.md( |
| 131 | + r""" |
| 132 | + ## XSS Security Tests |
| 133 | +
|
| 134 | + These tests verify that the tooltip handler properly sanitizes |
| 135 | + potentially malicious content and prevents XSS attacks. |
| 136 | +
|
| 137 | + **Expected behavior:** All XSS attempts should be neutralized. |
| 138 | + No alert boxes or script execution should occur when hovering. |
| 139 | + """ |
| 140 | + ) |
| 141 | + return |
| 142 | + |
| 143 | + |
| 144 | +@app.cell |
| 145 | +def _(alt, pd): |
| 146 | + # Test various XSS attack vectors |
| 147 | + xss_test_data = pd.DataFrame( |
| 148 | + { |
| 149 | + "x": [1, 2, 3, 4, 1, 2, 3, 4], |
| 150 | + "y": [1, 1, 1, 1, 2, 2, 2, 2], |
| 151 | + "label": [ |
| 152 | + "Script Tag", |
| 153 | + "Event Handler", |
| 154 | + "JS URL", |
| 155 | + "IMG onerror", |
| 156 | + "SVG Script", |
| 157 | + "HTML Injection", |
| 158 | + "OnMouseOver", |
| 159 | + "Data URL JS", |
| 160 | + ], |
| 161 | + "image": [ |
| 162 | + # Script tag injection |
| 163 | + '<script>alert("XSS")</script>', |
| 164 | + # Event handler |
| 165 | + "<img src=x onerror=\"alert('XSS')\">", |
| 166 | + # JavaScript URL |
| 167 | + "<a href=\"javascript:alert('XSS')\">click</a>", |
| 168 | + # IMG with onerror |
| 169 | + '<img src="invalid" onerror="alert(\'XSS\')">', |
| 170 | + # SVG with embedded script |
| 171 | + '<svg><script>alert("XSS")</script></svg>', |
| 172 | + # HTML injection |
| 173 | + "<div onclick=\"alert('XSS')\">Click me</div>", |
| 174 | + # OnMouseOver |
| 175 | + "<span onmouseover=\"alert('XSS')\">hover</span>", |
| 176 | + # Data URL with JavaScript |
| 177 | + "<img src=\"data:text/html,<script>alert('XSS')</script>\">", |
| 178 | + ], |
| 179 | + } |
| 180 | + ) |
| 181 | + |
| 182 | + xss_chart = ( |
| 183 | + alt.Chart(xss_test_data) |
| 184 | + .mark_circle(size=150) |
| 185 | + .encode( |
| 186 | + x=alt.X("x:O", title="Test Vector"), |
| 187 | + y=alt.Y("y:O", title="Category"), |
| 188 | + color=alt.Color( |
| 189 | + "label:N", |
| 190 | + legend=alt.Legend(title="Attack Type"), |
| 191 | + ), |
| 192 | + tooltip=["label", "image"], |
| 193 | + ) |
| 194 | + .properties( |
| 195 | + title="XSS Security Test - Hover to verify sanitization", |
| 196 | + width=600, |
| 197 | + height=300, |
| 198 | + ) |
| 199 | + ) |
| 200 | + |
| 201 | + xss_chart |
| 202 | + return |
| 203 | + |
| 204 | + |
| 205 | +if __name__ == "__main__": |
| 206 | + app.run() |
0 commit comments