I have a zul page that is dispalying perfectly well when the headers Content-Security-Policy, X-Content-Security-Policy or X-WebKit-CSP are not set.
However when set, the tabs all display at the same time on initial load and are not hidden until you start clicking the tab buttons on both Edge and Chrome.
The page is as follows
<zk>
<?init class="security.CheckForLogin" page="/login.zul"?>
<?page title="Online Interface"?>
<?link rel="icon" type="image/x-icon" href="Theme/pv.ico"?>
<style src="Theme/NetworksTheme.css"/>
<zscript>
utilities.Debug.setUpLogging();
</zscript>
<!-- Start of title header division -->
<hbox width="100%" widths="50%,50%" apply="userInterface.PVVersionController">
<div align="left" width="100%">
<vbox width="100%">
<label id="interfaceTitleLabel" value="Online Interface" style="font-size: 1.6em; font-family: Arial"/>
<label id="pvVersionLabel"/>
</vbox>
</div>
<div apply="userInterface.MTOSILabelController" id="titleHeader" align="right" width="100%">
<!-- <image src="Images/logo-small.png" align="right"/> -->
<toolbarbutton id="mtosiToolBarButton" label="MTOSI API" style="color: orange" href="../axis2" target="_blank"/>
<toolbarbutton id="helpToolBarButton" label="Click for $name Online Help" target="_blank" style="color: blue"/>
<toolbarbutton id="companyToolBarButton" image="Images/logo-small.png" target="_blank"/>
</div>
</hbox>
<!-- End of title header division -->
<!-- Start of content division -->
<tabbox id="categoryMenu" height="90%" width="100%">
<tabs>
<tab label="Downloads" selected="true"></tab>
<tab label="Help Desk Reports"></tab>
<tab label="Server Logs"></tab>
</tabs>
<toolbar>
<toolbarbutton id="logoutButton" label="Log Out" apply="security.LoginViewController"/>
</toolbar>
<tabpanels>
<tabpanel>
<!-- Downloads tab -->
<include src="CategoryGroups/Downloads.zul"/>
</tabpanel>
<tabpanel>
<!-- Server Reports tab -->
<include src="CategoryGroups/Server_Reports.zul"/>
</tabpanel>
<tabpanel>
<!-- Server Logs tab -->
<include src="CategoryGroups/Server_Logs.zul"/>
</tabpanel>
</tabpanels>
</tabbox>
<!-- End of content division -->
</zk>
The page source code looks like this and I "think" that the line ['script','["zk.load(\'zk.cpsp\');zk.afterLoad(function(){zk.cpsp.start(\'z_0vp\');});"]']); is not being called correctly.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<title>Online Interface</title>
<link rel="stylesheet" type="text/css" href="/pvweb/zkau/web/51656b88/zul/css/zk.wcs"/>
<script type="text/javascript" src="/pvweb/zkau/web/51656b88/js/zk.wpd" charset="UTF-8">
</script>
<script type="text/javascript" src="/pvweb/zkau/web/51656b88/js/zul.lang.wpd" charset="UTF-8">
</script>
<!-- ZK 5.0.11 2012032814 -->
<script type="text/javascript">zkopt({to:3660});</script><link rel="icon" type="image/x-icon" href="Theme/pv.ico"/>
</head>
<body>
<div id="pF8P_" class="z-temp"></div>
<script type="text/javascript">zk.pi=1;zkmx(
[0,'pF8P_',{dt:'z_0vp',cu:'/pvweb',uu:'/pvweb/zkau',ru:'/index.zul'},[
['zul.utl.Style','pF8P0',{visible:false,src:'Theme/AviatNetworksTheme.css'},[]],
['zul.box.Box','pF8P1',{width:'100%',prolog:'\n\n\t\n\t',_sizes:['50%','50%']},[
['zul.wgt.Div','pF8P2',{width:'100%',align:'left'},[
['zul.box.Box','pF8P3',{width:'100%',prolog:'\n\t\t\t'},[
['zul.wgt.Label','pF8P4',{id:'interfaceTitleLabel',style:'font-size: 1.6em; font-family: Arial',value:'ProVision Web Interface'},[]],
['zul.wgt.Label','pF8P5',{id:'pvVersionLabel',value:'ProVision v7.11.2 Build 17'},[]]],'vertical']]],
['zul.wgt.Div','pF8P6',{id:'titleHeader',width:'100%',align:'right'},[
['zul.wgt.Toolbarbutton','pF8P7',{id:'mtosiToolBarButton',visible:false,style:'color: orange',prolog:'\n\t\t\t\n\t\t\t',label:'MTOSI API',href:'../axis2',target:'_blank'},[]],
['zul.wgt.Toolbarbutton','pF8P8',{id:'helpToolBarButton',style:'color: blue',prolog:'\n\t\t\t',label:'Click for ProVision Online Help',href:'../help/en/Default_Left.htm#CSHID=PIC08ImportingtheTopology%7cStartTopic=Content%252FProVision_Online_Help%252FImporting_the_Topology.htm%7cSkinName=Sleek',target:'_blank'},[]],
['zul.wgt.Toolbarbutton','pF8P9',{id:'companyToolBarButton',prolog:'\n\t\t\t',image:'Images/logo-small.png',href:'http://www.aviatnet.com/',target:'_blank'},[]]]]],'horizontal'],
['zul.tab.Tabbox','pF8Pa',{id:'categoryMenu',width:'100%',height:'90%',prolog:'\n\t\n\t\n\t\n\t\n\t'},[
['zul.tab.Tabs','pF8Pb',{},[
['zul.tab.Tab','pF8Pc',{$onClose:true,$$onSelect:false,$onSelect:false,label:'Downloads',selected:true},[]],
['zul.tab.Tab','pF8Pd',{$onClose:true,$onSelect:false,label:'Help Desk Reports'},[]],
['zul.tab.Tab','pF8Pe',{$onClose:true,$onSelect:false,label:'Server Logs'},[]]]],
['zul.wgt.Toolbar','pF8Pf',{},[
['zul.wgt.Toolbarbutton','pF8Pg',{id:'logoutButton',$onClick:true,prolog:'\n\t\t ',label:'Log Out'},[]]]],
['zul.tab.Tabpanels','pF8Ph',{},[
['zul.tab.Tabpanel','pF8Pi',{},[
['zul.wgt.Include','pF8Pj',{prolog:'\n\t\t\t\t\n\t\t\t\t'},[
['zul.box.Box','pF8Pk',{id:'hbox',width:'100%',height:'100%',prolog:'\n\t',_sizes:['29%','70%']},[
['zul.box.Box','pF8Pl',{width:'100%',height:'100%'},[
['zul.wgt.Label','pF8Pm',{value:'Available Files to Download:'},[]],
['zul.sel.Listbox','pF8Pn',{id:'fileListBox',$$onDataLoading:true,$$onAnchorPos:false,$$onSelect:false,$onSelect:true,$$onInnerWidth:false,$$onRender:true,$$onScrollPos:false,$$onPageSize:true,_topPad:0,_totalSize:1,_offset:0},[
['zul.sel.Listhead','pF8Po',{$$onColSize:false},[
['zul.sel.Listheader','pF8Pp',{$onSort:true,label:'File'},[]],
['zul.sel.Listheader','pF8Pq',{$onSort:true,width:'30%',label:'Download'},[]]]],
['zul.sel.Listitem','pF8Pu',{$onDoubleClick:true,_index:0},[
['zul.sel.Listcell','pF8Pv',{label:'Client Setup'},[]],
['zul.sel.Listcell','pF8Pw',{},[
['zul.wgt.Button','pF8Px',{$onClick:true,width:'100%',label:'Download'},[]]]]]]]],
['zul.wgt.Label','pF8Pr',{value:'Tip: You can also double-click a file to download it.'},[]]],'vertical'],
['zul.box.Splitter','pF8Ps',{$$onOpen:false},[]],
['zul.box.Box','pF8Pt',{id:'descriptionVBox'},[],'vertical']],'horizontal']]]]],
['zul.tab.Tabpanel','pF8Py',{visible:false},[
['zul.wgt.Include','pF8Pz',{prolog:'\n\t\t\t\t\n\t\t\t\t'},[
['zul.box.Box','pF8P_0',{width:'100%',height:'100%',prolog:'\n\t',_sizes:['29%','70%']},[
['zul.box.Box','pF8P00',{width:'100%'},[
['zul.sel.Listbox','pF8P10',{id:'reportsListBox',$onSelect:true,width:'100%',height:'100%',_topPad:0,_totalSize:1,_offset:0},[
['zul.sel.Listhead','pF8P20',{},[
['zul.sel.Listheader','pF8P30',{$onSort:true,label:'File'},[]],
['zul.sel.Listheader','pF8P40',{$onSort:true,width:'30%',label:'Download'},[]]]],
['zul.sel.Listitem','pF8P80',{_index:0},[
['zul.sel.Listcell','pF8P90',{label:'No Help Desk reports found.'},[]]]]]],
['zul.wgt.Label','pF8P50',{value:'Tip: Double-Click a report to download it.'},[]]],'vertical'],
['zul.box.Splitter','pF8P60',{collapse:'before'},[]],
['zul.wgt.Div','pF8P70',{id:'resultSpaceDiv',width:'100%',height:'100%'},[]]],'horizontal']]]]],
['zul.tab.Tabpanel','pF8Pa0',{visible:false},[
['zul.wgt.Include','pF8Pb0',{prolog:'\n\t\t\t\t\n\t\t\t\t'},[
['zul.box.Box','pF8Pc0',{width:'100%',height:'100%',prolog:'\n\t\n\t',_sizes:['29%','70%']},[
['zul.box.Box','pF8Pd0',{},[
['zul.box.Box','pF8Pe0',{align:'center'},[
['zul.wgt.Label','pF8Pf0',{value:'Number of visible lines:'},[]],
['zul.inp.Spinner','pF8Pg0',{id:'noOfLinesSpinner',$$onError:false,$$onChange:false,$onChange:true,$onOK:true,_value:40,cols:11,constraint:'no empty, no negative'},[]]],'horizontal'],
['zul.sel.Listbox','pF8Ph0',{id:'logsListBox',$onSelect:true,_topPad:0,_totalSize:6,_offset:0},[
['zul.sel.Listhead','pF8Pi0',{},[
['zul.sel.Listheader','pF8Pj0',{$onSort:true,label:'Log'},[]],
['zul.sel.Listheader','pF8Pk0',{$onSort:true,width:'30%',label:'Download'},[]]]],
['zul.sel.Listitem','pF8P31',{$onDoubleClick:true,_index:0},[
['zul.sel.Listcell','pF8P41',{label:'Active Server Log'},[]],
['zul.sel.Listcell','pF8P51',{},[
['zul.wgt.Button','pF8P61',{$onClick:true,width:'100%',label:'Download'},[]]]]]],
['zul.sel.Listitem','pF8P71',{$onDoubleClick:true,_index:1},[
['zul.sel.Listcell','pF8P81',{label:'Archive Server Log'},[]],
['zul.sel.Listcell','pF8P91',{},[
['zul.wgt.Button','pF8Pa1',{$onClick:true,width:'100%',label:'Download'},[]]]]]],
['zul.sel.Listitem','pF8Pb1',{$onDoubleClick:true,_index:2},[
['zul.sel.Listcell','pF8Pc1',{label:'Wrapper Log'},[]],
['zul.sel.Listcell','pF8Pd1',{},[
['zul.wgt.Button','pF8Pe1',{$onClick:true,width:'100%',label:'Download'},[]]]]]],
['zul.sel.Listitem','pF8Pf1',{$onDoubleClick:true,_index:3},[
['zul.sel.Listcell','pF8Pg1',{label:'Tomcat - Localhost Log (Today\'s Log)'},[]],
['zul.sel.Listcell','pF8Ph1',{},[
['zul.wgt.Button','pF8Pi1',{$onClick:true,width:'100%',label:'Download'},[]]]]]],
['zul.sel.Listitem','pF8Pj1',{$onDoubleClick:true,_index:4},[
['zul.sel.Listcell','pF8Pk1',{label:'Tomcat - Catalina Log (Today\'s Log)'},[]],
['zul.sel.Listcell','pF8Pl1',{},[
['zul.wgt.Button','pF8Pm1',{$onClick:true,width:'100%',label:'Download'},[]]]]]],
['zul.sel.Listitem','pF8Pn1',{$onDoubleClick:true,_index:5},[
['zul.sel.Listcell','pF8Po1',{label:'Tomcat - Axis2 Log'},[]],
['zul.sel.Listcell','pF8Pp1',{},[
['zul.wgt.Button','pF8Pq1',{$onClick:true,width:'100%',label:'Download'},[]]]]]]]],
['zul.wgt.Groupbox','pF8Pl0',{$$onOpen:false},[
['zul.wgt.Caption','pF8Pm0',{prolog:'\n\t\t\t\t',label:'Description of Log'},[]],
['zul.wgt.Label','pF8Pn0',{id:'descriptionLabel',prolog:'\n\t\t\t\t'},[]]]],
['zul.wgt.Groupbox','pF8Po0',{id:'filterGroupBox'},[
['zul.wgt.Caption','pF8Pp0',{prolog:'\n\t\t\t\t',label:'Filter'},[]],
['zul.box.Box','pF8Pq0',{prolog:'\n\t\t\t\t',align:'center'},[
['zul.wgt.Label','pF8Pr0',{value:'Filter Results:'},[]],
['zul.inp.Textbox','pF8Ps0',{id:'filterTextBox',$$onError:false,$$onChange:false,$onOK:true,tooltiptext:'Filters are case-sensitive'},[]],
['zul.wgt.Button','pF8Pt0',{id:'filterButton',$onClick:true,label:'Filter'},[]]],'horizontal'],
['zul.box.Box','pF8Pu0',{prolog:'\n\t\t\t\t',align:'center'},[
['zul.wgt.Radiogroup','pF8Pv0',{$$onCheck:false,name:'_pg4d688r'},[
['zul.wgt.Radio','pF8Pw0',{id:'visibleTextRadio',$$onCheck:false,label:'Visible Text',checked:true},[]],
['zul.wgt.Radio','pF8Px0',{id:'allTextRadio',label:'Entire File'},[]]]],
['zul.wgt.Label','pF8Py0',{value:'\n\t\t\t\t\tAllows you to filter what kinds of text updates will be displayed. For example, filtering for \'Performance\' will only show lines of text with the word \'Performance\' in them.\n\t\t\t\t'},[]]],'vertical']]],
['zul.wgt.Label','pF8Pz0',{value:'Tip: The logs that you view are updated on-the-fly.'},[]]],'vertical'],
['zul.box.Splitter','pF8P_1',{collapse:'before'},[]],
['zul.wgt.Div','pF8P01',{height:'100%'},[
['zul.wgt.Label','pF8P11',{id:'logNameLabel',prolog:'\n\t\t\t',value:'You are viewing: '},[]],
['zul.inp.Textbox','pF8P21',{id:'outputTextBox',width:'100%',height:'97%',prolog:'\n\t\t\t',readonly:true,multiline:true,rows:40},[]]]]],'horizontal']]]]]]]]]]],0,
['script','["zk.load(\'zk.cpsp\');zk.afterLoad(function(){zk.cpsp.start(\'z_0vp\');});"]']);
</script>
<noscript>
<div class="noscript"><p>Sorry, JavaScript must be enabled.<br/>Change your browser options, then <a href="">try again</a>.</p></div>
</noscript>
</body>
</html>
How can I change the page code to make the tabs load correctly and keep the security headers.
Thanks
unfortunately you forgot to mention the CSP header values you used, so I cant run any tests or answer your question based on the relevant facts.
I assume the script and/or other scripts or resources may have been blocked by CSP. You should see the related error messages in the browser's console. i.e. which policy blocked what. Especially the script you pasted will be evaluated using eval: so any CSP to prevent script evaluation will fail here. This is not ideal but that's what ZK does and needs to do to function.
Here the related docs explaining what's possible when trying to enable CSP in ZK.