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
html
Row-level parameters
html
post_html
text
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!