The html component
Include raw HTML in the output. For advanced users only. Use this component to create complex layouts or to include external content. Be very careful when using this component with user-generated content, as it can lead to security vulnerabilities. Use this component only if you are familiar with the security implications of including raw HTML, and understand the risks of cross-site scripting (XSS) attacks.
Introduced in SQLPage v0.25.0.
Top-level parameters
| name | required | type | description |
|---|---|---|---|
| html | TEXT |
Raw HTML content to include in the page. This will not be sanitized or escaped. If you include content from an untrusted source, your page will be vulnerable to cross-site scripting attacks. |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| html | TEXT |
Raw HTML content to include in the page. This will not be sanitized or escaped. If you include content from an untrusted source, your page will be vulnerable to cross-site scripting attacks. | |
| post_html | TEXT |
Raw HTML content to include after the text content. This will not be sanitized or escaped. If you include content from an untrusted source, your page will be vulnerable to cross-site scripting attacks. | |
| text | TEXT |
Text content to include in the page. This will be sanitized and escaped. Use this property to include user-generated content that should not contain HTML tags. |
Example 1
Include a simple HTML snippet. In this example, the HTML code is hardcoded in the SQL query, so it is safe. You should never include data that may be manipulated by a user in the HTML content.
select
'html' as component,
'<h1 class="text-blue">This text is safe because it is <mark>hardcoded</mark>!</h1>' as html;Result
This text is safe because it is hardcoded!
Example 2
Include multiple html snippets as row-level parameters. Again, be careful what you include in the HTML content. If the data comes from a user, it can be manipulated to include malicious code.
select
'html' as component,
'<div class="d-flex gap-3 mb-4" style="height: 40px">' as html;
select
'<div class="progress h-100"><div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 10%">10%</div></div>' as html;
select
'<div class="progress h-100"><div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 80%">80%</div></div>' as html;
select
'</div>' as html;Result
Example 3
In order to include user-generated content that should be sanitized, use the text property instead of html. The text property will display the text as-is, without interpreting any HTML tags.
select
'html' as component;
select
'<p>The following will be sanitized: <mark>' as html,
'<script>alert(''Failed XSS attack!'')</script>' as text,
'</mark>. Phew! That was close!</p>' as post_html;Result
The following will be sanitized: <script>alert('Failed XSS attack!')</script>. Phew! That was close!