Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>That's an entirely reasonable approach. For typical applications it will be entirely sufficient.</p> <p>The trickiest part of white-listing raw HTML is the <code>style</code> attribute and <code>embed</code>/<code>object</code>. There are legitimate reasons why someone might want to put CSS styles into an otherwise untrusted block of formatted text, or say, an embedded YouTube video. This issue comes up most commonly with feeds. You can't trust the arbitrary block of text contained within a feed entry, but you don't want to strip out, e.g., syntax highlighting CSS or flash video, because that would fundamentally change the content and potentially confuse anyone reading it. Because CSS can contain dangerous things like behaviors in IE, you may have to parse the CSS if you decide to allow the <code>style</code> attribute to stay in. And with <code>embed</code>/<code>object</code> you may need to white-list hostnames.</p> <p><strong>Addenda:</strong></p> <p>In worst case scenarios, HTML escaping everything in sight can lead to a very poor user experience. It's much better to use something like one of the HTML5 parsers to go through the DOM with your whitelist. This is much more flexible in terms of how you present the sanitized output to your users. You can even do things like:</p> <pre><code>&lt;div class="sanitized"&gt; &lt;div class="notice"&gt; This was sanitized for security reasons. &lt;/div&gt; &lt;div class="raw"&gt;&lt;pre&gt; &amp;lt;script&amp;gt;alert("XSS!");&amp;lt;/script&amp;gt; &lt;/pre&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Then hide the <code>.raw</code> stuff with CSS, and use jQuery to bind a click handler to the <code>.sanitized</code> <code>div</code> that toggles between <code>.raw</code> and <code>.notice</code>:</p> <p>CSS:</p> <pre><code>.raw { display: none; } </code></pre> <p>jQuery:</p> <pre><code>$('.sanitized').click(function() { $(this).find('.notice').toggle(); $(this).find('.sanitized').toggle(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload