CODEWITHSUNDEEP
javascripthtmlcontent-security-policy
Suparna
Suparna

Reputation: 85

How to fix CSP error? "Refused to execute inline event handler because it violates the following Content Security Policy directive..."

I'm getting the CSP error for adding nonce value in script-src. This is the CSP I'm setting - Content-Security-Policy: default-src 'none'; script-src 'self' 'unsafe-eval' 'nonce-b1967a39a02f45edbac95cbb4651bd12' 'unsafe-hashes'; frame-src 'self' 'nonce-b1967a39a02f45edbac95cbb4651bd12' 'unsafe-hashes'; connect-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; object-src 'self'; font-src 'self' data:;

and my JS file content is -

<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> WebHelp Navigation Toolbar </title>



<style>
<!--
body {margin:0;}
-->
</style>
<script nonce='b1967a39a02f45edbac95cbb4651bd12'  src="whver.js" charset="utf-8"></script>
<script nonce='b1967a39a02f45edbac95cbb4651bd12'  src="whutils.js" charset="utf-8"></script>
<script nonce='b1967a39a02f45edbac95cbb4651bd12'  src="whmsg.js" charset="utf-8"></script>
<script nonce='b1967a39a02f45edbac95cbb4651bd12'  src="whproxy.js" charset="utf-8"></script>
<script nonce='b1967a39a02f45edbac95cbb4651bd12'  src="whmozemu.js" charset="utf-8"></script>
<script nonce='b1967a39a02f45edbac95cbb4651bd12'  src="whtbar.js" charset="utf-8"></script>

<script nonce='b1967a39a02f45edbac95cbb4651bd12' type="text/javascript" language="JavaScript1.2">
//<![CDATA[
function printTopic() {
var topicPane;
if (top.frames[0].name == "ContentFrame")
topicPane = top.frames[0].frames[1].frames[1];
else
topicPane = top.frames[1].frames[1];
topicPane.focus();
var msg = new whMessage(WH_MSG_PRINT, 0, 0);
                notify(msg);
}


//]]>
</script>
</head>
<body marginheight="0"  marginwidth="0"  bgcolor="#363f48"    background="background.png"  scroll="no">
<script nonce='b1967a39a02f45edbac95cbb4651bd12' language="javascript1.2">
<!--
if (window.gbWhTBar)
{
    setButtonFont("toc","Arial","11pt","#a7abaf","Normal","Normal","none");
setButtonFont("toc","Arial","11pt","White","Normal","Normal","none", true);
setButtonFont("idx","Arial","11pt","#a7abaf","Normal","Normal","none");
setButtonFont("idx","Arial","11pt","White","Normal","Normal","none", true);
setButtonFont("fts","Arial","11pt","#a7abaf","Normal","Normal","none");
setButtonFont("fts","Arial","11pt","White","Normal","Normal","none", true);
setButtonFont("glo","Arial","11pt","#a7abaf","Normal","Normal","none");
setButtonFont("glo","Arial","11pt","White","Normal","Normal","none", true);
setButtonFont("searchform","Arial","11pt","#a7abaf","Normal","Normal","none");
setButtonFont("searchform","","","","","","", true);
setButtonFont("banner","","","","","","");
setButtonFont("banner","","","","","","", true);
setButtonFont("custom15160","Arial","11pt","#a7abaf","Normal","Normal","none");
setButtonFont("custom15160","Arial","11pt","White","Normal","Normal","none", true);

    gsIToc = "wht_toc_n.gif";
    gsITocS = "wht_toc_h.gif";
    gsIIndex = "wht_idx_n.gif";
    gsIIndexS = "wht_idx_h.gif";
    gsISearch = "wht_fts_n.gif";
    gsISearchS = "wht_fts_h.gif";
    gsIGlossary = "wht_glo_n.gif";
    gsIGlossaryS = "wht_glo_h.gif";
    gsIWebSearch = "wht_ws.gif";
    gsIWebSearchD = "wht_ws_g.gif";
    gsIBanner = "wht_logo1.gif";
    gsIGo = "wht_go.gif";
    setBackgroundcolor("#363f48");
    setBackground("background.png");
    setAlignment("left");
    setGoImage("search-input-go.png");
    
    if (!gsBgImage)
    {
    setButtonBgColor("toc", gsBgColor);
    setButtonBgColor("idx", gsBgColor);
    setButtonBgColor("fts", gsBgColor);
    setButtonBgColor("glo", gsBgColor);
    setButtonBgColor("toc", gsTBSelectedBgColor, true);
    setButtonBgColor("idx", gsTBSelectedBgColor, true);
    setButtonBgColor("fts", gsTBSelectedBgColor, true);
    setButtonBgColor("glo", gsTBSelectedBgColor, true);
    setButtonBgColor("toc","#363f48");
setButtonBgColor("idx","#363f48");
setButtonBgColor("fts","#363f48");
setButtonBgColor("glo","#363f48");
setButtonBgColor("searchform","");
setButtonBgColor("banner","");
setButtonBgColor("custom15160","#363f48");

    }
    setButtonBgColor("toc","#363f48", true);
setButtonBgColor("idx","#363f48", true);
setButtonBgColor("fts","#363f48", true);
setButtonBgColor("glo","#363f48", true);
setButtonBgColor("searchform","", true);
setButtonBgColor("banner","", true);
setButtonBgColor("custom15160","#363f48", true);

    addButton("toc",BTN_TEXT|BTN_IMG,"Contents","","","","",0,0,"contents-unselected.png","contents-selected.png","","contents-selected.png","","");
addButton("fts",BTN_TEXT|BTN_IMG,"Search","","","","",0,0,"search-unselected.png","search-selected.png","","search-selected.png","","");
addButton("searchform",BTN_TEXT,"","","","","",0,0,"","","","","","");
addButton("custom15160",BTN_TEXT|BTN_IMG,"Print","","printTopic();","","",0,0,"print-unselected.png","print-selected.png","","print-selected.png","","");

    addButton("blankblock");
    writeStyle(false);
    ReSortToolbarButtons();
}
else
    document.location.reload();
//-->
</script>
</body>

After removing 'unsafe-inline' from script-src and adding 'nonce-b1967a39a02f45edbac95cbb4651bd12' I'm getting this error. Kind of stuck for a long in this issue. Need some guidance. Thanks in advance.

Upvotes: 0

Views: 4528

Answers (1)

Halvor Sakshaug
Halvor Sakshaug

Reputation: 3475

The error message says you have an inline event handler, which means that you have an onclick, onblur, onchange etc attribute somewhere. The error message may have a link to the actual code.

To allow inline event handlers you need to use one of

  • 'unsafe-hashes' and a hash of the code
  • 'unsafe-inline'

However, if you are able to rewrite the code the best option is to use an event listener instead.

Attributes are not nonceable, so your nonce approach will not apply to this piece of code.

Upvotes: 0

Related Questions