General
Core
AJAX
Client Side Validation
Dialog Framework
Content Security
Accessiblity
PrimeFlex
PrimeIcons
ThemingNew
Theming TokensNew
Form
AutoComplete
CascadeSelect
Chips
ColorPicker
DatePicker
Inplace
InputGroup
InputMask
InputNumber
InputOtpNew
InputPhoneNew
InputText
InputTextArea
KeyFilter
Keyboard
Knob
MultiSelectListBox
Password
Rating
SelectBooleanButton
SelectBooleanCheckbox
SelectOneButton
SelectOneRadio
SelectCheckboxMenu
SelectOneMenu
SelectOneListbox
SelectManyButton
SelectManyMenu
SelectManyCheckbox
Signature
Slider
Spinner
TextEditor
ToggleSwitch
TriStateCheckbox
TriStateManyCheckboxNew
Button
Data
Carousel
Chronoline
DataExporter
DataScroller
DataTable
DataView
Diagram
Gmap
HorizontalTree
Mindmap
OrderList
Organigram
PickList
Schedule
TagCloud
Timeline
Tree
TreeTable
Panel
Accordion
Card
Dashboard
Divider
Fieldset
NotificationBar
OutputPanel
Panel
PanelGrid
Splitter
ScrollPanel
TabView
Toolbar
Wizard
Overlay
Menu
Breadcrumb
ContextMenu
Dock
MegaMenu
Menu
Menubar
MenuButton
PanelMenu
SlideMenu
Stack
Steps
TabMenu
TieredMenu
Chart
Messages
Multimedia
Audio
BarcodeUpdated
QRCodeUpdated
Image Compare
Image Cropper
Graphic Image
Galleria
Media
PhotoCam
Switch
Video
File
Misc
Avatar
Badge
Chip
ScrollTop
Skeleton
Tag
AutoUpdate
OutputLabel
FloatLabel
BlockUI
Cache
Captcha
Clock
Context
DefaultCommand
DragDrop
Effect
ExceptionHandler
FeedReaderUpdated
IdleMonitor
ImportConstants
ImportEnum
Lifecycle
Log
Focus
Hotkey
Printer
ProgressBar
ResetInput
Resizable
SpacerDeprecated
Spotlight
Sticky
Terminal
Content Security Policy (CSP)
Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. See Content Security Policy for more details.
This showcase is for testing CSP integration in PrimeFaces. Just step through the test cases and click at the appropriate button to check if everything is working as expected. If so, you should receive a PASS message.
CSP is currently disabled in your setup. Please check our documentation how to enable it.
Usage
<h:form>
<div class="card">
<p:tabView rendered="#{cspView.cspEnabled}">
<p:tab title="JS event handlers">
<p:outputPanel>
JS event handlers should work as expected.
</p:outputPanel>
<p:outputPanel>
<p:button onclick="alert('PASS'); return false;" value="Check functionality"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:button onclick="alert('PASS'); return false;" value="Check functionality" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="Inline script blocks">
<p:outputPanel>
Inline scripts should work as expected.
</p:outputPanel>
<p:outputPanel>
<script>
function foo() {
alert('PASS');
}
</script>
<p:button onclick="foo(); return false;" value="Check functionality"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<script>
function foo() {
alert('PASS');
}
</script>
<p:button onclick="foo(); return false;" value="Check functionality" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="JS URI handlers">
<p:outputPanel>
JS URI handlers are not supported and hence should be refused. For example,
<code><a href="javascript:void(0);"></code>
can be replaced with <code><a href="#" onclick="return false;"></code>
</p:outputPanel>
<p:outputPanel>
<a id="link" href="javascript:window.cspScriptExecuted=true;">link</a><br/><br/>
<p:button value="Check functionality"
onclick="window.cspScriptExecuted=false; document.getElementById('link').click(); if (!window.cspScriptExecuted) alert('PASS'); return false;"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<a id="link" href="javascript:window.cspScriptExecuted=true;">link</a><br/><br/>
<p:button value="Check functionality" onclick="window.cspScriptExecuted=false; document.getElementById('link').click();
if (!window.cspScriptExecuted) alert('PASS'); return false;" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="p:commandButton ajaxified">
<p:outputPanel>
Ajaxified <code>p:commandButton</code> should work as expected.
</p:outputPanel>
<p:outputPanel>
<p:commandButton value="Check functionality" oncomplete="alert('PASS');"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:commandButton value="Check functionality" onstart="alert('PASS');" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="h:commandButton with f:ajax">
<p:outputPanel>
<code>f:ajax</code> should work as expected.
</p:outputPanel>
<p:outputPanel>
<h:commandButton value="Check functionality">
<f:ajax event="click" onevent="function() { alert('PASS') }"/>
</h:commandButton>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<h:commandButton value="Check functionality">
<f:ajax event="click" onevent="alert('PASS')" />
</h:commandButton>
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="p:ajax">
<p:outputPanel>
<code>p:ajax</code> should work as expected.
</p:outputPanel>
<p:outputPanel>
<p:inputText>
<p:ajax event="change" oncomplete="alert('PASS');"/>
</p:inputText>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:inputText>
<p:ajax event="change" onstart="alert('PASS');" />
</p:inputText>
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="PrimeFaces.executeScript();">
<p:outputPanel>
<code>PrimeFaces.executeScript()</code> should work as expected.
</p:outputPanel>
<p:outputPanel>
<p:commandButton value="Check functionality" actionListener="#{cspView.executeScript}"
process="@this"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:commandButton value="Check functionality" actionListener="\#{cspView.executeScript}" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="eval">
<p:outputPanel>
JS <code>eval</code> function call should be refused. Use CSP directive
<code>script-src 'unsafe-eval'</code> (not recommended) or
<code>JSON.parse</code> (recommended) if you are trying to parse JSON strings.
</p:outputPanel>
<p:outputPanel>
<p:button value="Check functionality"
onclick="try { eval('1==1'); } catch(e) { console.log(e); return false; } alert('PASS'); return false;"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:button value="Check functionality" onclick="try { eval('1==1'); } catch(e) { console.log(e); return false; } alert('PASS'); return false;" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="setTimeout">
<p:outputPanel>
JS <code>setTimeout</code> function call should be refused for string arguments.
<code>window.setTimeout(function() ...</code> should be used instead.
The same applies to <code>setInterval</code>.
</p:outputPanel>
<p:outputPanel>
<p:button value="Check functionality"
onclick="try { window.setTimeout('alert(1)',1000); } catch(e) { console.log(e); return false; } window.setTimeout(function() { alert('PASS'); },1000); return false;"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:button value="Check functionality" onclick="try { window.setTimeout('alert(1)',1000); } catch(e) { console.log(e); return false; } window.setTimeout(function() { alert('PASS'); },1000); return false;" />
</code></pre>
</p:tab>
</p:tabView>
</p:tab>
<p:tab title="XSS">
<p:outputPanel>
Injection of javascript code in case of a XSS vulnerability should be refused. Of course you should not stop properly escaping your stuff anyway. ;-)
</p:outputPanel>
<p:outputPanel id="xss">
<p:inputText id="xss-in" value="#{cspView.userSuppliedInput}" size="50"/><br/>
<p:outputLabel id="xss-out" escape="false" value="#{cspView.userSuppliedInput}"/><br/>
<p:commandButton value="Check functionality" update="xss-out" process="xss-in"
onstart="window.cspScriptExecuted=false;"
oncomplete="if (!window.cspScriptExecuted) alert('PASS');"/>
</p:outputPanel>
<br/>
<p:tabView>
<p:tab title="XHTML">
<pre class="line-numbers"><code class="language-xml">
<p:commandButton value="Check functionality" update="xss-out" process="xss-in" onstart="window.cspScriptExecuted=false;" oncomplete="if (!window.cspScriptExecuted) alert('PASS');" /> </code></pre>
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</div>
<br/>
<!--
<p:button value="Validate CSP header" disabled="#\{not cspView.configuration.javascriptDebuggingCookie}"
onclick="window.open('https://cspvalidator.org/#headerValue%5B%5D=' + $.cookie('CSP'), '_blank'); return false;"
title="#\{not cspView.configuration.javascriptDebuggingCookie ? 'primefaces.csp.JAVASCRIPT_DEBUGGING_COOKIE must be enabled' : ''}" />
-->
</h:form>
package org.primefaces.showcase.view.misc;
import org.primefaces.PrimeFaces;
import org.primefaces.context.PrimeApplicationContext;
import java.io.Serializable;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
@Named
@ViewScoped
public class CspView implements Serializable {
private boolean cspEnabled;
private String userSuppliedInput;
public CspView() {
cspEnabled = PrimeApplicationContext.getCurrentInstance(FacesContext.getCurrentInstance()).getConfig().isCsp();
userSuppliedInput = "<b>Huhu</b><script>window.cspScriptExecuted=true;alert('XSS');</script>";
}
public void check() {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Success", "PASS"));
}
public String getUserSuppliedInput() {
return userSuppliedInput;
}
public void setUserSuppliedInput(String userSuppliedInput) {
this.userSuppliedInput = userSuppliedInput;
}
public boolean isCspEnabled() {
return cspEnabled;
}
public void executeScript() {
PrimeFaces.current().executeScript("alert('PASS');");
}
}